diff --git a/.circleci/config.yml b/.circleci/config.yml index 937cb2f5b14ca9..0ff7ef8603944f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -202,6 +202,9 @@ jobs: - run: name: Lint JSON command: yarn jsonlint + - run: + name: Lint Markdown + command: yarn markdownlint test_static: <<: *defaults steps: diff --git a/.eslintrc.js b/.eslintrc.js index b172f90d4af49d..e1ce56bb6eab88 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -239,11 +239,17 @@ module.exports = { }, // demos { - files: ['docs/src/pages/**/*.js', 'docs/src/pages/**/*.tsx'], + files: [ + 'docs/src/pages/**/*.js', + 'docs/src/pages/**/*.tsx', + 'docs/data/**/*.js', + 'docs/data/**/*.tsx', + ], rules: { // This most often reports data that is defined after the component definition. // This is safe to do and helps readability of the demo code since the data is mostly irrelevant. '@typescript-eslint/no-use-before-define': 'off', + 'react/prop-types': 'off', }, }, { diff --git a/.github/renovate.json b/.github/renovate.json index c8fb2401744f8a..ffb6c98ffb4bd4 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -81,6 +81,11 @@ "matchPaths": ["test/bundling/fixtures/**/package.json"], "schedule": "every 6 months on the first day of the month" }, + { + "groupName": "node", + "matchPackageNames": ["node"], + "enabled": false + }, { "groupName": "examples", "matchPaths": ["examples/**/package.json"], diff --git a/.github/workflows/close-incomplete-inactive.yml b/.github/workflows/close-incomplete-inactive.yml new file mode 100644 index 00000000000000..dc2161108d3308 --- /dev/null +++ b/.github/workflows/close-incomplete-inactive.yml @@ -0,0 +1,17 @@ +name: Close incomplete inactive +on: + schedule: + - cron: "0 0 * * *" +jobs: + close-issues: + runs-on: ubuntu-latest + steps: + - name: Need more information + uses: actions-cool/issues-helper@v2 + with: + actions: 'close-issues' + labels: 'status: incomplete' + inactive-day: 7 + body: | + Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed. + If you wish to see the issue reopened, please provide the missing information. diff --git a/.github/workflows/contributor-twitter.yml b/.github/workflows/contributor-twitter.yml deleted file mode 100644 index 62a3a95057eeb7..00000000000000 --- a/.github/workflows/contributor-twitter.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: contributor-twitter -on: - issues: - types: [labeled] -jobs: - tweet: - runs-on: ubuntu-latest - steps: - # This has essentially zero costs and helps debugging if the workflow fails. - - uses: hmarr/debug-action@master - - uses: ethomson/send-tweet-action@v1 - if: ${{ github.event.label.name == 'good first issue' && github.event.issue.state == 'open' }} - with: - status: > - A new issue in the @materialui repository has been labelled as a good first issue. If you haven't contributed before, now's your chance! - (Just check that it hasn't already been assigned to anyone before starting.) - ${{ github.event.issue.html_url }}" - consumer-key: ${{ secrets.TWITTER_CONSUMER_API_KEY }} - consumer-secret: ${{ secrets.TWITTER_CONSUMER_API_SECRET }} - access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }} - access-token-secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }} diff --git a/.github/workflows/support.yml b/.github/workflows/support-stackoverflow.yml similarity index 93% rename from .github/workflows/support.yml rename to .github/workflows/support-stackoverflow.yml index e6774da91aeb22..9a77cf7f29ec8a 100644 --- a/.github/workflows/support.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -1,5 +1,5 @@ # Configuration for support-requests - https://github.com/dessant/support-requests -name: 'Support Requests' +name: 'Support StackOverflow' on: issues: @@ -16,7 +16,7 @@ jobs: with: github-token: ${{ secrets.GITHUB_TOKEN }} # Label used to mark issues as support requests - support-label: 'support' + support-label: 'support: StackOverflow' # Comment to post on issues marked as support requests. Add a link # to a support page, or set to `false` to disable issue-comment: | diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc new file mode 100644 index 00000000000000..362ff0c8b45606 --- /dev/null +++ b/.markdownlint.jsonc @@ -0,0 +1,26 @@ +{ + // MD013/line-length. Already handled by Prettier. + "MD013": false, + // MD033/no-inline-html. We use it from time to time, it's fine. + "MD033": false, + // MD034/no-bare-urls. Not a concern for us, our Markdown interpreter supports it. + "MD034": false, + // MD014/commands-show-output. It's OK. + "MD014": false, + "MD025": { + // Heading level + "level": 1, + // RegExp for matching title in front matter + "front_matter_title": "" + }, + // MD024/no-duplicate-heading/no-duplicate-header + "MD024": { + "siblings_only": true + }, + // MD036/no-emphasis-as-heading/no-emphasis-as-header. It's OK. + "MD036": false, + // MD029/ol-prefix. Buggy + "MD029": false, + // MD004/ul-style. Buggy + "MD004": false +} diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 00000000000000..31fad843d77d24 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,3 @@ +node_modules +*-zh.md +*-pt.md diff --git a/CHANGELOG.md b/CHANGELOG.md index ab49446b9c9bd0..ac2cd99e7fa69f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,291 @@ -### [Versions](https://mui.com/versions/) +# [Versions](https://mui.com/versions/) + +## 5.4.0 + + + +_Feb 1, 2022_ + +A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨: + +- 🛠 @goncalovf added an example project using [MUI with Vite.js](https://github.com/mui-org/material-ui/tree/master/examples/vitejs) (#28241) +- Number of 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.4.0` + +#### Breaking changes + +- ​[core] Do not reexport Base from Material (#30853) @michaldudak + + All Base components were exported from the `@mui/material` package and treated as stable even though the `@mui/base` package is in development. It could create a lot of confusion if developers start using Base components, depend on them, and demand quality found in "proper" Material components. We admit it was a mistake to reexport these components without marking them as unstable. + + Developers are still encouraged to evaluate the Base components, but they should do so by explicitly installing the `@mui/base` package. + + This is technically a breaking change as it removes a number of components from the `@mui/material` package. However, we believe that removing the components now and potentially breaking the codebases will do less harm than introducing "silent" breaking changes to Base components while continuing reexporting them from `@mui/material`. + + Note: the utility components, such as ClickAwayListener, NoSsr, Portal, and TextareaAutosize continue to be exported from both `@mui/material` and `@mui/base`. + + If you're encountering build errors after upgrading @mui/material, do the following: + + 1. Install @mui/base: npm install @mui/base or yarn add @mui/base + 2. Make sure the version of @mui/base match the version of @mui/material + 3. Change the import paths of unstyled components from @mui/material to @mui/base, e.g.: + + ```diff + - @import ButtonUnstyled from '@mui/material/ButtonUnstyled'; + + @import ButtonUnstyled from '@mui/base/ButtonUnstyled'; + ``` + +#### Changes + +- ​[Autocomplete] Add `readOnly` prop (#30706) @ZeeshanTamboli +- ​[Autocomplete] Fix typos in the page (#30737) @austinewuncler +- ​[FormControlLabel][formgroup] add Mui-error class (#30656) @alisasanib +- ​[Grid] Fix prop check for applying wrap-reverse (#30813) @Hubbz +- ​[TextField] Remove notch when no label is added (#30560) @alisasanib +- ​[TextField] Remove usage of dangerouslySetInnerHTML (#30776) @Jack-Works +- ​[TreeView] Select node when key `Enter` is pressed (#30795) @dryrainbow +- ​[useMediaQuery] Ensure no tearing in React 18 (#30655) @eps1lon + +### `@mui/base@5.0.0-alpha.67` + +- ​[SelectUnstyled] Create unstyled select (+ hook) (#30113) @michaldudak + +### `@mui/lab@5.0.0-alpha.67` + +- ​[DateTimePicker] Fix month view highlight wrong tab (#30773) @DiegoYungh +- ​[pickers] Enable the sx props on all components (#30749) @boutahlilsoufiane + +### Docs + +- ​[blog] Introducing callback support in style overrides (#30668) @siriwatknp +- ​[docs] Add notifications for the blog posts (#30852) @siriwatknp +- ​[docs] Improve the interoperability guide (#30785) @mnajdova +- ​[docs] Improve the Getting Started documentation content (#30808) @mnajdova +- ​[docs] Fix typo in ad fallback (#30823) @cherniavskii +- ​[docs] Change ThemeProvider API links (#30705) @atakanzen +- ​[docs] Retain vendor prefixing in rtl example (#30710) @ryancogswell +- ​[docs] Fix typo in the Popper ScrollPlayground demo (#30780) @tanyabouman +- ​[docs] Small fixes on the jss-to-tss migration guide (#30734) @garronej +- ​[examples] Add Vite.js example (#28241) @goncalovf + +### Core + +- ​[core] Clarify the label, to match with MUI X (#30831) @oliviertassinari +- ​[core] Remove none code related instructions from git (#30843) @oliviertassinari +- ​[core] Fix typos in comments for scripts (#30809) @aefox +- ​[core] Fix 301 link in the blog @oliviertassinari +- ​[test] Fix tests on Node 16 (#30819) @michaldudak +- ​[test] Add explicit types to support noImplicityAny=false (#30798) @m4theushw +- ​[test] Support React.useId format in \*DescriptionOf (#30657) @eps1lon +- ​[website] Fix SEO issues (#30829) @oliviertassinari +- ​[website] Add designer position page (#30708) @danilo-leal +- ​[website] Polish /about page (#30747) @oliviertassinari + +All contributors of this release in alphabetical order: @aefox, @alisasanib, @atakanzen, @austinewuncler, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @DiegoYungh, @dryrainbow, @eps1lon, @garronej, @goncalovf, @Hubbz, @Jack-Works, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @siriwatknp, @tanyabouman, @ZeeshanTamboli + +## 5.3.1 + + + +_Jan 24, 2022_ + +A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- 🛠 @mnajdova added interoperability guide for using Tailwind CSS (#30700) +- A meaningful number of 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/icons-material@5.3.1` + +- ​[icons] Fix naming typos (#30512) @MrHBS +- ​[icons] Makes material-icons work with Joy (#30681) @siriwatknp + +### `@mui/base@5.0.0-alpha.66` + +- ​[SliderUnstyled] Improve typings on some internal utils (#30614) @mnajdova + +### Core + +- ​[core] Batch small changes (#30690) @oliviertassinari +- ​[core] Add new structure to ignore list crowdin (#30608) @siriwatknp +- ​[core] Correct version in package.json (#30677) @michaldudak +- ​[test] Fix buildApiUtils tests on Windows (#30698) @michaldudak + +### Docs + +- ​[blog] Enable blog index (#30724) @siriwatknp +- ​[blog] Introducing the Row Grouping feature (#30598) @alexfauquette +- ​[docs] Fix SEO crawl errors (#30733) @oliviertassinari +- ​[docs] Update migration-v4.md (#30721) @ddecrulle +- ​[docs] Fix migration issues detected by `ahrefs` (#30751) @siriwatknp +- ​[docs] Add interoprability guide for using Tailwind CSS (#30700) @mnajdova +- ​[docs] Fix typo in containedSizeMedium class (#30723) @aaneitchik +- ​[docs] Hotfix the wrong URL in X marketing page (#30729) @siriwatknp +- ​[docs] Post migration preparation fix (#30716) @siriwatknp +- ​[docs] Update remix example to restore from error pages (#30592) @mnajdova +- ​[docs] Use new URLs when enable_redirects is true (#30704) @siriwatknp +- ​[docs] Add a missing bracket in the migration-v4 guide (#30616) @chaosmirage +- ​[docs] Add Checkbox color prop change (#30697) @aaneitchik +- ​[docs] Fix migration to have singular urls (#30695) @siriwatknp +- ​[docs] Update UXPin link to new landing page (#30691) @Evomatic +- ​[docs] Close user menu on click in the responsive app bar demo (#30664) @NoahYarian +- ​[docs] Clear the difference between UI and React components (#29930) @oliviertassinari +- ​[docs] Make Autocomplete docs gender neutral (#30679) @exequielbc +- ​[docs] Update doc structure for X components (#30684) @siriwatknp + +All contributors of this release in alphabetical order: @aaneitchik, @alexfauquette, @chaosmirage, @ddecrulle, @Evomatic, @exequielbc, @michaldudak, @mnajdova, @MrHBS, @NoahYarian, @oliviertassinari, @siriwatknp + +## 5.3.0 + + + +_Jan 17, 2022_ + +A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: + +- 🛠 @siriwatknp added support for callbacks in styleOverrides (#30524) +- 🧩 @ZeeshanTamboli and @VicHofs improved customization of components (#30515, #30212) +- 🛠 @hbjORbj fixed the use of ResizeObserver in Masonry component (#29896) +- 📄 @danilo-leal and @siriwatknp created our own blog home page (#30121) + +### `@mui/material@5.3.0` + +- [Autocomplete] Add ability to pass props to `Paper` component (#30515) @ZeeshanTamboli +- [Select] Add defaultOpen prop (#30212) @VicHofs + +### `@mui/system@5.3.0` + +- [system][box, grid, typography] `textTransform` prop should work directly on component (#30437) @hbjORbj +- [system] Support callback value in `styleOverrides` slot (#30524) @siriwatknp + +### `@mui/lab@5.0.0-alpha.65` + +- [Masonry] Observe every masonry child to trigger computation when needed (#29896) @hbjORbj +- [MobileDatePicker] Fix calling onOpen when readOnly is true (#30561) @alisasanib + +### `@mui/codemod@5.3.0` + +- [codemod] Bump `jscodeshift` to remove `colors` dependency (#30578) @siriwatknp + +### `@mui/styled-engine-sc@5.3.0` + +- [styled-engine-sc] Add the withConfig API to enable using the babel plugin for styled-comonents (#30589) @mnajdova + +### `@mui/joy@5.0.0-alpha.11` + +- [Joy] Add `SvgIcon` component (#30570) @hbjORbj + +### `@mui/base@5.0.0-alpha.65` + +- [SliderUnstyled] Add useSlider hook and polish (#30094) @mnajdova + +### Docs + +- [docs] End code block in test/README.md (#30531) @yaboi +- [docs] Remove redundant grouping in /components/radio-buttons/ (#30065) @eps1lon +- [docs] Update migration scripts and e2e tests (#30583) @siriwatknp +- [docs] Fix migration guides for versions older than v4 (#30595) @kkirsche +- [docs] Inform about specific files for DataGrid locales (#30411) @alexfauquette +- [docs] jss-to-tss migration advise to drop clsx in favor of cx (#30527) @garronej +- [docs] Fix integration with MUI X (#30593) @oliviertassinari +- [docs] Adding peer dependencies explanation on @mui/lab README.md (#30532) @glaucoheitor +- [docs] Add missing quote in migration docs (#30587) @Atralbus +- [docs] Update link to Doit sponsor (#30586) @oliviertassinari +- [docs] Add products identifier and drawer (#30283) @siriwatknp +- [website] Fix code button with installation command (#30622) @danilo-leal +- [website] Add a Blog index page (#30121) @danilo-leal +- [website] Migrate Twitter from @MaterialUI to @MUI_hq @oliviertassinari +- [website] Add Andrii to the About Us page (#30581) @cherniavskii + +### Core + +- [core] Revert changes to peer dependencies (#30662) @oliviertassinari +- [core] Renovate should not try to update node (#30659) @oliviertassinari +- [core] Remove dead files (#30663) @oliviertassinari +- [core] Fix outdated TypeScript template (#30596) @oliviertassinari +- [core] Remove extra `

` from header of README.md (#30530) @yaboi +- [core] Fix `docs:api` script for Windows OS (#30533) @ZeeshanTamboli + +All contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @Atralbus, @cherniavskii, @danilo-leal, @eps1lon, @garronej, @glaucoheitor, @hbjORbj, @kkirsche, @mnajdova, @oliviertassinari, @siriwatknp, @VicHofs, @yaboi, @ZeeshanTamboli + +## 5.2.8 + + + +_Jan 10, 2022_ + +A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: + +- A meaningful number of 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.2.8` + +- ​[TextField][inputlabel] Remove `pointer-events: none` property (#30493) @hbjORbj +- ​[Slider] Add `input` slot to components and componentsProps (#30362) @alexandre-lelain + +### `@mui/joy@5.0.0-alpha.10` + +- ​[Joy] Add `Typography` component (#30489) @siriwatknp +- ​[Joy] Add functional `Switch` component (#30487) @siriwatknp + +### Docs + +- ​[docs] Update markdown parser to remove backticks from description (#30495) @aefox +- ​[docs] Fix the crash when applying custom colors (#30563) @siriwatknp +- ​[docs] Location change of Sebastian (#30528) @eps1lon +- ​[docs] Lint markdown in the CI (#30395) @oliviertassinari +- ​[docs] Fix `componentsProps` API docs and PropTypes (#30502) @ZeeshanTamboli +- ​[docs] Codemod doc for overriding styles using tss (#30499) @garronej +- ​[docs] fix edge case when replacing data-grid url for migration (#30505) @siriwatknp +- ​[docs] fix replace url for migration (#30503) @siriwatknp +- ​[docs] Prepare scripts for migrating to new structure (#30386) @siriwatknp +- ​[docs] Adjust RTL Guide demos to fully support RTL (#30387) @noam-honig +- ​[docs] Move @eps1lon to community (#30473) @oliviertassinari +- ​[docs] Fix typo and spelling in the-sx-prop.md (#30482) @aefox +- ​[docs] More general docs polishing (#30371) @danilo-leal +- ​[website] Add José on the /about page (#30492) @danilo-leal + +All contributors of this release in alphabetical order: @aefox, @alexandre-lelain, @danilo-leal, @eps1lon, @garronej, @hbjORbj, @noam-honig, @oliviertassinari, @siriwatknp, @ZeeshanTamboli + +## 5.2.7 + + + +_Jan 3, 2022_ + +A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: + +- 📓 Improvements on the Vietnamese (vi-VN) and Finnish (fi-FI) locales (#30426, #30442) @hckhanh @Certificate +- And more 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.2.7` + +- ​[Autocomplete] Fix calling onChange for duplicate values (#30374) @alisasanib +- ​[Avatar] Fix TypeScript error on imgProps (#30255) @ahmad-reza619 +- ​[Badge] Fix `classes` prop TypeScript type (#30427) @ZeeshanTamboli +- ​[SvgIcon] Allow viewBox to inherit from Component through inheritViewBox prop (#29954) @alex-dikusar +- ​[SvgIcon] Correct API docs and code style (#30470) @michaldudak + +### Docs + +- ​[blog] 2021 (#30425) @oliviertassinari +- ​[docs] Fix typo on the Grid docs page (#30446) @abhi45 +- ​[docs] Fix `useMediaQuery` SSR example to v5 theme API (#30454) @ValentinH +- ​[docs] Improve the migration guide and add examples for transforming to `tss-react` (#30388) @mnajdova +- ​[docs] Make the reference to the select clearer (#30460) @boazrymland +- ​[docs] Sync translations with Crowdin (#30385) @l10nbot +- ​[example] Avoid double rendering in the Remix example (#30366) @mnajdova +- ​[i18n] improve viVN locale (#30426) @hckhanh +- ​[l10n] Improve fiFI locale (#30442) @Certificate +- ​[website] Add new batch of open roles (#30282) @oliviertassinari +- ​[website] Refactor page context with next router (#30020) @siriwatknp + +### Core + +- ​[core] Automatically close issues that are incomplete and inactive (#30459) @oliviertassinari +- ​[core] Remove contrib tweet (#30455) @oliviertassinari + +All contributors of this release in alphabetical order: @abhi45, @ahmad-reza619, @alex-dikusar, @alisasanib, @boazrymland, @Certificate, @hckhanh, @l10nbot, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @ValentinH, @ZeeshanTamboli ## 5.2.6 @@ -1185,7 +1472,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som replace `@material-ui/*` prefix with `@mui/*`: - ``` + ```sh @material-ui/system -> @mui/system @material-ui/styles -> @mui/styles @material-ui/lab -> @mui/lab @@ -1198,7 +1485,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som except these 3 packages that are renamed. - ``` + ```sh @material-ui/core => @mui/material // represents Material Design components. @material-ui/icons => @mui/icons-material // represents Material Design icons. @material-ui/unstyled => @mui/base // fully functional components with minimum styles. @@ -2571,6 +2858,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som ``` - ​[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw + ```diff option.title === value.title} @@ -4144,7 +4432,7 @@ All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d ## 5.0.0-alpha.23 -###### _Jan 14, 2021_ +_Jan 14, 2021_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: @@ -4259,7 +4547,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som ## 5.0.0-alpha.22 -###### _Jan 4, 2021_ +_Jan 4, 2021_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: @@ -4311,7 +4599,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ## 5.0.0-alpha.21 -###### _Dec 30, 2020_ +_Dec 30, 2020_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: @@ -4384,7 +4672,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ## 5.0.0-alpha.20 -###### _Dec 21, 2020_ +_Dec 21, 2020_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: @@ -4462,7 +4750,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som ## 5.0.0-alpha.19 -###### _Dec 13, 2020_ +_Dec 13, 2020_ A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨: @@ -4590,7 +4878,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som ## 5.0.0-alpha.18 -###### _Dec 3, 2020_ +_Dec 3, 2020_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: @@ -4682,7 +4970,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ## 5.0.0-alpha.17 -###### _Nov 23, 2020_ +_Nov 23, 2020_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: @@ -4849,7 +5137,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ## 5.0.0-alpha.16 -###### _Nov 14, 2020_ +_Nov 14, 2020_ A big thanks to the 34 contributors who made this release possible. Here are some highlights ✨: @@ -4953,7 +5241,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som ## 5.0.0-alpha.15 -###### _Nov 4, 2020_ +_Nov 4, 2020_ A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨: @@ -5065,7 +5353,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som ## 5.0.0-alpha.14 -###### _Oct 23, 2020_ +_Oct 23, 2020_ A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨: @@ -5116,12 +5404,14 @@ Here are some highlights ✨: 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 @@ -5236,7 +5526,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.13 -###### _Oct 17, 2020_ +_Oct 17, 2020_ A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨: @@ -5362,7 +5652,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.12 -###### _Oct 11, 2020_ +_Oct 11, 2020_ A big thanks to the 45 contributors who made this release possible. Here are some highlights ✨: @@ -5586,7 +5876,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.11 -###### _Sep 26, 2020_ +_Sep 26, 2020_ A big thanks to the 29 contributors who made this release possible. Here are some highlights ✨: @@ -5602,7 +5892,7 @@ Here are some highlights ✨: 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/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. + We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take. - 🛠 A first iteration on the unstyled components. @@ -5820,7 +6110,7 @@ More documentation are coming. ## 5.0.0-alpha.10 -###### _Sep 15, 2020_ +_Sep 15, 2020_ A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨: @@ -5885,13 +6175,13 @@ Here are some highlights ✨: Before: - ``` + ```sh theme.spacing(2) => 16 ``` After: - ``` + ```sh theme.spacing(2) => '16px' ``` @@ -5950,7 +6240,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.9 -###### _Sep 6, 2020_ +_Sep 6, 2020_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: @@ -6003,7 +6293,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.8 -###### _Aug 31, 2020_ +_Aug 31, 2020_ A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨: @@ -6179,7 +6469,7 @@ const theme = createMuiTheme({ ## 5.0.0-alpha.7 -###### _Aug 22, 2020_ +_Aug 22, 2020_ A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨: @@ -6309,7 +6599,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.6 -###### _Aug 13, 2020_ +_Aug 13, 2020_ A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨: @@ -6352,7 +6642,7 @@ Here are some highlights ✨: ### `@material-ui/core@v5.0.0-alpha.6` -### Breaking changes +#### Breaking changes - [Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3 Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: @@ -6511,7 +6801,7 @@ Here are some highlights ✨: +}, ``` -### Changes +#### Changes - [Avatar] Custom variant (#22139) @mnajdova - [Badge] Add missing class key (#22095) @kodai3 @@ -6531,7 +6821,7 @@ Here are some highlights ✨: ### `@material-ui/lab@v5.0.0-alpha.6` -### Breaking changes +#### Breaking changes - [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3 Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns: @@ -6543,7 +6833,7 @@ Here are some highlights ✨: + ``` -### Changes +#### Changes - [Autocomplete] Add support for "{label: string}" data type as a default for "options" (#21992) @DanailH - [TreeView] Add disabled prop (#20133) @netochaves @@ -6595,7 +6885,7 @@ Here are some highlights ✨: ## 5.0.0-alpha.5 -###### _July 28, 2020_ +_July 28, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -6666,7 +6956,7 @@ A big thanks to the 18 contributors who made this release possible. ## 5.0.0-alpha.4 -###### _July 19, 2020_ +_July 19, 2020_ A big thanks to the 11 contributors who made this release possible. @@ -6708,7 +6998,7 @@ A big thanks to the 11 contributors who made this release possible. ## 5.0.0-alpha.3 -###### _July 12, 2020_ +_July 12, 2020_ A big thanks to the 14 contributors who made this release possible. @@ -6757,7 +7047,7 @@ A big thanks to the 14 contributors who made this release possible. ## 5.0.0-alpha.2 -###### _July 4, 2020_ +_July 4, 2020_ A big thanks to the 16 contributors who made this release possible. @@ -6819,7 +7109,7 @@ A big thanks to the 16 contributors who made this release possible. ## 5.0.0-alpha.1 -###### _June 27, 2020_ +_June 27, 2020_ A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨: @@ -6935,6 +7225,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som ``` - [Accordion] typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + ```diff -, expanded: boolean) => {}} /> + {}} /> diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 13e0a81ea18c01..db064158f87f33 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -1,5 +1,9 @@ + + + ## 4.12.3 + _Jul 27, 2021_ @@ -186,7 +190,7 @@ You can expect similar releases like this one in the coming months. ## 4.11.3 -###### _Jan 24, 2021_ +_Jan 24, 2021_ This release fixes an important issue with Chrome 88. The usage of NaN as a CSS property with JSS throws an exception. @@ -225,7 +229,7 @@ This release fixes an important issue with Chrome 88. The usage of NaN as a CSS ## 4.11.2 -###### _Dec 2, 2020_ +_Dec 2, 2020_ This release widens the peer dependency scope of React to accept ^17.0.0. The change makes it easier for developers to upgrade React independently from Material-UI. The best support for React 17 will be found in Material-UI v5. @@ -262,7 +266,7 @@ This is a reminder that all ongoing work has moved to v5. This means a feature f ## 4.11.1 -###### _Nov 24, 2020_ +_Nov 24, 2020_ A big thanks to the 12 contributors who made this release possible. @@ -342,7 +346,7 @@ A big thanks to the 12 contributors who made this release possible. ## 4.11.0 -###### _July 1, 2020_ +_July 1, 2020_ A big thanks to the 8 contributors who made this release possible. @@ -404,7 +408,7 @@ A big thanks to the 8 contributors who made this release possible. ## 4.10.2 -###### _June 11, 2020_ +_June 11, 2020_ ⚠️ This release marks the end of the active development on the v4.x versions, after 18 months of development. We are moving all ongoing efforts to v5 (`next` branch) ✨. @@ -493,7 +497,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som ## 4.10.1 -###### _June 1, 2020_ +_June 1, 2020_ A big thanks to the 21 contributors who made this release possible. @@ -545,7 +549,7 @@ A big thanks to the 21 contributors who made this release possible. ## 4.10.0 -###### _May 23, 2020_ +_May 23, 2020_ A big thanks to the 30 contributors who made this release possible. @@ -553,12 +557,15 @@ Here are some highlights ✨: - 🦴 Allow Skeleton to infer its dimensions from the children (#21097) @mikew. In the following example, the skeleton will take the size of the avatar. + ```jsx ``` + Follow [the docs to learn more](https://mui.com/components/skeleton/#inferring-dimensions). + - ♿️ Add tabs accessibility docs section (#20965) @eps1lon. The behavior of the [keyboard navigation](https://mui.com/components/tabs/#keyboard-navigation) can be customized with the `selectionFollowsFocus` prop. - ℹ Improve tooltip arrow customizability (#21095) @sakulstra. @@ -604,7 +611,7 @@ Here are some highlights ✨: ### Docs - [docs] Add CssBaseline to auto dark mode example (#21094) @fantasyui-com -- [docs] Add new twitter quotes to the homepage (#21061) @mbrookes +- [docs] Add new Twitter quotes to the homepage (#21061) @mbrookes - [docs] Fix anchor link to using inline vs. classes (#21151) @dandv - [docs] Fix autocomplete attributes (#21138) @socsieng - [docs] Fix typo in Modal accessibility description (#21062) @arthur-melo @@ -633,7 +640,7 @@ Here are some highlights ✨: ## 4.9.14 -###### _May 11, 2020_ +_May 11, 2020_ A big thanks to the 19 contributors who made this release possible. @@ -699,7 +706,7 @@ Here are some highlights ✨: ## 4.9.13 -###### _May 4, 2020_ +_May 4, 2020_ A big thanks to the 27 contributors who made this release possible. @@ -768,7 +775,7 @@ Here are some highlights ✨: ## 4.9.12 -###### _Apr 27, 2020_ +_Apr 27, 2020_ A big thanks to the 32 contributors who made this release possible. @@ -861,7 +868,7 @@ Here are some highlights ✨: ## 4.9.11 -###### _Apr 18, 2020_ +_Apr 18, 2020_ A big thanks to the 25 contributors who made this release possible. @@ -913,7 +920,7 @@ A big thanks to the 25 contributors who made this release possible. ## 4.9.10 -###### _Apr 11, 2020_ +_Apr 11, 2020_ A big thanks to the 20 contributors who made this release possible. @@ -998,7 +1005,7 @@ You can expect the following: ## 4.9.9 -###### _Apr 4, 2020_ +_Apr 4, 2020_ A big thanks to the 20 contributors who made this release possible. @@ -1049,7 +1056,7 @@ A big thanks to the 20 contributors who made this release possible. ## 4.9.8 -###### _Mar 28, 2020_ +_Mar 28, 2020_ A big thanks to the 24 contributors who made this release possible. @@ -1132,7 +1139,7 @@ Here are some highlights ✨: ## 4.9.7 -###### _Mar 19, 2020_ +_Mar 19, 2020_ ### `@material-ui/core@v4.9.7` @@ -1140,7 +1147,7 @@ Here are some highlights ✨: ## 4.9.6 -###### _Mar 18, 2020_ +_Mar 18, 2020_ A big thanks to the 39 contributors who made this release possible. @@ -1148,10 +1155,10 @@ Here are some highlights ✨: - ⚛️ Improve the DX in Visual Studio Code (#20079, #19962, #19280) @eps1lon @jedwards1211. - Preview the colors in right in the editor - ![](https://user-images.githubusercontent.com/12292047/76473891-2b70ad80-63fa-11ea-8afe-38ceee43eeaa.png) - ![](https://user-images.githubusercontent.com/12292047/76473890-2ad81700-63fa-11ea-9bb3-005f79a195e7.png) + ![colors](https://user-images.githubusercontent.com/12292047/76473891-2b70ad80-63fa-11ea-8afe-38ceee43eeaa.png) + ![colors.amber](https://user-images.githubusercontent.com/12292047/76473890-2ad81700-63fa-11ea-9bb3-005f79a195e7.png) - Preview the purpose of each theme.spacing arguments right in the editor - ![](https://user-images.githubusercontent.com/12292047/75786858-31192400-5d66-11ea-9382-94dd74c42985.png) + ![spacing](https://user-images.githubusercontent.com/12292047/75786858-31192400-5d66-11ea-9382-94dd74c42985.png) - Leverage code snippets to save time with [this extension](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets). - 🔍 12 patches on the Autocomplete component. - 💄 Polish on the Pagination component (#19933, #19964, #19966, #19987) @pvdstel @eps1lon @mbrookes. @@ -1263,7 +1270,7 @@ Here are some highlights ✨: ## 4.9.5 -###### _Feb 29, 2020_ +_Feb 29, 2020_ A big thanks to the 15 contributors who made this release possible. @@ -1304,7 +1311,7 @@ Here are some highlights ✨: ## 4.9.4 -###### _Feb 23, 2020_ +_Feb 23, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -1353,7 +1360,7 @@ Here are some highlights ✨: ## 4.9.3 -###### _Feb 16, 2020_ +_Feb 16, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -1395,7 +1402,7 @@ A big thanks to the 18 contributors who made this release possible. ## 4.9.2 -###### _Feb 9, 2020_ +_Feb 9, 2020_ A big thanks to the 24 contributors who made this release possible. @@ -1441,7 +1448,7 @@ A big thanks to the 24 contributors who made this release possible. ## 4.9.1 -###### _Feb 2, 2020_ +_Feb 2, 2020_ A big thanks to the 39 contributors who made this release possible. @@ -1527,7 +1534,7 @@ Here are some highlights ✨: ## 4.9.0 -###### _Jan 22, 2020_ +_Jan 22, 2020_ A big thanks to the 43 contributors who made this release possible. @@ -1631,7 +1638,7 @@ Here are some highlights ✨: ## 4.8.3 -###### _Jan 6, 2020_ +_Jan 6, 2020_ A big thanks to the 19 contributors who made this release possible. @@ -1676,7 +1683,7 @@ Here are some highlights since 4.8.0 ✨: ## 4.8.2 -###### _Dec 30, 2019_ +_Dec 30, 2019_ A big thanks to the 22 contributors who made this release possible. @@ -1733,7 +1740,7 @@ A big thanks to the 22 contributors who made this release possible. ## 4.8.1 -###### _Dec 24, 2019_ +_Dec 24, 2019_ A big thanks to the 24 contributors who made this release possible. @@ -1777,7 +1784,7 @@ A big thanks to the 24 contributors who made this release possible. ## 4.8.0 -###### _Dec 14, 2019_ +_Dec 14, 2019_ A big thanks to the 29 contributors who made this release possible. @@ -1840,7 +1847,7 @@ Here are some highlights ✨: ## 4.7.2 -###### _Dec 7, 2019_ +_Dec 7, 2019_ A big thanks to the 18 contributors who made this release possible. @@ -1879,7 +1886,7 @@ A big thanks to the 18 contributors who made this release possible. ## 4.7.1 -###### _Dec 1, 2019_ +_Dec 1, 2019_ A big thanks to the 27 contributors who made this release possible. @@ -1939,7 +1946,7 @@ Here are some highlights ✨: ## 3.9.4 -###### _Nov 28, 2019_ +_Nov 28, 2019_ ### `@material-ui/core@v3.9.4` @@ -1949,7 +1956,7 @@ Here are some highlights ✨: ## 4.7.0 -###### _Nov 22, 2019_ +_Nov 22, 2019_ A big thanks to the 27 contributors who made this release possible. @@ -2021,7 +2028,7 @@ Here are some highlights ✨: ## 4.6.1 -###### _Nov 12, 2019_ +_Nov 12, 2019_ A big thanks to the 19 contributors who made this release possible. @@ -2112,7 +2119,7 @@ index 757d66a97..a4f36edd5 100644 ## 4.6.0 -###### _Nov 5, 2019_ +_Nov 5, 2019_ A big thanks to the 26 contributors who made this release possible. @@ -2193,7 +2200,7 @@ We are proud of the community. Let's keep this trend going 🚀. ## 4.5.2 -###### _Oct 28, 2019_ +_Oct 28, 2019_ A big thanks to the 48 contributors who made this release possible! @@ -2303,7 +2310,7 @@ Here are some highlights ✨: ## 4.5.1 -###### _Oct 12, 2019_ +_Oct 12, 2019_ A big thanks to the 28 contributors who made this release possible! @@ -2398,7 +2405,7 @@ Here are some highlights ✨: ## 4.5.0 -###### _Oct 2, 2019_ +_Oct 2, 2019_ A big thanks to the 20 contributors who made this release possible! @@ -2450,7 +2457,7 @@ Here are some highlights ✨: - [system] Fix props being required from `style` function (#17534) @abukurov -### `@material-ui/codemod@v4.5.0` +### `@material-ui/styles@v4.5.0` - [styles] Bump jss dependencies to v10.0.0 stable (#17536) @eps1lon @@ -2487,7 +2494,7 @@ Here are some highlights ✨: ## 4.4.3 -###### _Sep 22, 2019_ +_Sep 22, 2019_ A big thanks to the 23 contributors who made this release possible! This is a stability release. @@ -2557,7 +2564,7 @@ This is a stability release. ## 4.4.2 -###### _Sep 11, 2019_ +_Sep 11, 2019_ A big thanks to the 7 contributors who made this release possible! This is a quick release after v4.4.1 to solve 3 regressions. @@ -2582,7 +2589,7 @@ This is a quick release after v4.4.1 to solve 3 regressions. ## 4.4.1 -###### _Sep 8, 2019_ +_Sep 8, 2019_ A big thanks to the 21 contributors who made this release possible! @@ -2655,7 +2662,7 @@ Here are some highlights ✨: ## 4.4.0 -###### _Aug 31, 2019_ +_Aug 31, 2019_ A big thanks to the 29 contributors who made this release possible! @@ -2718,7 +2725,7 @@ Here are some highlights ✨: ## 4.3.3 -###### _Aug 21, 2019_ +_Aug 21, 2019_ A big thanks to the 22 contributors who made this release possible! @@ -2774,7 +2781,7 @@ Here are some highlights ✨: ## 4.3.2 -###### _Aug 10, 2019_ +_Aug 10, 2019_ A big thanks to the 22 contributors who made this release possible! @@ -2833,7 +2840,7 @@ Here are some highlights ✨: ## 4.3.1 -###### _Aug 03, 2019_ +_Aug 03, 2019_ A big thanks to the 18 contributors who made this release possible! @@ -2868,7 +2875,7 @@ A big thanks to the 18 contributors who made this release possible! ## 4.3.0 -###### _July 28, 2019_ +_July 28, 2019_ A big thanks to the 23 contributors who made this release possible! @@ -3003,7 +3010,7 @@ Here are some highlights ✨: ## 4.2.1 -###### _July 17, 2019_ +_July 17, 2019_ A big thanks to the 25 contributors who made this release possible! @@ -3080,7 +3087,7 @@ Here are some highlights ✨: ## 4.2.0 -###### _July 6, 2019_ +_July 6, 2019_ A big thanks to the 24 contributors who made this release possible! @@ -3157,7 +3164,7 @@ Here are some highlights ✨: ## 4.1.3 -###### _June 25, 2019_ +_June 25, 2019_ A big thanks to the 4 contributors who made this release possible! This is a quick release after a regression that occurred in 4.1.2. @@ -3180,7 +3187,7 @@ This is a quick release after a regression that occurred in 4.1.2. ## 4.1.2 -###### _June 23, 2019_ +_June 23, 2019_ A big thanks to the 30 contributors who made this release possible! @@ -3272,7 +3279,7 @@ Here are some highlights ✨: ## 4.1.1 -###### _June 13, 2019_ +_June 13, 2019_ A big thanks to the 10 contributors who made this release possible! @@ -3329,7 +3336,7 @@ Here are some highlights ✨: ## 4.1.0 -###### _June 10, 2019_ +_June 10, 2019_ A A big thanks to the 26 contributors who made this release possible! @@ -3413,7 +3420,7 @@ Here are some highlights ✨: ## 4.0.2 -###### _June 3, 2019_ +_June 3, 2019_ A A big thanks to the 30 contributors who made this release possible! @@ -3495,7 +3502,7 @@ Here are some highlights ✨: ## 4.0.1 -###### _May 27, 2019_ +_May 27, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -3574,9 +3581,9 @@ Here are some highlights ✨: ## 4.0.0 -###### _May 23, 2019_ +_May 23, 2019_ -[Material-UI v4 is out 🎉](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) +[Material-UI v4 is out 🎉](https://mui.com/blog/material-ui-v4-is-out/) Some statistics with v4 compared to the release of v1 one year ago: @@ -3608,7 +3615,7 @@ Some statistics with v4 compared to the release of v1 one year ago: ## 4.0.0-rc.0 -###### _May 20, 2019_ +_May 20, 2019_ A A big thanks to the 17 contributors who made this release possible! @@ -3690,7 +3697,7 @@ The release of v4 is imminent, stay tuned! ## 4.0.0-beta.2 -###### _May 13, 2019_ +_May 13, 2019_ A A big thanks to the 13 contributors who made this release possible! @@ -3744,7 +3751,7 @@ This is a stability release preparing v4. ## 4.0.0-beta.1 -###### _May 5, 2019_ +_May 5, 2019_ A A big thanks to the 19 contributors who made this release possible! @@ -3826,7 +3833,7 @@ Here are some highlights ✨: ## 4.0.0-beta.0 -###### _Apr 28, 2019_ +_Apr 28, 2019_ A A big thanks to the 21 contributors who made this release possible! @@ -3960,7 +3967,7 @@ You will learn more about v4 in the final release blog post and our plans for th ## 4.0.0-alpha.8 -###### _Apr 17, 2019_ +_Apr 17, 2019_ A A big thanks to the 27 contributors who made this release possible! @@ -4125,7 +4132,7 @@ We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May. ## 4.0.0-alpha.7 -###### _Apr 8, 2019_ +_Apr 8, 2019_ A A big thanks to the 24 contributors who made this release possible! @@ -4228,7 +4235,7 @@ Here are some highlights ✨: ## 4.0.0-alpha.6 -###### _Mar 30, 2019_ +_Mar 30, 2019_ A A big thanks to the 20 contributors who made this release possible! @@ -4314,7 +4321,7 @@ Here are some highlights ✨: ## 3.9.3 -###### _Mar 28, 2019_ +_Mar 28, 2019_ A big thanks to the 11 contributors who made this release possible! @@ -4344,7 +4351,7 @@ N/A ## 4.0.0-alpha.5 -###### _Mar 23, 2019_ +_Mar 23, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -4425,7 +4432,7 @@ Here are some highlights ✨: ## 4.0.0-alpha.4 -###### _Mar 17, 2019_ +_Mar 17, 2019_ A A big thanks to the 17 contributors who made this release possible! @@ -4518,7 +4525,7 @@ Here are some highlights ✨: ## 4.0.0-alpha.3 -###### _Mar 10, 2019_ +_Mar 10, 2019_ A A big thanks to the 14 contributors who made this release possible! @@ -4578,6 +4585,7 @@ Here are some highlights ✨: ``` - Remove the `@material-ui/styles/install` module. + ```diff -import { install } from '@material-ui/styles'; -install(); @@ -4617,7 +4625,7 @@ Here are some highlights ✨: ## 4.0.0-alpha.2 -###### _Mar 3, 2019_ +_Mar 3, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -4639,7 +4647,7 @@ Here are some highlights ✨: We have removed the `labelContainer`, `label` and `labelWrapped` class keys. We have removed 2 intermediary DOM elements. You should be able to move the custom styles to the root class key. - ![](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png) + ![wrapper](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png) - [Table] Add dense support (#14561) @leMaik @@ -4701,7 +4709,7 @@ Here are some highlights ✨: - [utils] Drop componentPropType in favor of PropTypes.elementType (#14602) @eps1lon -## Docs +### Docs - [MobileStepper] Remove unused classname in example (#14597) @charlax - [docs] Update the Team (#14613) @oliviertassinari @@ -4720,7 +4728,7 @@ Here are some highlights ✨: - [docs] Add simple list TypeScript demo (#14485) @eps1lon - [docs] Fix wrong source code URLs (#14716) @oliviertassinari -## Core +### Core - [core] Fix webstorm autocompletion (#14599) @eps1lon - [ci] Use dangerJS to report bundle size changes (#14587) @eps1lon @@ -4738,7 +4746,7 @@ Here are some highlights ✨: ## 4.0.0-alpha.1 -###### _Feb 20, 2019_ +_Feb 20, 2019_ A A big thanks to the 16 contributors who made this release possible! @@ -4850,7 +4858,7 @@ Remove the first option argument of `withTheme()`. The first argument was a plac ## 4.0.0-alpha.0 -###### _Feb 12, 2019_ +_Feb 12, 2019_ This is our first unstable release toward Material-UI v4.0.0. We try to release a major every 6-12 months. This gives us the opportunity to remove deprecated APIs, upgrade our peer dependencies and more importantly, keep up with the direction the community is taking. @@ -5061,7 +5069,7 @@ _Tip: you can provide more than one argument: `theme.spacing(1, 2) // = '8px 16p ## 3.9.2 -###### _Feb 03, 2019_ +_Feb 03, 2019_ A big thanks to the 16 contributors who made this release possible! @@ -5121,7 +5129,7 @@ Here are some highlights ✨: ## 3.9.1 -###### _Jan 26, 2019_ +_Jan 26, 2019_ A big thanks to the 30 contributors who made this release possible! @@ -5198,7 +5206,7 @@ Here are some highlights ✨: ## 3.9.0 -###### _Jan 14, 2019_ +_Jan 14, 2019_ A big thanks to the 17 contributors who made this release possible! @@ -5250,7 +5258,7 @@ Here are some highlights ✨: ## 3.8.3 -###### _Jan 9, 2019_ +_Jan 9, 2019_ A big thanks to the 5 contributors who made this release possible! @@ -5269,7 +5277,7 @@ We are making a quick release to fix an important TypeScript regression. ## 3.8.2 -###### _Jan 7, 2019_ +_Jan 7, 2019_ A big thanks to the 20 contributors who made this release possible! @@ -5344,7 +5352,7 @@ Here are some highlights ✨: ## 3.8.1 -###### _Dec 30, 2018_ +_Dec 30, 2018_ ### `@material-ui/core@v3.8.1` @@ -5364,7 +5372,7 @@ Here are some highlights ✨: ## 3.8.0 -###### _Dec 30, 2018_ +_Dec 30, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5435,7 +5443,7 @@ The Tabs `fullWidth` and `scrollable` properties can't be used at the same time. ## 3.7.1 -###### _Dec 22, 2018_ +_Dec 22, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5480,7 +5488,7 @@ Here are some highlights ✨: ## 3.7.0 -###### _Dec 17, 2018_ +_Dec 17, 2018_ A big thanks to the 11 contributors who made this release possible! @@ -5547,7 +5555,7 @@ you to add them up quickly in your head without having to worry about decimals. ## 3.6.2 -###### _Dec 9, 2018_ +_Dec 9, 2018_ A big thanks to the 20 contributors who made this release possible! @@ -5612,7 +5620,7 @@ Here are some highlights ✨: ## 3.6.1 -###### _Dec 1, 2018_ +_Dec 1, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5659,7 +5667,7 @@ It's a stability release after v3.6.0. It contains tons of bug fixes 🐛. ## 3.6.0 -###### _Nov 26, 2018_ +_Nov 26, 2018_ A big thanks to the 28 contributors who made this release possible! @@ -5766,7 +5774,7 @@ import Divider from '@material-ui/core/Divider'; ## 3.5.1 -###### _Nov 13, 2018_ +_Nov 13, 2018_ A big thanks to the 13 contributors who made this release possible! @@ -5872,13 +5880,13 @@ _Powered by [JSS](https://github.com/cssinjs/jss)._ ## 3.5.0 -###### _Nov 12, 2018_ +_Nov 12, 2018_ _Corrupted, to not use._ ## 3.4.0 -###### _Nov 5, 2018_ +_Nov 5, 2018_ A big thanks to the 16 contributors who made this release possible! @@ -5932,7 +5940,7 @@ Here are some highlights ✨: ## 3.3.2 -###### _Oct 27, 2018_ +_Oct 27, 2018_ A big thanks to the 17 contributors who made this release possible! @@ -5979,7 +5987,7 @@ Here are some highlights ✨: ## 3.3.1 -###### _Oct 24, 2018_ +_Oct 24, 2018_ A big thanks to the 8 contributors who made this release possible! @@ -6000,7 +6008,7 @@ This is a quick patch after an important regression with the Modal component. ## 3.3.0 -###### _Oct 21, 2018_ +_Oct 21, 2018_ A big thanks to the 26 contributors who made this release possible! @@ -6064,7 +6072,7 @@ Here are some highlights ✨: ## 3.2.2 -###### _Oct 16, 2018_ +_Oct 16, 2018_ A big thanks to the 3 contributors who made this release possible! This is a quick patch after important regressions. @@ -6081,7 +6089,7 @@ This is a quick patch after important regressions. ## 3.2.1 -###### _Oct 14, 2018_ +_Oct 14, 2018_ A big thanks to the 19 contributors who made this release possible! @@ -6142,7 +6150,7 @@ Here are some highlights ✨: ## 3.2.0 -###### _Oct 8, 2018_ +_Oct 8, 2018_ A big thanks to the 18 contributors who made this release possible! @@ -6230,7 +6238,7 @@ This change updates the variant wording to match the one used in the Material De ## 3.1.2 -###### _Sep 30, 2018_ +_Sep 30, 2018_ A big thanks to the 16 contributors who made this release possible! It contains many bug fixes 🐛 and documentation improvements 📝. @@ -6277,7 +6285,7 @@ It contains many bug fixes 🐛 and documentation improvements 📝. ## 3.1.1 -###### _Sep 24, 2018_ +_Sep 24, 2018_ A big thanks to the 21 contributors who made this release possible! It contains many bug fixes 🐛 and documentation improvements 📝. @@ -6332,7 +6340,7 @@ It contains many bug fixes 🐛 and documentation improvements 📝. ## 3.1.0 -###### _Sep 16, 2018_ +_Sep 16, 2018_ A big thanks to the 24 contributors who made this release possible! @@ -6396,7 +6404,7 @@ Here are some highlights ✨: ## 3.0.3 -###### _Sep 9, 2018_ +_Sep 9, 2018_ A big thanks to the 13 contributors who made this release possible! @@ -6432,7 +6440,7 @@ A big thanks to the 13 contributors who made this release possible! ## 3.0.2 -###### _Sep 3, 2018_ +_Sep 3, 2018_ A big thanks to the 16 contributors who made this release possible! @@ -6465,7 +6473,7 @@ Here are some highlights ✨: +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [SpeedDialAction] Update tooltipPlacement propTypes (#12730) @Primajin - [Slider] Add missing packages (#12745) @GermanBluefox @@ -6490,7 +6498,7 @@ N/A ## 3.0.1 -###### _Aug 28, 2018_ +_Aug 28, 2018_ A big thanks to the 10 contributors who made this release possible! @@ -6528,7 +6536,7 @@ It's also a good opportunity to upgrade to the stable release of Babel 7. ## 3.0.0 -###### _Aug 27, 2018_ +_Aug 27, 2018_ A big thanks to the 27 contributors who made this release possible! @@ -6555,7 +6563,7 @@ Firefox 52 is the last version supported by Windows XP. The market share of Firefox 45 is 0.03%. We use the same strategy for Chrome. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Improve type checking for inputProps (#12591) @eps1lon - [ClickAwayListener] Prevent rerendering (#12613) @shcherbyakdev @@ -6569,7 +6577,7 @@ We use the same strategy for Chrome. - [CardActionArea] Add CardActionArea component (#12624) @yuchi - [ListItem] Move the selected prop from MenuItem to ListItem (#12602) @the-question -#### Docs +### Docs - [examples] Update ts example to be closer to the official docs (#12593) @eps1lon - [docs] Fix a display issue on IE11 (#12599) @oliviertassinari @@ -6587,7 +6595,7 @@ We use the same strategy for Chrome. - [docs] Autocomplete react-select dropdown overlay (#12664) @gerhat - [docs] Fix typo in usage.md (#12666) @DeveloperDavo -#### Core +### Core - [core] Better Windows support for the API generation (#12584) @adeelibr - [TypeScript] Update SnackbarContent type def to accept action prop as array (#12595) @cngraf @@ -6607,7 +6615,7 @@ We use the same strategy for Chrome. ## 1.5.1 -###### _Aug 19, 2018_ +_Aug 19, 2018_ A big thanks to the 22 contributors who made this release possible! @@ -6621,7 +6629,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tab] Fix fullWidth CSS (#12495) @jankjr - [TextField] Fix disabled prop only affecting the Input component (#12489) @WreckedArrow @@ -6637,7 +6645,7 @@ N/A - [Dialog] Simplify the DialogContentText implementation (#12577) @oliviertassinari - [Popover] Fix wrong getContentAnchorEl definition (#12562) @duvet86 -#### Docs +### Docs - [docs] Tweak dashboard example nav list heading (#12501) @JoshuaLicense - [docs] Fix a typo in the Modal page (#12502) @melaniebcohen @@ -6655,7 +6663,7 @@ N/A - [docs] Improve TypeScript issue assistance (#12560) @eps1lon - [docs] Add notistack in the related projects (#12578) @oliviertassinari -#### Core +### Core - [typescript] Style typing improvements (#12492) @pelotom - [core] Should run the tests when needed (#12510) @oliviertassinari @@ -6673,7 +6681,7 @@ N/A ## 1.5.0 -###### _Aug 12, 2018_ +_Aug 12, 2018_ A big thanks to the 23 contributors who made this release possible! This is a dense release! @@ -6689,7 +6697,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Accept boolean (#12429) @oliviertassinari - [icons] Resize svg icons (#12356) @the-question @@ -6704,7 +6712,7 @@ N/A - [Button] Make the outlined variant better leverage the color (#12473) @essuraj - [Tooltip] Hide the tooltip as soon as an exit event triggers (#12488) @oliviertassinari -#### Docs +### Docs - [docs] Fix react-select multiselection wrapping (#12412) @henkvhest - [docs] Add some Render Props demos (#12366) @jedwards1211 @@ -6721,10 +6729,10 @@ N/A - [README] New iteration on the backers (#12475) @oliviertassinari - [docs] Font vs SVG. Which approach to use? (#12466) @PolGuixe - [docs] Add a Table Of Contents (#12368) @oliviertassinari -- [docs] Fix link to twitter account (#12482) @patcito +- [docs] Fix link to Twitter account (#12482) @patcito - [docs] Try CodeFund over Carbon (#12484) @oliviertassinari -#### Core +### Core - [typescript] Synced with PR #12373 (#12439) @franklixuefei - [core] Add hoverOpacity to TypeAction interface (#12455) @hassan-zaheer @@ -6739,7 +6747,7 @@ N/A ## 1.4.3 -###### _Aug 4, 2018_ +_Aug 4, 2018_ A big thanks to the 15 contributors who made this release possible! This release focuses on bug fixes 🐛. @@ -6748,7 +6756,7 @@ This release focuses on bug fixes 🐛. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tooltip] Add default css max-width and customization demo (#12338) @simoami - [Step] Add completed class to the root (#12339) @kylezinter @@ -6763,7 +6771,7 @@ N/A - [MobileStepper] Add a LinearProgressProps property (#12404) @oliviertassinari - [Textarea] Add back defensive branch logic (#12406) @kanzelm3 -#### Docs +### Docs - [docs] Add markdown code to Interactive Grid (#12333) @itelo - [docs] Document how to use the Select with a label and a placeholder (#12342) @oliviertassinari @@ -6773,7 +6781,7 @@ N/A - [docs] Fix ChipPlayground generated code (#12401) @mbrookes - [docs] Add Tomahawk boilerplate to the related projects (#12393) @goemen -#### Core +### Core - [core] Upgrade the dependencies (#12409) @oliviertassinari @@ -6783,7 +6791,7 @@ N/A ## 1.4.2 -###### _Jul 29, 2018_ +_Jul 29, 2018_ A big thanks to the 22 contributors who made this release possible! I hope we will soon beat our previous record: 30 contributors in a single week. @@ -6799,7 +6807,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tabs] Reduce the bundle size (#12256) @oliviertassinari - [Menu] Add null as acceptable value of anchorEl (#12249) @LAITONEN @@ -6823,7 +6831,7 @@ N/A - [LinearProgress] Fix wrong style rule usage (#12319) @agentmilindu - [Popper] Fix modifiers appearing as attribute of div (#12329) @skeithtan -#### Docs +### Docs - [docs] Fix typo (#12248) @johnjacobkenny - [docs] Add typekev.com to showcase page (#12243) @typekev @@ -6839,7 +6847,7 @@ N/A - [docs] Document NoSsr (#12317) @oliviertassinari - [docs] Improve the docs to have matches (#12322) @oliviertassinari -#### Core +### Core - [core] Upgrade dev dependencies (#12323) @oliviertassinari @@ -6851,7 +6859,7 @@ N/A ## 1.4.1 -###### _Jul 22, 2018_ +_Jul 22, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -6882,7 +6890,7 @@ Here are some highlights ✨: @material-ui/icons@2.0.0 allows React users to take advantage of the icons revamp the Material Design Team has been recently released. Some icons have been removed, ~150 new icons have been added, and some icons have been renamed. There are also currently some issues with the size of certain icons. Please refer to #12016 for further details. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tab] Fix maxWidth issue with fullWidth mode (#12158) @chenop - [Popper] Update TypeScript definitions (#12161) @Slessi @@ -6905,7 +6913,7 @@ Here are some highlights ✨: - [Textarea] Simplification of the code (#12238) @oliviertassinari - [Tabs] Small changes investigating #11624 (#12239) @oliviertassinari -#### Docs +### Docs - [docs] Add Toggle Selection Control to 'Migration From v0.x' Document (#12149) @shabareesh - [docs] Add Menu Item to 'Migration From v0.x' Document (#12150) @shabareesh @@ -6915,7 +6923,7 @@ Here are some highlights ✨: - [docs] Document the CSS API (#12174) @mbrookes - [docs] An iteration on the SSR Troubleshooting section (#12229) @oliviertassinari -#### Core +### Core - [core] Upgrade dev dependencies (#12156) @oliviertassinari - [core] Add missing unwrap export to test-utils type definition (#12184) @kallebornemark @@ -6932,7 +6940,7 @@ Here are some highlights ✨: ## 1.4.0 -###### _Jul 14, 2018_ +_Jul 14, 2018_ A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨: @@ -6954,7 +6962,7 @@ You can now dynamically change the theme of the whole documentation site. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Icons] Misc fixes and optimizations (#12036) @mbrookes - [Tooltip] Rework the implementation (#12085) @oliviertassinari @@ -6967,7 +6975,7 @@ N/A - [Toolbar] Add dense variant (#12075) @srilman - [Typography] Fix display2 cuts off the bottom of a 'g' (#12146) @Skaronator -#### Docs +### Docs - [docs] Fix typo (#12046) @AlexanderLukin - [docs] Fix wrong icon names (#12042) @AlexanderLukin @@ -6989,7 +6997,7 @@ N/A - [docs] Add a comment that React 16.3.0 is a peer dependency (#12145) @chenop - [Table] Document the CSS API (#12147) @chenop -#### Core +### Core - [core] Upgrade the dev dependencies (#12049) @oliviertassinari - [core] Improve the prop-types of shape (#12098) @oliviertassinari @@ -7005,7 +7013,7 @@ N/A ## 1.3.1 -###### _Jul 2, 2018_ +_Jul 2, 2018_ A big thanks to the 13 contributors who made this release possible. @@ -7019,7 +7027,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix some W3C issues (#11983) @oliviertassinari - [Icon] Add a fontSize prop which accepts default and inherit (#11986) @sakulstra @@ -7033,7 +7041,7 @@ N/A - [ExpansionPanelSummary] Add IconButtonProps property (#12035) @dakotamurphyucf - [Dialog] Document the scroll property (#12025) @oliviertassinari -#### Docs +### Docs - [docs] Use \_app.js instead of wrapping every page by withRoot() (#11989) @NikitaVlaznev - [docs] Link RootRef in the FAQ (#12005) @scottastrophic @@ -7042,7 +7050,7 @@ N/A - [docs] Small spelling fix (#12028) @danh293 - [docs] Add a demo with Font Awesome (#12027) @oliviertassinari -#### Core +### Core - [typescript][createmuitheme] Fix typings & deepmerge shape (#11993) @franklixuefei - [core] Warn about Children.map & Fragment (#12021) @oliviertassinari @@ -7054,7 +7062,7 @@ N/A ## 1.3.0 -###### _Jun 26, 2018_ +_Jun 26, 2018_ A big thanks to the 10 contributors who made this release possible. @@ -7068,7 +7076,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [FormControl] Correct minor typo in text (#11931) @FluentSynergyDW - [Grid] Add `auto` to TypeScript definitions (#11933) @woobianca @@ -7079,7 +7087,7 @@ N/A - [theme] Add border-radius to the theme (#11847) @itelo - [Dialog] Add a scroll property (#11974) @oliviertassinari -#### Docs +### Docs - [Showcase] Add posters galore (react-admin) (#11939) @fzaninotto - [docs] Update ts example (#11949) @kevinhughes27 @@ -7088,7 +7096,7 @@ N/A - [docs] Better API wording (#11973) @oliviertassinari - [docs] In TypeScript doc, add missing `createStyles` to import (#11975) @Sylphony -#### Core +### Core - [typescript] Fix Typings for disableTouchRipple and allVariants (#11944) @franklixuefei - [core] Upgrade the dev dependencies (#11954) @oliviertassinari @@ -7102,7 +7110,7 @@ N/A ## 1.2.3 -###### _Jun 20, 2018_ +_Jun 20, 2018_ A big thanks to the 6 contributors who made this release possible. @@ -7113,7 +7121,7 @@ We are making it outside of the normal schedule. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ButtonBase] Fix exception (#11905) @oliviertassinari - [NoSSR] Add a fallback property (#11907) @oliviertassinari @@ -7121,13 +7129,13 @@ N/A - [Tooltip] Revert update react-popper (#11920) @oliviertassinari - [Select] Fix classes merge issue (#11904) @C-Rodg -#### Docs +### Docs - [docs] Document jss-nested rule reference feature (#11901) @i8ramin - [docs] Correct markdown example from svg icon (#11922) @GabrielDuarteM - [docs] TS decorating reword (#11923) @swpease -#### Core +### Core N/A @@ -7137,7 +7145,7 @@ N/A ## 1.2.2 -###### _Jun 18, 2018_ +_Jun 18, 2018_ A big thanks to the 16 contributors who made this release possible. @@ -7151,7 +7159,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ClickAwayListener] Add a demo (#11801) @oliviertassinari - [Grid] Add support a auto value (#11804) @oliviertassinari @@ -7175,7 +7183,7 @@ N/A - [CircularProgress] End of line shape: use butt (#11888) @Modestas - [Select] Fix reflow in render (#11891) @oliviertassinari -#### Docs +### Docs - [docs] Add structured data (#11798) @oliviertassinari - [docs] Add a link to a CSS-in-JS egghead.io course (98168a2c749d8da2376d6a997145e3622df71bff) @kof @@ -7189,7 +7197,7 @@ N/A - [examples] Add Server Rendering implementation (#11880) @oliviertassinari - [docs] Update react-swipeable-views to fix a warning (#11890) @oliviertassinari -#### Core +### Core - [core] Misc (#11797) @oliviertassinari - [core] Better `component` prop types (#11863) @jedwards1211 @@ -7203,7 +7211,7 @@ N/A ## 1.2.1 -###### _Jun 10, 2018_ +_Jun 10, 2018_ A big thanks to the 15 contributors who made this release possible. @@ -7217,7 +7225,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Add a placeholder demo (#11706) @oliviertassinari - [RootRef] Update RootRef.d.ts (#11708) @franklixuefei @@ -7232,7 +7240,7 @@ N/A - [TextField] Bind the focus/blur explicitly (#11789) @oliviertassinari - [RadioGroup] Fix onChange chaining (#11793) @oliviertassinari -#### Docs +### Docs - [docs] Property !== attribute (#11694) @adeelibr - [docs] Add Trafikito.com to showcase (#11716) @liesislukas @@ -7245,7 +7253,7 @@ N/A - [docs] Fix typo (#11787) @BenDiuguid - [docs] Better troubleshooting action for the hydration mismatch (#11792) @oliviertassinari -#### Core +### Core - [core] Remove parser specification to fix JSON issue (#11763) @ryanpcmcquen - [core] Throw if react >= 16.3.0 requirement isn't matched (#11779) @oliviertassinari @@ -7259,7 +7267,7 @@ N/A ## 1.2.0 -###### _Jun 3, 2018_ +_Jun 3, 2018_ A big thanks to the 23 contributors who made this release possible. @@ -7273,7 +7281,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Snackbar] Add customization example (#11597) @mbrn - [Menu] Fix a regression on Edge (#11614) @oliviertassinari @@ -7289,7 +7297,7 @@ N/A - [SwipeableDrawer] Fix a regression introduced in React 16.4.0 (#11689) @oliviertassinari - [RootRef] Allow using React.createRef api with RootRef component (#11681) @TrySound -#### Docs +### Docs - [docs] Better API spread section (#11598) @oliviertassinari - [docs] Update Wertarbyte components link (#11603) @leMaik @@ -7304,7 +7312,7 @@ N/A - [docs] Update link to flow-typed definitions (#11674) @jessrosenfield - [docs] Minor grammitcal error (#11691) @NeuTrix -#### Core +### Core - [typescript] Depend directly on CSSType (#11608) @pelotom - [core] Upgrade dependencies (#11616) @oliviertassinari @@ -7323,7 +7331,7 @@ N/A ## 1.1.0 -###### _May 26, 2018_ +_May 26, 2018_ A big thanks to the 30 contributors who made this release possible. @@ -7337,7 +7345,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ListSubheader] Fix demo import path (#11468) @Hocdoc - [Backdrop] Fix export paths (#11481) @brandonhall @@ -7354,7 +7362,7 @@ N/A - [StepConnector] Add to default export from @material-ui/core (#11583) @OsipovIgor - [ButtonBase] Improve enter & space handling (#11585) @TheBear44 -#### Docs +### Docs - [examples] Fix imports for Dialog (#11469) @sboles - [docs] Add v0 subdirectory redirects (#11470) @mbrookes @@ -7378,7 +7386,7 @@ N/A - [docs] Add react-admin to related projects (#11582) @fzaninotto - [docs] Update the showcase (#11578) @mbrookes -#### Core +### Core - [typescript] Make TypographyStyle assignable to CSSProperties, misc other typing fixes (#11456) @pelotom - [core] Cut the head of the snake 🐍 (#11477) @oliviertassinari @@ -7397,7 +7405,7 @@ N/A ## 1.0.0 -###### _May 17, 2018_ +_May 17, 2018_ Our first stable v1 release! 🎉 @@ -7413,7 +7421,7 @@ Some statistics with v1 while it was in alpha and beta: ## 1.0.0-rc.1 -###### _May 15, 2018_ +_May 15, 2018_ A big thanks to the 10 contributors who made this release possible. @@ -7427,7 +7435,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [codemod] Revert the codemod inception on the tests (#11376) @oliviertassinari - [typescript] Fix DialogContent export (#11378) @ljvanschie @@ -7436,14 +7444,14 @@ N/A - [NativeSelect] New component (#11364) @oliviertassinari - [Popover] Fix max height issue in some mobile browsers (#11349) @gaborcs -#### Docs +### Docs - [docs] Update notifications for v1.0.0-rc.0 (#11351) @simsim0709 - [Snackbar] Fix transition directions demo (#11391) @serendipity1004 - [docs] Remove react@15 message (#11399) @deltaskelta - [docs] Better netlify cache control (#11404) @oliviertassinari -#### Core +### Core - [core] Do not include polyfills in the ES modules build (#11358) @goto-bus-stop - [core] Workaround a Babel regression (#11398) @oliviertassinari @@ -7453,11 +7461,11 @@ N/A ## 0.20.1 -###### _May 13, 2018_ +_May 13, 2018_ A big thanks to the 14 contributors who made this release possible. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tabs] Add support for inline style override for parent container of InkBar (#9598) @PharaohMaster - Popover does not listen to events unless it is open at the moment (#9482) @romanzenka @@ -7468,7 +7476,7 @@ A big thanks to the 14 contributors who made this release possible. - [TextField] Fix caret position issue (#10214) @MaratFaskhiev - Add sideEffects: false for webpack 4 (#11167) @matthoffner -#### Docs +### Docs - [docs] Adding smpl to showcase (#9386) @Bonitis - [docs] Remove HEAD in versions list (#9391) @HZooly @@ -7478,7 +7486,7 @@ A big thanks to the 14 contributors who made this release possible. ## 1.0.0-rc.0 -###### _May 13, 2018_ +_May 13, 2018_ A big thanks to the 11 contributors who made this release possible. @@ -7552,7 +7560,7 @@ The text underline color customization change: }, ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [CircularProgress] Add transition for static variant (#11313) @oliviertassinari - [createTypography] Add primary text color to 'button' typography variant (#11322) @ValentineStone @@ -7560,7 +7568,7 @@ The text underline color customization change: - [Grid] Add 32px gutter to grid spacing (#11338) @abnersajr - [Button] Add outlined variant (#11346) @leMaik -#### Docs +### Docs - [docs] v0 redirect (#11303) @mbrookes - [docs] Add a new premium-theme (#11300) @oliviertassinari @@ -7572,7 +7580,7 @@ The text underline color customization change: - [docs] Move v1-beta to master (#11354) @oliviertassinari - [docs] Install with yarn (#11357) @Xakher -#### Core +### Core - [typescript] Add CreateMuiTheme props TypeScript definition (#11296) @abnersajr - [typescript] Fix color type in augmentColor function (#11302) @AiusDa @@ -7581,7 +7589,7 @@ The text underline color customization change: ## 1.0.0-beta.47 -###### _May 9, 2018_ +_May 9, 2018_ A big thanks to the 4 contributors who made this release possible. @@ -7595,22 +7603,22 @@ Here are some highlights ✨: If you are using TypeScript, 2.8 or later is required. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [withStyles] Support createRef() (#11293) @rolandjitsu - [InputLabel] Remove the width style property (#11297) @C-Rodg -#### Docs +### Docs N/A -#### Core +### Core - [core] Add @babel/runtime as a dependency (#11298) @oliviertassinari ## 1.0.0-beta.46 -###### _May 8, 2018_ +_May 8, 2018_ A big thanks to the 7 contributors who made this release possible. @@ -7622,19 +7630,19 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Table] Add table-footer-group CSS (#11264) @t49tran - [ButtonBase] Add a focusVisible action (#9712) @tkvw - [ButtonBase] Better performance (#11277) @oliviertassinari - [Tabs] Add a TabIndicatorProps property (#11254) @adeelibr -#### Docs +### Docs - [docs] Improve the table examples' accessibility (#11256) @mbrookes - [docs] Add Pilcro to showcase apps (#11274) @hugowoodhead -#### Core +### Core - [typescript] Fix type definitions for Snackbar and CircularProgress (#11265) @franklixuefei - [core] Upgrade Babel 6 to Babel 7 (#10964) @oliviertassinari @@ -7642,7 +7650,7 @@ N/A ## 1.0.0-beta.45 -###### _May 6, 2018_ +_May 6, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -7739,7 +7747,7 @@ The rename started with #11090. I should have taken the time to complete it in t + onFocusVisible={this.handleVisible} ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ButtonBase] Update TypeScript to sync with the implementation (#11189) @franklixuefei - [styles] Simpler outline reset (#11199) @oliviertassinari @@ -7756,7 +7764,7 @@ The rename started with #11090. I should have taken the time to complete it in t - [codemod] Support the private and direct imports (#11253) @oliviertassinari - [Table] Fix TypeScript classes support (#11255) @t49tran -#### Docs +### Docs - [docs] Fix typo in comparison.md (#11185) @morleytatro - [docs] Fix dark theme display (#11194) @oliviertassinari @@ -7769,14 +7777,14 @@ The rename started with #11090. I should have taken the time to complete it in t - [docs] Document the theme.props feature (#11245) @oliviertassinari - [docs] Speedup a bit the homepage (#11248) @oliviertassinari -#### Core +### Core - [test] Fix the CI (#11187) @oliviertassinari - [core] Update dependencies (#11240) @oliviertassinari ## 1.0.0-beta.44 -###### _Apr 29, 2018_ +_Apr 29, 2018_ A big thanks to the 17 contributors who made this release possible. @@ -7786,7 +7794,7 @@ A big thanks to the 17 contributors who made this release possible. As long as you are providing a valid URL to ``, it should be working. However, previously `"` escaped URL will no longer work. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [SwipeableDrawer] Prevent interaction with the drawer content if not opened (#11091) @leMaik - [Icon] Prevent shrinking when inside a flex container (#11097) @ValentinH @@ -7800,7 +7808,7 @@ As long as you are providing a valid URL to ``, it should be - [Tabs] Better Ant Design demo (#11095) @theiliad - [Popover] Improve the demos (#11175) @oliviertassinari -#### Docs +### Docs - [docs] Add npm-registry-browser into showcase (#11114) @topheman - [docs] Fix the flow example (#11118) @prastut @@ -7811,7 +7819,7 @@ As long as you are providing a valid URL to ``, it should be - [docs] Make sure next@6 is working (#11168) @oliviertassinari - [docs] Correct spelling error in FormDialog.js example (#11176) @weldon0405 -#### Core +### Core - [core] Reduce the size of the npm package (#11144) @oliviertassinari - [typescript] allow pseudos on any theme mixins (#11145) @rosskevin @@ -7820,7 +7828,7 @@ As long as you are providing a valid URL to ``, it should be ## 1.0.0-beta.43 -###### _Apr 22, 2018_ +_Apr 22, 2018_ A big thanks to the 8 contributors who made this release possible. @@ -7846,7 +7854,7 @@ Here are some highlights ✨: /> ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [typescript] Constrain props type param appropriately in withStyles, withTheme, withWidth HOCs (#11003) @estaub - [typescript] make Select's onChange prop optional (#11041) @nmchaves @@ -7859,19 +7867,19 @@ Here are some highlights ✨: - [ExpansionPanel] Fix display on IE11 and Edge (#11087) @oliviertassinari - [CardActions] Fix CSS override (#11092) @oliviertassinari -#### Docs +### Docs - [docs] Fix broken link (#11042) @imrobinized - [CONTRIBUTING] Update the docs (#11078) @oliviertassinari -#### Core +### Core - [core] Better distinction between the private and public components (#11051) @oliviertassinari - [core] Upgrade dev dependencies (#11096) @oliviertassinari ## 1.0.0-beta.42 -###### _Apr 16, 2018_ +_Apr 16, 2018_ A big thanks to the 15 contributors who made this release possible. @@ -7921,7 +7929,7 @@ const styles = { /> ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [lab] No side effect (7c379fa7ba4ed2a3eb8abc841a9a4376014b6145) @oliviertassinari - [Card] Hide overflow to maintain round corners with CardMedia (#10946) @mbrookes @@ -7942,13 +7950,13 @@ const styles = { - [SwipeableDrawer] Simplify isSwiping logic (#11032) @leMaik - [SwipeableDrawer] Add a blocking div to the edge of the screen (#11031) @leMaik -#### Docs +### Docs - [docs] Fix typo (#10990) @jleeohsu - [docs] Better private/public API description (#11024) @oliviertassinari - [Collapse] Fix typo in comment (#11035) @mknet -#### Core +### Core - [core] Add fallback to ownerWindow (#10978) @richardscarrott - [typescript] Remove unnecessary Partial<> for `style` prop (#10994) @franklixuefei @@ -7959,7 +7967,7 @@ const styles = { ## 1.0.0-beta.41 -###### _Apr 7, 2018_ +_Apr 7, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -7978,7 +7986,7 @@ Here are some highlights ✨: +import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL'; ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [icons] Reduce code duplication (#10902) @cherniavskii - [icons] Check if `global` is defined before trying to use it (#10933) @joliss @@ -7993,7 +8001,7 @@ Here are some highlights ✨: - [styles] Add a warning to prevent a memory leak (#10953) @oliviertassinari - [Select] Fix width update (#10956) @oliviertassinari -#### Docs +### Docs - [docs] Add hideHeader option to Demo component (#10887) @mbrookes - [docs] Document the /es folder (#10888) @oliviertassinari @@ -8008,13 +8016,13 @@ Here are some highlights ✨: - [docs] Fix npm urls (#10949) @sujeetkrjaiswal - [docs] Add "Do I have to use JSS?" to FAQ (#10954) @mbrookes -#### Core +### Core - [typescript] Upgrade React and JSS typings, which both make use of csstype now (#10903) @pelotom ## 1.0.0-beta.40 -###### _Apr 1, 2018_ +_Apr 1, 2018_ A big thanks to the 4 contributors who made this release possible. @@ -8033,21 +8041,21 @@ React is allowing us to return an array of elements in the render method. We have removed the useless root `div` element. Nothing has changed for people using React 15.x. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [FormControlLabel] Enable disabled label CSS modifications (#10841) @vkentta - [Select] Throw when the non native select is not controlled (#10860) @oliviertassinari - [Drawer] Back to 100% test coverage (#10861) @oliviertassinari - [core] Work on React 16.3.0 support (#10867) @oliviertassinari -#### Docs +### Docs - [docs] typo: reponse => response (#10850) @luminaxster - [docs] Remove dead code (#10855) @oliviertassinari - [docs] Much better navigation experience (#10859) @oliviertassinari - [examples] Demonstrate how to use the icons CDN (#10874) @oliviertassinari -#### Core +### Core - [core] Remove the addEventListener module (#10856) @oliviertassinari - [core] Upgrade the dependencies (#10853) @oliviertassinari @@ -8055,7 +8063,7 @@ Nothing has changed for people using React 15.x. ## 1.0.0-beta.39 -###### _Mar 28, 2018_ +_Mar 28, 2018_ A big thanks to the 25 contributors who made this release possible. @@ -8103,7 +8111,7 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Switch] Add missing TypeScript class keys (#10691) @wenduzer - [ClickAwayListener] Add mouseEvent and touchEvent property (#10694) @tgrowden @@ -8127,7 +8135,7 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 - [Select] Add support for autoFocus (#10792) @nicoffee - [Icon] Fix typing by taking out fontSize property (#10821) @franklixuefei -#### Docs +### Docs - [docs] Add new npm package: @material-ui/docs (#10699) @oliviertassinari - [docs] Use buttonRef instead of ref in anchor playground example (#10708) @pelotom @@ -8146,14 +8154,14 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 - [examples] Update Flow Example (#10799) @prastut - [docs] Material Dashboard Pro React (#10832) @oliviertassinari -#### Core +### Core - [core] Upgrade the dev dependencies (#10702) @oliviertassinari - [typings] Fix `mixins.gutter` signature (argument is optional) (#10814) @sebald ## 1.0.0-beta.38 -###### _Mar 17, 2018_ +_Mar 17, 2018_ A big thanks to the 19 contributors who made this release possible. @@ -8168,7 +8176,7 @@ This release comes with important theme upgrades. Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix chip alignment (#10611) @adamszeptycki - [Tabs] Add 'scrollButtons' and 'indicator' to TabsClassKey TypeScript definition (#10618) @cvanem @@ -8188,7 +8196,7 @@ N/A - [theme] Allow changing the font-size (#10687) @oliviertassinari - [Stepper] Soft ripple background (#10690) @oliviertassinari -#### Docs +### Docs - [docs] Add project to showcase (#10614) @jdupont - [docs] Fix typo (#10621) @prastut @@ -8209,14 +8217,14 @@ N/A - [docs] Handle optional params (#10685) @oliviertassinari - [docs] Customized tables (#10686) @oliviertassinari -#### Core +### Core - [typescript] Remove xxxClassName props from type declarations (#10644) @lukePeavey - [typescript] Add inline style prop to transition (#10650) @nmchaves ## 1.0.0-beta.37 -###### _Mar 11, 2018_ +_Mar 11, 2018_ A big thanks to the 13 contributors who made this release possible. @@ -8254,7 +8262,7 @@ For instance, it's not about adding JavaScript polyfills. + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix wrong onBlur onFocus logic (#10538) @oliviertassinari - [ExpansionPanel] Fix controlled behavior (#10546) @oliviertassinari @@ -8271,7 +8279,7 @@ For instance, it's not about adding JavaScript polyfills. - [StepIcon] enable CSS modifications of active step (#10599) @vkentta - [Tooltip] Add enterTouchDelay and leaveTouchDelay props (#10577) @petegivens -#### Docs +### Docs - [docs] Simplify the CDN example (6e4cc723689961582ede16db421cbdf24ac7c4b9) @oliviertassinari - [docs] Add showcase to readme - componofy (#10541) @DalerAsrorov @@ -8285,14 +8293,14 @@ For instance, it's not about adding JavaScript polyfills. - [docs] Add Planalyze to Showcase (#10603) @dancastellon - [docs] Improve the htmlFontSize documentation (#10604) @oliviertassinari -#### Core +### Core - [core] Fix type definitions (#10553) @stefanorie - [core] Better overrides merge support (#10606) @oliviertassinari ## 1.0.0-beta.36 -###### _Mar 5, 2018_ +_Mar 5, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -8322,7 +8330,7 @@ Now, you can use the `font-size` style property to changr the size of the icon. This is an effort in order to harmonize the classes API. The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Table] Default display style for all table components (#10447) @caub - [Collapse] Fix description (#10454) @onurkose @@ -8340,7 +8348,7 @@ The best way to recover from this breaking change is to check the warnings in th - [Button] Add override support for sizeLarge and sizeSmall (#10526) @wenduzer - [Modal] Use prototype functions in ModalManager (#10528) @ianschmitz -#### Docs +### Docs - [docs] Fix Roadmap docs formatting (#10501) @cherniavskii - [docs] EnhancedTable Demo (#10491) @kgregory @@ -8350,7 +8358,7 @@ The best way to recover from this breaking change is to check the warnings in th - [docs] Add a CDN example (#10514) @oliviertassinari - [docs] Fix SSR rendering in Gatsby example (#10536) @LegNeato -#### Core +### Core - [core] Prepare the async API (#10523) @oliviertassinari - [core] Upgrade the dev dependencies (#10456) @oliviertassinari @@ -8358,7 +8366,7 @@ The best way to recover from this breaking change is to check the warnings in th ## 1.0.0-beta.35 -###### _Feb 24, 2018_ +_Feb 24, 2018_ A big thanks to the 20 contributors who made this release possible. @@ -8372,7 +8380,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Stepper] Add style override types (#10334) @vkentta - [Input] Reset the line-height (#10346) @oliviertassinari @@ -8394,7 +8402,7 @@ N/A - [SwitchBase] Fix defaultChecked issue (#10444) @tanmayrajani - [SwitchBase] Prevent defaultChecked regression (#10445) @oliviertassinari -#### Docs +### Docs - [Transitions] Document transition style prop handling (#10322) @AdamGorkoz - [Drawer] Add clipped navigation drawer demo (#10330) @AdamGorkoz @@ -8415,7 +8423,7 @@ N/A - [docs] Description of how component will render (#10432) @oliviertassinari - [docs] Add CSSGrid comparison example (#10433) @caub -#### Core +### Core - [core] Upgrade some dependency to start looking into React 16.3 (#10338) @oliviertassinari - [core] Remove direct references to window/document objects (#10328) @ianschmitz @@ -8423,7 +8431,7 @@ N/A ## 1.0.0-beta.34 -###### _Feb 17, 2018_ +_Feb 17, 2018_ A big thanks to the 21 contributors who made this release possible. @@ -8467,7 +8475,7 @@ The Material Design specification says that selection controls elements should [ + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Fix infinite loop (#10229) @oliviertassinari - [CircularProgress] Add static variant (#10228) @oliviertassinari @@ -8483,7 +8491,7 @@ The Material Design specification says that selection controls elements should [ - [Icon] Add fontSize to typings (#10317) @clentfort - [Slide] Work with SVG too (#10325) @oliviertassinari -#### Docs +### Docs - [docs] Update links on showcase.md (#10227) @klyburke - [docs] Remove dead code in Drawers (#10230) @oliviertassinari @@ -8509,7 +8517,7 @@ The Material Design specification says that selection controls elements should [ - [docs] Expose the theme as a global object (#10326) @oliviertassinari - [docs] Add an example with Google Web Fonts (#10332) @oliviertassinari -#### Core +### Core - [core] Fix the es distribution (#10254) @NMinhNguyen - [typescript] Add missing exports in index.d.ts (#10295) @Andy4ward @@ -8517,7 +8525,7 @@ The Material Design specification says that selection controls elements should [ ## 1.0.0-beta.33 -###### _Feb 10, 2018_ +_Feb 10, 2018_ A big thanks to the 16 contributors who made this release possible. @@ -8532,7 +8540,7 @@ Here are some highlights ✨: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [typescript] Use Partial props in TypeScript definitions (#10170) @ianschmitz - [GridList] Allow null children in GridListTile (#10179) @caub @@ -8551,7 +8559,7 @@ N/A - [StepLabel] Give more flexibility to the style of span surrounding label (#10218) @seanchambo - [ButtonBase] Save one line of code (#10225) @oliviertassinari -#### Docs +### Docs - [examples] Rename type to variant (#10167) @oliviertassinari - [docs] Using "component" prop to customize rendering (#10128) @sebald @@ -8563,14 +8571,14 @@ N/A - [docs] Change negative to positive (#10211) @harvitronix - [docs] Add project to showcase (#10217) @klyburke -#### Core +### Core - [core] Upgrade Next.js (#10181) @oliviertassinari - [test] Remove the mockPortal workaround (#10208) @leMaik ## 1.0.0-beta.32 -###### _Feb 4, 2018_ +_Feb 4, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -8638,7 +8646,7 @@ Umbrella pull request for: #10084, #10086, #10088. + }} ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [AppBar] Remove one dead CSS property (#10096) @oliviertassinari - [AppBar] Add support for `position="sticky"` (#10090) @scottastrophic @@ -8656,7 +8664,7 @@ Umbrella pull request for: #10084, #10086, #10088. - [InputAdornment] Remove hack (#10157) @oliviertassinari - [Hidden] css implementation handle custom className (#10165) @Vincz -#### Docs +### Docs - [docs] Minor CSP edit (#10089) @oliviertassinari - [docs] Avoid anchor id conflict in Progress (#10095) @oliviertassinari @@ -8675,14 +8683,14 @@ Umbrella pull request for: #10084, #10086, #10088. - [docs] Add mui-downshift (#10156) @oliviertassinari - [docs] Demo codesandbox deps (#10158) @caub -#### Core +### Core - [core] Add the license in the release (#10102) @oliviertassinari - [test] Fix AppBar test assert messages (#10109) @cherniavskii ## 1.0.0-beta.31 -###### _Jan 21, 2018_ +_Jan 21, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -8797,7 +8805,7 @@ const theme = createMuiTheme({ }); ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Make sure our previous or updated context is available (#9986) @yoiang - [Dialog] Add PaperProps property (#9985) @nbdaaron @@ -8819,7 +8827,7 @@ const theme = createMuiTheme({ - [LinearProgress] Add ARIA role & fix bugs (#10069) @mbrookes - [ButtonBase] Add buttonRef property (#10082) @oliviertassinari -#### Docs +### Docs - [docs] Edit css injection order docs for create-react-app users (#9990) @PTaylour - [docs] withStyles alternative APIs (#9981) @oliviertassinari @@ -8834,7 +8842,7 @@ const theme = createMuiTheme({ - [docs] Add Content Security Policy Guide (#10074) @dav-is - [docs] Add react-select example (#10070) @oliviertassinari -#### Core +### Core - [core] Two small fixes looking at #10005 (#10014) @oliviertassinari - [core] Use the official react-docgen package (#10054) @oliviertassinari @@ -8842,7 +8850,7 @@ const theme = createMuiTheme({ ## 1.0.0-beta.30 -###### _Jan 21, 2018_ +_Jan 21, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -8858,17 +8866,23 @@ Here are some highlights ✨: ### Breaking change - [palette] Keep simplifying the solution (#9876) @oliviertassinari + - Remove the contrast color from our API. This color variation hasn't proven itseft to be useful enough. + ```diff - @@ -653,13 +684,16 @@ function AboutContent() { structured feedback, you're always invited to participate to share your thoughts. - } > Leave your feedback{' '} - - + @@ -705,9 +739,16 @@ function AboutContent() { StackOverflow. - - See the repository - + @@ -724,10 +765,16 @@ function AboutContent() { All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page. - + diff --git a/docs/pages/api-docs/autocomplete.json b/docs/pages/api-docs/autocomplete.json index c065dfd831ba2b..3960eaaf170b9a 100644 --- a/docs/pages/api-docs/autocomplete.json +++ b/docs/pages/api-docs/autocomplete.json @@ -19,7 +19,10 @@ "clearOnEscape": { "type": { "name": "bool" } }, "clearText": { "type": { "name": "string" }, "default": "'Clear'" }, "closeText": { "type": { "name": "string" }, "default": "'Close'" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ clearIndicator?: object, paper?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "custom", "description": "any" }, "default": "props.multiple ? [] : null" @@ -68,6 +71,7 @@ "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" }, "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" }, "popupIcon": { "type": { "name": "node" }, "default": "" }, + "readOnly": { "type": { "name": "bool" } }, "renderGroup": { "type": { "name": "func" } }, "renderOption": { "type": { "name": "func" } }, "renderTags": { "type": { "name": "func" } }, diff --git a/docs/pages/api-docs/avatar-group.json b/docs/pages/api-docs/avatar-group.json index 12459dbb69704f..893d58d5c115f6 100644 --- a/docs/pages/api-docs/avatar-group.json +++ b/docs/pages/api-docs/avatar-group.json @@ -2,6 +2,10 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, + "componentsProps": { + "type": { "name": "shape", "description": "{ additionalAvatar?: object }" }, + "default": "{}" + }, "max": { "type": { "name": "custom", "description": "number" }, "default": "5" }, "spacing": { "type": { diff --git a/docs/pages/api-docs/backdrop-unstyled.json b/docs/pages/api-docs/backdrop-unstyled.json index 774ffb8e5fe7b0..d817a8ff919cbe 100644 --- a/docs/pages/api-docs/backdrop-unstyled.json +++ b/docs/pages/api-docs/backdrop-unstyled.json @@ -7,7 +7,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } } }, "name": "BackdropUnstyled", diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json index f35f287b551c61..0fbf0b8775ef1f 100644 --- a/docs/pages/api-docs/backdrop.json +++ b/docs/pages/api-docs/backdrop.json @@ -8,7 +8,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "sx": { "type": { diff --git a/docs/pages/api-docs/badge-unstyled.json b/docs/pages/api-docs/badge-unstyled.json index 177acded5ad169..c28594616def3b 100644 --- a/docs/pages/api-docs/badge-unstyled.json +++ b/docs/pages/api-docs/badge-unstyled.json @@ -15,7 +15,10 @@ "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ badge?: object, root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "max": { "type": { "name": "number" }, "default": "99" }, "showZero": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json index 6afe7c28592ab1..36feff75ac0e82 100644 --- a/docs/pages/api-docs/badge.json +++ b/docs/pages/api-docs/badge.json @@ -22,7 +22,10 @@ "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ badge?: object, root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "max": { "type": { "name": "number" }, "default": "99" }, "overlap": { diff --git a/docs/pages/api-docs/clock-picker.json b/docs/pages/api-docs/clock-picker.json index 39a10f74a9b41a..d61e28ce2e2bad 100644 --- a/docs/pages/api-docs/clock-picker.json +++ b/docs/pages/api-docs/clock-picker.json @@ -12,7 +12,12 @@ "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType }" } }, - "componentsProps": { "type": { "name": "object" } }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object }" + } + }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, "getClockLabelText": { "type": { "name": "func" }, diff --git a/docs/pages/api-docs/date-picker.json b/docs/pages/api-docs/date-picker.json index ddd205dc375d30..3e47b946e988f4 100644 --- a/docs/pages/api-docs/date-picker.json +++ b/docs/pages/api-docs/date-picker.json @@ -18,7 +18,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, diff --git a/docs/pages/api-docs/date-range-picker.json b/docs/pages/api-docs/date-range-picker.json index 3a12d83eaa45b1..b6d79ab0718614 100644 --- a/docs/pages/api-docs/date-range-picker.json +++ b/docs/pages/api-docs/date-range-picker.json @@ -29,7 +29,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, diff --git a/docs/pages/api-docs/date-time-picker.json b/docs/pages/api-docs/date-time-picker.json index 55e5fd9f704216..a1c64ecbb46a24 100644 --- a/docs/pages/api-docs/date-time-picker.json +++ b/docs/pages/api-docs/date-time-picker.json @@ -20,7 +20,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { diff --git a/docs/pages/api-docs/desktop-date-picker.json b/docs/pages/api-docs/desktop-date-picker.json index 9a2d7e34f147e6..ed3c0712eabff1 100644 --- a/docs/pages/api-docs/desktop-date-picker.json +++ b/docs/pages/api-docs/desktop-date-picker.json @@ -15,7 +15,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { "type": { "name": "bool" }, diff --git a/docs/pages/api-docs/desktop-date-range-picker.json b/docs/pages/api-docs/desktop-date-range-picker.json index 929ea76746b690..2bf4719ca0a5eb 100644 --- a/docs/pages/api-docs/desktop-date-range-picker.json +++ b/docs/pages/api-docs/desktop-date-range-picker.json @@ -26,7 +26,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/desktop-date-time-picker.json b/docs/pages/api-docs/desktop-date-time-picker.json index d8d3adb3e7e924..96ccbac3f44297 100644 --- a/docs/pages/api-docs/desktop-date-time-picker.json +++ b/docs/pages/api-docs/desktop-date-time-picker.json @@ -17,7 +17,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json index 257fde67fc6c80..271d36adb0827a 100644 --- a/docs/pages/api-docs/fab.json +++ b/docs/pages/api-docs/fab.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "union", - "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| string" + "name": "enum", + "description": "'default'
| 'error'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'warning'" }, "default": "'default'" }, diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json index 49637ada53fa20..f2d2c91d6ab12c 100644 --- a/docs/pages/api-docs/filled-input.json +++ b/docs/pages/api-docs/filled-input.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json index 5775eb28c6b0af..fb29eeb6612f8a 100644 --- a/docs/pages/api-docs/form-control-label.json +++ b/docs/pages/api-docs/form-control-label.json @@ -10,7 +10,10 @@ }, "checked": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ typography?: object }" }, + "default": "{}" + }, "disabled": { "type": { "name": "bool" } }, "disableTypography": { "type": { "name": "bool" } }, "inputRef": { "type": { "name": "custom", "description": "ref" } }, @@ -38,9 +41,10 @@ "labelPlacementTop", "labelPlacementBottom", "disabled", - "label" + "label", + "error" ], - "globalClasses": { "disabled": "Mui-disabled" }, + "globalClasses": { "disabled": "Mui-disabled", "error": "Mui-error" }, "name": "MuiFormControlLabel" }, "spread": true, diff --git a/docs/pages/api-docs/form-group.json b/docs/pages/api-docs/form-group.json index 779b7b17f8e36a..14e9dc32fee766 100644 --- a/docs/pages/api-docs/form-group.json +++ b/docs/pages/api-docs/form-group.json @@ -11,7 +11,11 @@ } }, "name": "FormGroup", - "styles": { "classes": ["root", "row"], "globalClasses": {}, "name": "MuiFormGroup" }, + "styles": { + "classes": ["root", "row", "error"], + "globalClasses": { "error": "Mui-error" }, + "name": "MuiFormGroup" + }, "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/FormGroup/FormGroup.js", diff --git a/docs/pages/api-docs/image-list.json b/docs/pages/api-docs/image-list.json index 665a8a6afc2685..a8ee1ba4bc3d69 100644 --- a/docs/pages/api-docs/image-list.json +++ b/docs/pages/api-docs/image-list.json @@ -17,8 +17,8 @@ }, "variant": { "type": { - "name": "enum", - "description": "'masonry'
| 'quilted'
| 'standard'
| 'woven'" + "name": "union", + "description": "'masonry'
| 'quilted'
| 'standard'
| 'woven'
| string" }, "default": "'standard'" } diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index ba17b9351b3002..74242c7132e19d 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableInjectingGlobalStyles": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/input-unstyled.json b/docs/pages/api-docs/input-unstyled.json index 9f2a1d0987852a..ca00e18ddad644 100644 --- a/docs/pages/api-docs/input-unstyled.json +++ b/docs/pages/api-docs/input-unstyled.json @@ -11,7 +11,10 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "endAdornment": { "type": { "name": "node" } }, diff --git a/docs/pages/api-docs/input.json b/docs/pages/api-docs/input.json index f4347c9a3dfefb..7e50c63c54b043 100644 --- a/docs/pages/api-docs/input.json +++ b/docs/pages/api-docs/input.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/list-item.json b/docs/pages/api-docs/list-item.json index e85e276cf0e4a9..5e5b5a6a430898 100644 --- a/docs/pages/api-docs/list-item.json +++ b/docs/pages/api-docs/list-item.json @@ -21,7 +21,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "ContainerComponent": { "type": { "name": "custom", "description": "element type" }, "default": "'li'", diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index 9c3703166ca093..6a581a2b3af3aa 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -23,8 +23,8 @@ }, "variant": { "type": { - "name": "enum", - "description": "'contained'
| 'outlined'
| 'text'" + "name": "union", + "description": "'contained'
| 'outlined'
| 'text'
| string" }, "default": "'text'" } diff --git a/docs/pages/api-docs/mobile-date-picker.json b/docs/pages/api-docs/mobile-date-picker.json index d08cfbbd06fd81..10eb8fa8ad5bc2 100644 --- a/docs/pages/api-docs/mobile-date-picker.json +++ b/docs/pages/api-docs/mobile-date-picker.json @@ -18,7 +18,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/mobile-date-range-picker.json b/docs/pages/api-docs/mobile-date-range-picker.json index 97c2fcfeee51fb..9de3b692b54279 100644 --- a/docs/pages/api-docs/mobile-date-range-picker.json +++ b/docs/pages/api-docs/mobile-date-range-picker.json @@ -29,7 +29,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/mobile-date-time-picker.json b/docs/pages/api-docs/mobile-date-time-picker.json index 3feda225d8bd28..2a9bff51c2ef88 100644 --- a/docs/pages/api-docs/mobile-date-time-picker.json +++ b/docs/pages/api-docs/mobile-date-time-picker.json @@ -20,7 +20,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, diff --git a/docs/pages/api-docs/modal-unstyled.json b/docs/pages/api-docs/modal-unstyled.json index f740527a4bed4c..a748a54f7a8019 100644 --- a/docs/pages/api-docs/modal-unstyled.json +++ b/docs/pages/api-docs/modal-unstyled.json @@ -11,7 +11,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, "disableAutoFocus": { "type": { "name": "bool" } }, "disableEnforceFocus": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/modal.json b/docs/pages/api-docs/modal.json index bb8fa11eb2d1ae..44ef4e08fea4cf 100644 --- a/docs/pages/api-docs/modal.json +++ b/docs/pages/api-docs/modal.json @@ -14,7 +14,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, "disableAutoFocus": { "type": { "name": "bool" } }, "disableEnforceFocus": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/multi-select-unstyled.js b/docs/pages/api-docs/multi-select-unstyled.js new file mode 100644 index 00000000000000..aa99fc89b28b45 --- /dev/null +++ b/docs/pages/api-docs/multi-select-unstyled.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './multi-select-unstyled.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/multi-select-unstyled', + false, + /multi-select-unstyled.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/multi-select-unstyled.json b/docs/pages/api-docs/multi-select-unstyled.json new file mode 100644 index 00000000000000..1ec22f2c8b5c0c --- /dev/null +++ b/docs/pages/api-docs/multi-select-unstyled.json @@ -0,0 +1,35 @@ +{ + "props": { + "autoFocus": { "type": { "name": "bool" } }, + "components": { + "type": { + "name": "shape", + "description": "{ Listbox?: elementType, Popper?: elementType, Root?: elementType }" + }, + "default": "{}" + }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ listbox?: object, popper?: object, root?: object }" + }, + "default": "{}" + }, + "defaultListboxOpen": { "type": { "name": "bool" } }, + "defaultValue": { "type": { "name": "array" }, "default": "[]" }, + "disabled": { "type": { "name": "bool" } }, + "listboxOpen": { "type": { "name": "bool" }, "default": "undefined" }, + "onChange": { "type": { "name": "func" } }, + "onListboxOpenChange": { "type": { "name": "func" } }, + "renderValue": { "type": { "name": "func" } }, + "value": { "type": { "name": "array" } } + }, + "name": "MultiSelectUnstyled", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "forwardsRefTo": "HTMLButtonElement", + "filename": "/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/api-docs/option-group-unstyled.js b/docs/pages/api-docs/option-group-unstyled.js new file mode 100644 index 00000000000000..f213d581bd8812 --- /dev/null +++ b/docs/pages/api-docs/option-group-unstyled.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './option-group-unstyled.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/option-group-unstyled', + false, + /option-group-unstyled.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/option-group-unstyled.json b/docs/pages/api-docs/option-group-unstyled.json new file mode 100644 index 00000000000000..2bcd632ed94607 --- /dev/null +++ b/docs/pages/api-docs/option-group-unstyled.json @@ -0,0 +1,29 @@ +{ + "props": { + "component": { "type": { "name": "elementType" } }, + "components": { + "type": { + "name": "shape", + "description": "{ Label?: elementType, List?: elementType, Root?: elementType }" + }, + "default": "{}" + }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ label?: object, list?: object, root?: object }" + }, + "default": "{}" + }, + "disabled": { "type": { "name": "bool" } }, + "label": { "type": { "name": "node" } } + }, + "name": "OptionGroupUnstyled", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "forwardsRefTo": "HTMLLIElement", + "filename": "/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/api-docs/option-unstyled.js b/docs/pages/api-docs/option-unstyled.js new file mode 100644 index 00000000000000..7c14dbcda7ef36 --- /dev/null +++ b/docs/pages/api-docs/option-unstyled.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './option-unstyled.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/option-unstyled', + false, + /option-unstyled.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/option-unstyled.json b/docs/pages/api-docs/option-unstyled.json new file mode 100644 index 00000000000000..3acf875c8d1f9b --- /dev/null +++ b/docs/pages/api-docs/option-unstyled.json @@ -0,0 +1,23 @@ +{ + "props": { + "value": { "type": { "name": "any" }, "required": true }, + "component": { "type": { "name": "elementType" } }, + "components": { + "type": { "name": "shape", "description": "{ Root?: elementType }" }, + "default": "{}" + }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, + "disabled": { "type": { "name": "bool" } } + }, + "name": "OptionUnstyled", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "forwardsRefTo": "HTMLLIElement", + "filename": "/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/api-docs/select-unstyled.js b/docs/pages/api-docs/select-unstyled.js new file mode 100644 index 00000000000000..71d1dc6fdb413e --- /dev/null +++ b/docs/pages/api-docs/select-unstyled.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './select-unstyled.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/select-unstyled', + false, + /select-unstyled.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/select-unstyled.json b/docs/pages/api-docs/select-unstyled.json new file mode 100644 index 00000000000000..2f12c6b6738225 --- /dev/null +++ b/docs/pages/api-docs/select-unstyled.json @@ -0,0 +1,35 @@ +{ + "props": { + "autoFocus": { "type": { "name": "bool" } }, + "components": { + "type": { + "name": "shape", + "description": "{ Listbox?: elementType, Popper?: elementType, Root?: elementType }" + }, + "default": "{}" + }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ listbox?: object, popper?: object, root?: object }" + }, + "default": "{}" + }, + "defaultListboxOpen": { "type": { "name": "bool" } }, + "defaultValue": { "type": { "name": "any" } }, + "disabled": { "type": { "name": "bool" } }, + "listboxOpen": { "type": { "name": "bool" }, "default": "undefined" }, + "onChange": { "type": { "name": "func" } }, + "onListboxOpenChange": { "type": { "name": "func" } }, + "renderValue": { "type": { "name": "func" } }, + "value": { "type": { "name": "any" } } + }, + "name": "SelectUnstyled", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "forwardsRefTo": "HTMLButtonElement", + "filename": "/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/api-docs/select.json b/docs/pages/api-docs/select.json index a85a529c8ec73c..4e8a23e4f5bd2c 100644 --- a/docs/pages/api-docs/select.json +++ b/docs/pages/api-docs/select.json @@ -3,6 +3,7 @@ "autoWidth": { "type": { "name": "bool" } }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "default": "{}" }, + "defaultOpen": { "type": { "name": "bool" } }, "defaultValue": { "type": { "name": "any" } }, "displayEmpty": { "type": { "name": "bool" } }, "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" }, diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json index 3217278493a244..aefda45f07d4c3 100644 --- a/docs/pages/api-docs/slider-unstyled.json +++ b/docs/pages/api-docs/slider-unstyled.json @@ -8,11 +8,17 @@ "components": { "type": { "name": "shape", - "description": "{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" + "description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" + }, + "default": "{}" + }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ input?: object, mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { className?: string, components?: { Root?: elementType }, style?: object, value?: Array<number>
| number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } }, diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json index e97dc95a96d625..56696c13db2951 100644 --- a/docs/pages/api-docs/slider.json +++ b/docs/pages/api-docs/slider.json @@ -11,15 +11,20 @@ }, "default": "'primary'" }, - "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", - "description": "{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" + "description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" + }, + "default": "{}" + }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ input?: object, mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { className?: string, components?: { Root?: elementType }, style?: object, value?: Array<number>
| number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } }, @@ -46,7 +51,10 @@ }, "scale": { "type": { "name": "func" }, "default": "(x) => x" }, "size": { - "type": { "name": "enum", "description": "'small'
| 'medium'" }, + "type": { + "name": "union", + "description": "'small'
| 'medium'
| string" + }, "default": "'medium'" }, "step": { "type": { "name": "number" }, "default": "1" }, diff --git a/docs/pages/api-docs/static-date-picker.json b/docs/pages/api-docs/static-date-picker.json index 25974e804de405..b9ba92459f449d 100644 --- a/docs/pages/api-docs/static-date-picker.json +++ b/docs/pages/api-docs/static-date-picker.json @@ -15,7 +15,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { "type": { "name": "bool" }, diff --git a/docs/pages/api-docs/static-date-range-picker.json b/docs/pages/api-docs/static-date-range-picker.json index ad632ce7c75f68..a46096dd572a74 100644 --- a/docs/pages/api-docs/static-date-range-picker.json +++ b/docs/pages/api-docs/static-date-range-picker.json @@ -26,7 +26,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/static-date-time-picker.json b/docs/pages/api-docs/static-date-time-picker.json index 4a4f309e793e80..46a9e2bdd5a049 100644 --- a/docs/pages/api-docs/static-date-time-picker.json +++ b/docs/pages/api-docs/static-date-time-picker.json @@ -17,7 +17,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/step-label.json b/docs/pages/api-docs/step-label.json index a0125db1e6fd59..3a7fff19dbbf28 100644 --- a/docs/pages/api-docs/step-label.json +++ b/docs/pages/api-docs/step-label.json @@ -2,7 +2,10 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ label?: object }" }, + "default": "{}" + }, "error": { "type": { "name": "bool" } }, "icon": { "type": { "name": "node" } }, "optional": { "type": { "name": "node" } }, diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json index 59350b332cfdbf..e311fe894b02df 100644 --- a/docs/pages/api-docs/svg-icon.json +++ b/docs/pages/api-docs/svg-icon.json @@ -18,6 +18,7 @@ "default": "'medium'" }, "htmlColor": { "type": { "name": "string" } }, + "inheritViewBox": { "type": { "name": "bool" } }, "shapeRendering": { "type": { "name": "string" } }, "sx": { "type": { diff --git a/docs/pages/api-docs/switch-unstyled.json b/docs/pages/api-docs/switch-unstyled.json index d868d5f5edfeb9..37630f590b50b1 100644 --- a/docs/pages/api-docs/switch-unstyled.json +++ b/docs/pages/api-docs/switch-unstyled.json @@ -10,7 +10,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ input?: object, root?: object, thumb?: object, track?: object }" + }, + "default": "{}" + }, "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "onChange": { "type": { "name": "func" } }, diff --git a/docs/pages/api-docs/tab-panel-unstyled.json b/docs/pages/api-docs/tab-panel-unstyled.json index ba215602180a27..fbe5f7fca34d74 100644 --- a/docs/pages/api-docs/tab-panel-unstyled.json +++ b/docs/pages/api-docs/tab-panel-unstyled.json @@ -10,7 +10,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" } + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + } }, "name": "TabPanelUnstyled", "styles": { "classes": [], "globalClasses": {}, "name": null }, diff --git a/docs/pages/api-docs/tab-unstyled.json b/docs/pages/api-docs/tab-unstyled.json index 625b75e2ee3130..1bf0ba09074227 100644 --- a/docs/pages/api-docs/tab-unstyled.json +++ b/docs/pages/api-docs/tab-unstyled.json @@ -11,7 +11,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "disabled": { "type": { "name": "bool" } }, "onChange": { "type": { "name": "func" } }, "value": { "type": { "name": "union", "description": "number
| string" } } diff --git a/docs/pages/api-docs/table-pagination-unstyled.json b/docs/pages/api-docs/table-pagination-unstyled.json index 20b5064faf6bd1..9e81ea375cbae1 100644 --- a/docs/pages/api-docs/table-pagination-unstyled.json +++ b/docs/pages/api-docs/table-pagination-unstyled.json @@ -12,7 +12,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ actions?: object, displayedRows?: object, menuItem?: object, root?: object, select?: object, selectLabel?: object, spacer?: object, toolbar?: object }" + }, + "default": "{}" + }, "getItemAriaLabel": { "type": { "name": "func" }, "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n return `Go to ${type} page`;\n}" diff --git a/docs/pages/api-docs/tabs-list-unstyled.json b/docs/pages/api-docs/tabs-list-unstyled.json index 2e86bfde7fcf3c..1d479721ea9b60 100644 --- a/docs/pages/api-docs/tabs-list-unstyled.json +++ b/docs/pages/api-docs/tabs-list-unstyled.json @@ -6,7 +6,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" } + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + } }, "name": "TabsListUnstyled", "styles": { "classes": [], "globalClasses": {}, "name": null }, diff --git a/docs/pages/api-docs/tabs-unstyled.json b/docs/pages/api-docs/tabs-unstyled.json index 36417b446bdaa3..e4752dff65d537 100644 --- a/docs/pages/api-docs/tabs-unstyled.json +++ b/docs/pages/api-docs/tabs-unstyled.json @@ -6,7 +6,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "union", diff --git a/docs/pages/api-docs/tooltip.json b/docs/pages/api-docs/tooltip.json index 8856915ae9fd7f..54d6f83ef9cc67 100644 --- a/docs/pages/api-docs/tooltip.json +++ b/docs/pages/api-docs/tooltip.json @@ -11,7 +11,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }" + }, + "default": "{}" + }, "describeChild": { "type": { "name": "bool" } }, "disableFocusListener": { "type": { "name": "bool" } }, "disableHoverListener": { "type": { "name": "bool" } }, diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx new file mode 100644 index 00000000000000..9ad1232734f4b8 --- /dev/null +++ b/docs/pages/blog.tsx @@ -0,0 +1,440 @@ +import * as React from 'react'; +import { InferGetStaticPropsType } from 'next'; +import { useRouter } from 'next/router'; +import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing'; +import { alpha } from '@mui/material/styles'; +import Avatar from '@mui/material/Avatar'; +import AvatarGroup from '@mui/material/AvatarGroup'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import Section from 'docs/src/layouts/Section'; +import Divider from '@mui/material/Divider'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import Pagination from '@mui/material/Pagination'; +import Button from '@mui/material/Button'; +import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'; +import Chip from '@mui/material/Chip'; +import Head from 'docs/src/modules/components/Head'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import GradientText from 'docs/src/components/typography/GradientText'; +import BrandingProvider from 'docs/src/BrandingProvider'; +import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import Link from 'docs/src/modules/components/Link'; + +export const getStaticProps = async () => { + const data = getAllBlogPosts(); + return { + props: data, + }; +}; + +const PostPreview = (props: BlogPost) => { + return ( + + {props.tags && ( + + {props.tags.map((tag) => ( + + theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[700], + background: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], + '&:hover': { + background: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], + }, + }} + /> + ))} + + )} + + + {props.title} + + + + {props.description} + + {props.authors && ( + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[800] + : theme.palette.grey[100], + backgroundColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[100], + color: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[100] + : theme.palette.grey[800], + fontSize: (theme) => theme.typography.pxToRem(13), + fontWeight: 500, + }, + }} + > + {(props.authors as Array).map((author) => ( + + ))} + + )} + + + {props.authors && ( + + {props.authors + .slice(0, 3) + .map((userId) => { + const name = AUTHORS[userId as keyof typeof AUTHORS]?.name; + if (name) { + if (props.authors && props.authors.length > 1) { + // display only firstName + return name.split(' ')[0]; + } + return name; + } + return userId; + }) + .join(', ')} + {props.authors.length > 2 && ', and more.'} + + )} + {props.date && ( + + {new Date(props.date).toDateString()} + + )} + + + + + ); +}; + +export default function Blog(props: InferGetStaticPropsType) { + const PAGE_SIZE = 5; + const router = useRouter(); + const postListRef = React.useRef(null); + const [page, setPage] = React.useState(0); + const [selectedTags, setSelectedTags] = React.useState>({}); + const { allBlogPosts, tagInfo: rawTagInfo } = props; + const [firstPost, secondPost, ...otherPosts] = allBlogPosts; + const tagInfo = { ...rawTagInfo }; + [firstPost, secondPost].forEach((post) => { + if (post.tags) { + post.tags.forEach((tag) => { + if (tagInfo[tag]) { + tagInfo[tag]! -= 1; + } + }); + } + }); + Object.entries(tagInfo).forEach(([tagName, tagCount]) => { + if (!tagCount) { + delete tagInfo[tagName]; + } + }); + const filteredPosts = otherPosts.filter( + (post) => + !Object.keys(selectedTags).length || + (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)), + ); + const pageStart = page * PAGE_SIZE; + const totalPage = Math.ceil(filteredPosts.length / PAGE_SIZE); + const displayedPosts = filteredPosts.slice(pageStart, pageStart + PAGE_SIZE); + const getTags = React.useCallback(() => { + const { tags = '' } = router.query; + return (typeof tags === 'string' ? tags.split(',') : tags || []) + .map((str) => str.trim()) + .filter((tag) => !!tag); + }, [router.query]); + + React.useEffect(() => { + const arrayTags = getTags(); + const finalTags: Record = {}; + arrayTags.forEach((tag) => { + finalTags[tag] = true; + }); + setSelectedTags(finalTags); + setPage(0); + }, [getTags]); + + const removeTag = (tag: string) => { + router.push( + { + query: { + ...router.query, + tags: getTags().filter((value) => value !== tag), + }, + }, + undefined, + { shallow: true }, + ); + }; + return ( + + + +
+
+ + Blog + + + The latest about MUI + + + {[firstPost, secondPost].map((post) => ( + ({ + p: 2, + display: 'flex', + flexDirection: 'column', + position: 'relative', + transition: 'all ease 120ms', + '&:hover, &:focus-within': { + borderColor: theme.palette.mode === 'dark' ? 'primary.600' : 'grey.300', + boxShadow: `0px 4px 20px ${ + theme.palette.mode === 'dark' + ? 'rgba(0, 0, 0, 0.5)' + : 'rgba(170, 180, 190, 0.3)' + }`, + }, + '&:focus-within': { + '& a': { + outline: 'none', + }, + }, + })} + > + {post.image && ( + + )} + + + ))} + +
+ + + Posts{' '} + {Object.keys(selectedTags).length ? ( + + tagged as{' '} + + "{Object.keys(selectedTags)[0]}" + + + ) : ( + '' + )} + + + + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.2) + : 'rgba(255, 255, 255, 0.2)', + borderColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + }} + > + + Filter by tag + + + {Object.keys(tagInfo).map((tag) => { + const selected = !!selectedTags[tag]; + return ( + { + postListRef.current?.scrollIntoView(); + removeTag(tag); + }, + } + : { + label: tag, + onClick: () => { + postListRef.current?.scrollIntoView(); + router.push( + { + query: { + ...router.query, + tags: tag, + }, + }, + undefined, + { shallow: true }, + ); + }, + })} + size="small" + sx={{ + py: 1.2, + }} + /> + ); + })} + + + + + + {displayedPosts.map((post) => ( + ({ + py: 2.5, + display: 'flex', + flexDirection: 'column', + position: 'relative', + '&:not(:last-of-type)': { + borderBottom: '1px solid', + borderColor: 'divider', + }, + })} + > + + + ))} + + { + setPage(value - 1); + postListRef.current?.scrollIntoView(); + }} + sx={{ mt: 1, mb: 8 }} + /> + + +
+ + + + + ); +} diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index 0c7d4e00bbe699..a6eded6dc4cbe9 100644 --- a/docs/pages/blog/2019-developer-survey-results.md +++ b/docs/pages/blog/2019-developer-survey-results.md @@ -1,11 +1,11 @@ --- -description: 2019 MUI Developer Survey results +title: 2019 MUI Developer Survey results +description: Results for the first yearly developer survey, 2019 edition. +date: 2019-03-16T00:00:00.000Z +authors: ['oliviertassinari', 'mbrookes'] +tags: ['Developer survey'] --- -# 2019 MUI Developer Survey results - -Olivier Tassinari, Matt Brookes. March 16, 2019. - While we are currently working on the upcoming release of MUI v4, we need to prioritize our roadmap for the coming year. To refine our focus, we launched a developer survey last month, to which we received 734 contributions. Thank you for your participation! @@ -219,11 +219,11 @@ A nice bell curve, with the majority of developers having 1 to 5 years experienc ### 10. How long have you been developing with React? -Bar chart: 99 x I'm just getting started!, 77 x 6 months +, 301 x 1 year +, 171 x 3 years +, 32 x 5 years - bleeding edge baby! +Bar chart: 99 x I'm just getting started!, 77 x 6 months +, 301 x 1 year +, 171 x 3 years +, 32 x 5 years - bleeding edge baby! ### 11. How long have you been developing with MUI? -Bar chart: 160 x I'm just getting started!, 147 x 6 months +, 293 x 1 year +, 71 x 3 years +, 11 x Four years + – I'm a pioneer! +Bar chart: 160 x I'm just getting started!, 147 x 6 months +, 293 x 1 year +, 71 x 3 years +, 11 x Four years + – I'm a pioneer! We missed a trick by not including "2 years +" here, so "1 year +" looks stacked. The number of users of MUI continues to grow at a steady pace, and once on board, many @@ -290,7 +290,7 @@ Multiple options were allowed. - Gatsby: 8% Server-side rendering isn't yet very popular. -As the React ecosystem matures, we might see a [big](https://www.rank2traffic.com/gatsbyjs.org) [push](https://www.rank2traffic.com/nextjs.org) of server-side rendering in the coming months. +As the React ecosystem matures, we might see a big push of server-side rendering in the coming months. ### 18. What styling system are you using? diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index a06a7be90410fa..d0e56c5b8c2fff 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -1,22 +1,24 @@ --- +title: 2019 in review and beyond +date: 2020-01-25T00:00:00.000Z description: 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years! +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# 2019 in review and beyond - -The core team. January 25, 2020. - 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years! ## Growth -- 📦 From 2.2M to [3.2M](https://www.npmjs.com/package/@mui/material) downloads per month. +It's only with your trust that we could achieve the following outcomes in 2019. Thank you! + +- 📦 From 2.2M to [3.2M](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&from=2018-11-30&to=2019-12-31) downloads per month (from 13% to [14%](https://docs.google.com/spreadsheets/d/1l5j3Xjtvm9XZtmb4ulLiWElQaXSlZlyCWT5ONrQMpBo/edit?usp=sharing) share of the React ecosystem). - 📈 From 1.6M to 3.1M unique visitors per year on the documentation. - ⭐️ From 43.1k to 53.3k stars, leave us [yours 🌟](https://github.com/mui-org/material-ui). - 👨‍👩‍👧‍👦 From 1,064 to [1,581](https://github.com/mui-org/material-ui/graphs/contributors) contributors. -- 💰 Grew financial support by 76% in 2019, compared to 2018. -- 🏢 From 1.5 to 3 full-time equivalent developers, spread among multiple financially supported [core team members](https://mui.com/about/). +- 💰 Grew financial support by 1.76X in 2019, compared to 2018. +- 🏢 From 1.5 to 3 full-time equivalent developers, spread among multiple financially supported [core team members](/about/). The numbers speak for themselves. 2019 was super exciting and made MUI one of the most advanced open-source, React-based, UI component libraries! @@ -28,7 +30,7 @@ We thought we were almost done, and that we had done the hardest part with the r We soon realized that we could do way more. It was just the beginning :D. Some of the key factors: -- The results of the [2019 Developer Survey](https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf) have highlighted the immense potential for working on advanced components and features, especially for enterprise users. +- The results of the [2019 Developer Survey](https://mui.com/blog/2019-developer-survey-results/) have highlighted the immense potential for working on advanced components and features, especially for enterprise users. Developers are craving for a UI framework that they can learn once (e.g. few breaking changes, only one solution per problem) and use everywhere (e.g. comprehensive, customizable, high-quality). - Bootstrap had successfully released [a theme store](https://themes.getbootstrap.com/). Following this approach opened an opportunity to capture a fraction of the value MUI creates for its users, and funnel it back into R&D on the framework. @@ -80,7 +82,7 @@ It's a great opportunity for us to adjust the strategy and to pause to analyze t ### Open source roadmap -Most of the time we work in the open. Here's our [public roadmap](/discover-more/roadmap). +Most of the time we work in the open. Here's our [public roadmap](/discover-more/roadmap/). We plan to release a new major around the end of the year (v5). We will promote components that are in the lab to the core, migrate to styled-components, and more. @@ -96,7 +98,7 @@ Enterprise features will build on the open source version of the components. ### Hiring -We are looking for a [full-time software developer](/company/software-engineer/) to join us! +We are looking for a full-time Software Developer to join us! If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project). Spreading the word to other developers that are looking for a great UI framework is also extremely helpful 🙌. diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index aaa5d68324693d..cc863e069520f8 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -1,11 +1,11 @@ --- -description: 2020 MUI Developer Survey results +title: 2020 MUI Developer Survey results +description: Results for our yearly developer survey, 2020 edition. +date: 2020-06-27T00:00:00.000Z +authors: ['mnajdova', 'oliviertassinari', 'mbrookes'] +tags: ['Developer survey'] --- -# 2020 MUI Developer Survey results - -Marija Najdova, Olivier Tassinari, Matt Brookes. June 27, 2020. - Continuing the tradition from last year, we launched a developer survey a few months ago, to which we received 1488 responses. This is twice as many as last year (734), so we thank you all for the participation! The survey is closed and we can now give a detailed summary of the results. @@ -217,80 +217,80 @@ The number of answers was limited to 3. ### 7. How did you hear about MUI? -Bar chart: 50.65% Search, 26.18% Word of mouth, 10.76% Social, 5.10% Blog, 7.31% Other. +Bar chart: 50.65% Search, 26.18% Word of mouth, 10.76% Social, 5.10% Blog, 7.31% Other. ### 8. Which of the following best describes your current job role? -Bar chart: 52.18% Full-stack developer, 27.11% Frontend developer, 11.65% Entrepreneur (I do it all), 3.47% Beginner learning web development, 1.23% Backend Developer, 1.16% UX Designer, 0.34% Student, 0.20% CTO, 2.66% Other. +Bar chart: 52.18% Full-stack developer, 27.11% Frontend developer, 11.65% Entrepreneur (I do it all), 3.47% Beginner learning web development, 1.23% Backend Developer, 1.16% UX Designer, 0.34% Student, 0.20% CTO, 2.66% Other. This was expected :) ### 9. How big is your organization? -Bar chart: 12.30% Hobby / side project, 13.40% Self-employed, 35.60% 2-5 people, 16.10% 6-10, 10.30% 11-20, 5.10% 21-50, 2.50% 51-100, 4.60% 100+ +Bar chart: 12.30% Hobby / side project, 13.40% Self-employed, 35.60% 2-5 people, 16.10% 6-10, 10.30% 11-20, 5.10% 21-50, 2.50% 51-100, 4.60% 100+ It seems we are consistently popular with small to medium-sized organizations, so we will keep working on the ease of use of the components, while at the same time, allowing designers to style them to match their organizations' brand. ### 10. How long have you been developing with JavaScript -Bar chart: 3.60% I'm just getting started!, 7.40% 6 months +, 20.80% 1 year +, 27.80% 3 years +, 24.30% 5 years +, 9.80% 10 years +, 4.10% 15 years +, 2.30% 20 years + +Bar chart: 3.60% I'm just getting started!, 7.40% 6 months +, 20.80% 1 year +, 27.80% 3 years +, 24.30% 5 years +, 9.80% 10 years +, 4.10% 15 years +, 2.30% 20 years + We can see the normal distribution of developer experience here, where most have moderate level of experience (between 1 and 5 years). ### 11. How long have you been developing with React? -Bar chart: 10.70% I'm just getting started!, 15.60% 6 months +, 24.60% 1 year +, 21.40% 2 years +, 23.10% 3 years +, 4.60% Bleeding edge baby! 5 years + +Bar chart: 10.70% I'm just getting started!, 15.60% 6 months +, 24.60% 1 year +, 21.40% 2 years +, 23.10% 3 years +, 4.60% Bleeding edge baby! 5 years + ### 12. How long have you been developing with MUI? -Bar chart: 20.50% I'm just getting started!, 24.90% 6 months +, 28% 1 year +, 17.40% 2 years +, 7.50% 3 years +, 1.70% I'm a pioneer! 4 years + +Bar chart: 20.50% I'm just getting started!, 24.90% 6 months +, 28% 1 year +, 17.40% 2 years +, 7.50% 3 years +, 1.70% I'm a pioneer! 4 years + ### 13. What were you primarily using before MUI? -Bar chart: 47.08% Bootstrap, 16.04% Custom system, 13.68% Started with MUI, 6.67% Angular Material, 4.44% Semantic-UI, 3.19% Ant Design, 8.89% Other +Bar chart: 47.08% Bootstrap, 16.04% Custom system, 13.68% Started with MUI, 6.67% Angular Material, 4.44% Semantic-UI, 3.19% Ant Design, 8.89% Other Similar to last year, it seems that most respondents were previously using Bootstrap. We can see also that custom solutions, as well as some other frameworks, were replaced with MUI. ### 14. How many MUI based projects have you built? -Bar chart: 11.50% 0 (I'm just getting started), 23% 1, 54.80% 2-5, 7.80% 6-10, 2.90% 10+ +Bar chart: 11.50% 0 (I'm just getting started), 23% 1, 54.80% 2-5, 7.80% 6-10, 2.90% 10+ ## Your product ### 15. What are you building? -Bar chart: 23.43% Enterprise application, 20.31% Dashboard admin app, 7.40% A design system, 7.40% A set of UI components, 7.37% playing with tech, 7.34% A prototype, 6.40% Landing page, 5.41% e-commerce site, 4.80% CMS, 3.59% Portfolio or resume, 1.88% Blog, 4.69% Other +Bar chart: 23.43% Enterprise application, 20.31% Dashboard admin app, 7.40% A design system, 7.40% A set of UI components, 7.37% playing with tech, 7.34% A prototype, 6.40% Landing page, 5.41% e-commerce site, 4.80% CMS, 3.59% Portfolio or resume, 1.88% Blog, 4.69% Other Enterprises and dashboards are at the top of the heap, and yes, we know that for many of you, the systems you are building are internal, but if you have something that you would like to share as part of [the showcase](/discover-more/showcase/), let us know by opening a PR. Also for those of you building UI components, we'd be happy to give you a shout out in the [related projects](/discover-more/related-projects/) section. ### 16. What "delivery mechanism" are you using? -Bar chart: 68.37% Single page app (Create React App, etc), 18.24% Server-side rendered website (Next.js, Gatsby, etc), 6.22% Desktop app (Electron, etc), 4.65% Native mobile app (Cordova, etc), 0.10% React Native, 2.40% Other +Bar chart: 68.37% Single page app (Create React App, etc), 18.24% Server-side rendered website (Next.js, Gatsby, etc), 6.22% Desktop app (Electron, etc), 4.65% Native mobile app (Cordova, etc), 0.10% React Native, 2.40% Other ### 17. Who are you building it for? -Pie chart: 55.17% For my company -22.86% For a client, 16.94% Side project, 5.03% More than one of these. +Pie chart: 55.17% For my company +22.86% For a client, 16.94% Side project, 5.03% More than one of these. ### 18. Which JS framework are you using, if any? -Pie chart: 57.34% Create React App, 16.40% Custom webpack, 12.35% Next.js, 5.40% Gatsby, 8.51% Other. +Pie chart: 57.34% Create React App, 16.40% Custom webpack, 12.35% Next.js, 5.40% Gatsby, 8.51% Other. ### 19. What styling system are you using? -Pie chart: 53.84% MUI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other +Pie chart: 53.84% MUI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other The response seems to be similar to the one from the last year's survey, so we will push with better support for styled components. ### 20. Has your organization ever paid for UI components? -Pie chart: 89.90% No, 10.10% Yes +Pie chart: 89.90% No, 10.10% Yes ### 21. What type system are you using? -Bar chart: 54.08% None -30.87% TypeScript 3.8, 7.31% TypeScript 3.7, 1.90% Flow, 1.55% TypeScript 3.6, 0.98% TypeScript 3.5, 3.31% Other +Bar chart: 54.08% None +30.87% TypeScript 3.8, 7.31% TypeScript 3.7, 1.90% Flow, 1.55% TypeScript 3.6, 0.98% TypeScript 3.5, 3.31% Other Almost half of the community is using TypeScript. Next year, it might even become more popular than JavaScript. diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md index e7d538743a8e0d..78b38f7560df56 100644 --- a/docs/pages/blog/2020-introducing-sketch.md +++ b/docs/pages/blog/2020-introducing-sketch.md @@ -1,11 +1,11 @@ --- +title: Introducing MUI for Sketch description: Today, we're excited to announce the introduction of official Sketch symbols for MUI. +date: 2020-03-30T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['News'] --- -# Introducing MUI for Sketch - -Olivier Tassinari. March 30, 2020. - Today, we're excited to introduce the Sketch symbols 💎 for MUI. [![preview](/static/blog/2020-introducing-sketch/product-preview.png)](https://mui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch) diff --git a/docs/pages/blog/2020-q1-update.md b/docs/pages/blog/2020-q1-update.md index b4ec1d67e0515c..640eee65c2611c 100644 --- a/docs/pages/blog/2020-q1-update.md +++ b/docs/pages/blog/2020-q1-update.md @@ -1,11 +1,11 @@ --- +title: Q1 2020 Update description: An update on our mission for Q1 2020. +date: 2020-04-14T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# Q1 2020 Update - -Olivier Tassinari. April 14, 2020. - Welcome to the new format of our mission update. We are moving from monthly to quarterly updates. ## Product diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 85d92c0239b835..bd0ae316a554d2 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -1,11 +1,11 @@ --- +title: Q2 2020 Update description: An update on our mission for Q2 2020. +date: 2020-07-17T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# Q2 2020 Update - -Olivier Tassinari. July 17, 2020. - This update covers our progress over the last three months, and what we aim to achieve in the coming months. ## Product @@ -100,7 +100,7 @@ We'll do our best, no guarantee! These are objectives, no guarantees: -- 🏢 We will [hire](/company/jobs/) 3 full-time roles in the team. +- 🏢 We will [hire](/careers/) 3 full-time roles in the team. - One person on the open-source side to focus on the design system problem (unstyled, theming, styling, etc.): ✅ starting in two months. - One person on the enterprise side to consolidate the development of the advanced components: 🚧 Work in progress. diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md index c7b19137a7bdc3..ae3b7ada71bc37 100644 --- a/docs/pages/blog/2020-q3-update.md +++ b/docs/pages/blog/2020-q3-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q3 2020. date: 2020-10-14T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months, and what we aim to achieve in the coming months. @@ -91,7 +92,7 @@ Here are the most significant improvements since June 2020. This was a dense qua -- 💅 We have completed the first iteration of the unstyled components for v5.
You can find a [new version](https://mui.com/components/slider-styled/#UnstyledSlider.tsx) of the slider in the lab without any styles. +- 💅 We have completed the first iteration of the unstyled components for v5.
You can find a [new version](/components/slider/#unstyled) of the slider in the lab without any styles. The unstyled component weighs in at [5.2 kB gzipped](https://bundlephobia.com/package/@mui/lab@5.0.0-alpha.12), 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, without reimplementing the JavaScript and accessibility logic.
We're also pushing in this direction to address a concern we hear from large enterprises that want to be able to go one layer down in the abstraction, in order to gain more control. @@ -103,7 +104,7 @@ Here are the most significant improvements since June 2020. This was a dense qua Note that we have experimented with headless components (hooks only) in the past. For instance, you can leverage the [useAutocomplete](/components/autocomplete/#useautocomplete), and [usePagination](/components/pagination/#usepagination) hooks. However, we are pushing with unstyled first as a required step for the next item: ⬇️. - 👩‍🎨 We have completed the first iteration of the new styling solution of v5.
- You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/docs/introduction).
+ You can find a [new version](/components/slider/) of the slider in the lab powered by [emotion](https://emotion.sh/docs/introduction).
If 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) or [CRA](https://github.com/mui-org/material-ui/tree/HEAD/examples/create-react-app-with-styled-components/) 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 styled-components or emotion.
Last but not least, this change allows us to take advantage of dynamic style props. We will use them for dynamic color props, variant props, and new style props available in the core components. diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index b01f1ac74ba63f..30a4b482d74e27 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -4,6 +4,7 @@ description: 2020 has been another great year, not only for MUI, but also for th date: 2020-12-31T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] card: true +tags: ['Company update'] --- 2020 has been another great year, not only for MUI, but also for the ecosystem. @@ -11,14 +12,16 @@ We have taken on ambitious challenges and started to scale the project. ## Growth -- 📦 From 3.2M to [6.4M](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&from=2019-11-30&to=2020-12-31) downloads per month (from 14% to 18% share of the React ecosystem). +It's only with your trust that we could achieve the following outcomes in 2020. Thank you! + +- 📦 From 3.2M to [6.4M](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&from=2019-11-30&to=2020-12-31) downloads per month (from 14% to [18%](https://docs.google.com/spreadsheets/d/1l5j3Xjtvm9XZtmb4ulLiWElQaXSlZlyCWT5ONrQMpBo/edit?usp=sharing) share of the React ecosystem). - 📈 From 3.1M to 4.6M unique visitors per year on the documentation. - ⭐️ From 53.3k to 63.8k stars, leave us [yours 🌟](https://github.com/mui-org/material-ui). - 👨‍👩‍👧‍👦 From 1,581 to [2,052](https://github.com/mui-org/material-ui/graphs/contributors) contributors. - 💰 Grew financial support by 2.1X in 2020, compared to 2019. -- 🏢 From 3 to 6 full-time equivalent developers, spread among multiple financially supported [core team members](https://mui.com/about/). +- 🏢 From 3 to 6 full-time equivalent developers, spread among multiple financially supported [core team members](/about/). -The numbers speak for themselves. We have reproduced the [traction we got in 2019](/blog/2019/). +The numbers speak for themselves. We have reproduced the [traction we got in 2019](/blog/2019/#growth). ## In review @@ -37,7 +40,7 @@ We have started to leverage these trends as opportunities in the next version of We have achieved most of what we could have hoped for. -- The most important, we have welcome 3 new members in the company: [Damien](/blog/spotlight-damien-tassone/), [Marija](/blog/marija-najdova-joining/), and [Danail](/blog/danail-hadjiatanasov-joining/). +- The most important, we have welcome 3 members in the company: [Damien](/blog/spotlight-damien-tassone/), [Marija](/blog/marija-najdova-joining/), and [Danail](/blog/danail-hadjiatanasov-joining/). - We have made significant progress with [v5](https://mui.com/). We have made half the breaking changes planned. We have migrated our [first component](https://mui.com/components/slider/) to the new style architecture (emotion by default, adapter for styled-components, and unstyled). - We have introduced new components (some in the core, some in the lab): - [Alert](/components/alert/) @@ -111,6 +114,6 @@ If we sustain the current growth rate, we should be able to double the size of t - Developers are looking to build faster and more appealing UIs. - Low-code will progressively become mainstream for professional developers and knowledge workers. -If like us, you are excited about bringing joy to developers and enabling more people to build apps, check our positions, [we are hiring](/company/jobs/)! +If like us, you are excited about bringing joy to developers and enabling more people to build apps, check our positions, [we are hiring](/careers/)! See you in 2021 🚀 diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 8e5aaccb124fde..70c0f0cd56f9ec 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q1 2021. date: 2021-04-12T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months, and what we aim to achieve in the months ahead. @@ -166,7 +167,7 @@ We have redesigned most of the components from scratch to make sure all componen The most important change inside the organization is the introduction of a company Handbook. The company is distributed and operates across different time zones. Per the nature of our operation, and at the pace we are growing, we needed an effective and efficient way to share the organizational processes and culture. -Per our transparency value, all the sections of the Handbook that don't contain sensitive information are [publicly available](https://www.notion.so/Handbook-f086d47e10794d5e839aef9dc67f324b). +Per our transparency value, all the sections of the Handbook that don't contain sensitive information are [publicly available](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). This Handbook is the single **source of truth**. It's meant to be updated by any team member, to stay in sync with how we do things. diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md index d23c8c71ccb020..f0b9335777dbe9 100644 --- a/docs/pages/blog/2021-q2-update.md +++ b/docs/pages/blog/2021-q2-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q2 2021. date: 2021-07-12T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months. @@ -182,7 +183,7 @@ We have welcomed four new members to the company 🏢: michal -- [Danilo](https://daniloleal.co/), a lead designer to raise our design game. +- [Danilo](https://daniloleal.co/), a Lead Designer to raise our design game. danilo diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md index cff0b9e3f230ef..8a1df80436ef3d 100644 --- a/docs/pages/blog/2021-q3-update.md +++ b/docs/pages/blog/2021-q3-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q3 2021. date: 2021-10-26T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months. @@ -232,5 +233,5 @@ While the visual difference between MUI Core v4 and v5 is not major, we still ne We have the following objectives: - 📊 Run a new edition of the Developer Survey. The last one was done [15 months ago](https://mui.com/blog/2020-developer-survey-results/). Now that v5 is released, it's time for the 2021 edition! -- 👪 Hire for two new roles: a [product manager](/company/product-manager/) to focus on low-code and our first [developer advocate](/company/developer-advocate/). +- 👪 Hire for two new roles: a Product Manager to focus on low-code and our first Developer Advocate. - 💫 Create a great onboarding experience for the 6-7 new hires of Q4. diff --git a/docs/pages/blog/2021.js b/docs/pages/blog/2021.js new file mode 100644 index 00000000000000..34fc37df30f5dc --- /dev/null +++ b/docs/pages/blog/2021.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './2021.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md new file mode 100644 index 00000000000000..d6cd180edc5ef8 --- /dev/null +++ b/docs/pages/blog/2021.md @@ -0,0 +1,194 @@ +--- +title: 2021 in review and beyond +description: 2021 has been another great year, not only for MUI but also for the ecosystem. +date: 2021-12-31T00:00:00.000Z +authors: ['oliviertassinari'] +card: true +tags: ['Company update'] +--- + + + +Happy New Year from MUI! + +2021 has been another amazing year, not only for MUI but also for the React ecosystem and our users. +The digitalization of the economy is accelerating, pushed by COVID-19. +Developers and designers have been, more than ever, busy creating apps. + +We spent our year making it faster and easier for you to build great UIs and to delight your users with amazing UI experiences. +Thank you for being part of this journey! + +## Growth + +It's only with your trust that we could achieve the following outcomes in 2021. Thank you! + +- 📦 From 6.4M to [10.8M](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&from=2019-11-30&to=2020-12-31) downloads per month (from 18% to [23%](https://docs.google.com/spreadsheets/d/1l5j3Xjtvm9XZtmb4ulLiWElQaXSlZlyCWT5ONrQMpBo/edit?usp=sharing) share of the React ecosystem). +- 📈 From 4.6M to 6.0M unique visitors per year on the documentation. +- ⭐️ From 63.8 to 74.0k stars, leave us [yours 🌟](https://github.com/mui-org/material-ui). +- 👨‍👩‍👧‍👦 From 2,052 to [2,396](https://github.com/mui-org/material-ui/graphs/contributors) contributors. +- 💰 Grew financial support by 2.9X in 2021, compared to 2020. +- 🏢 From 6 to 14 full-time equivalent [team members](/about/). + +The numbers speak for themselves. We have reproduced the [traction we got in 2020](/blog/2020/#growth). + +## In review + +When we started 2021, we had recently released the first version of the MUI X data grid and were in the middle of the release of MUI v5. +We had committed ourselves to fully execute these two major efforts: + +- On MUI Core, major releases have historically been efforts that span over a dozen months. + v5 was no different as great work takes time. + At the beginning of 2021, we had solved the most important aspect of v5, we had a new style engine to unlock a better styling and customization experience for developers. + But we still had most of the work ahead of us, we had to roll out the improvements to all our users. + With a large code and user base like MUI has, we knew it would take time. + For example, we might have had migrated a few components to the new style engine and fix all the issues that we could find, going to production is unforgiving. + Developers tend to surface all the cases that are overlooked in the first iteration with GitHub issues. +- On MUI X, we had successfully sold our first Pro plan licenses and reached 100k downloads/month on the MIT version. + We had early signs from the community of a market fit for the product and that the open core model was the right one to execute our mission. + We were determined to solely focus on the data grid component, and demonstrate that our model was viable to build the best React data grid in the space. + +What might have been the biggest change in 2021 is the implications of a larger team for the organization structure. +We have reached an inflection point at around 10 people. +I could no longer look at all the GitHub issues and PRs. +At that point, it was requiring >70h/week to do it correctly. +It was not scaling to have one individual aware of all PRs and GitHub issues. +Continuing in this direction would prevent us to grow the team, and more importantly, it was distracting me from the core CEO responsibilities (people, vision, funding). +So we have broken down the responsibilities +We have introduced our first layers of management and defined more clearly the purpose of each role. + +## Achievements + +We have achieved most of what we could have hoped for. + +### Company + +- The most important, we have welcomed 10 [members](/about/) in the company: Matheus, Michał, Jun, Danilo, Flavien, Benny, Alexandre, Jan, Bharat, Prakhar. +- We have introduced a [public handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b) on how we run the company. + For example, we are using the OKRs work methodology to prioritize our efforts. +- We held our first company [retreat](/blog/2021-q3-update/#retreat) 🏝 in Lisbon, Portugal 🇵🇹 , for members of the team that were not prevented by COVID-19 related travel restrictions, and who felt safe enough to travel. +- We have [rebranded](/blog/material-ui-is-now-mui/) the company to a clean 3 letters acronym: mui.com. This move was key for us to grow beyond Material Design. + +### MUI Core + +- We have released [v5](/blog/mui-core-v5/), 21% of the npm downloads are on this major version now. +- We have broken down the demos into smaller and focus on one aspect at a time. +- We have polished and promoted most of the components that were in the lab to `@mui/material`. +- We have introduced many new components: + - [Masonry](/components/masonry/) + - [Stack](/components/stack/) + - [Trap Focus](/components/trap-focus/) + - [Unstyled button](/components/buttons/#unstyled) + - [Unstyled slider](/components/slider/#unstyled) + - [Unstyled modal](/components/modal/#unstyled) + - [Unstyled slider](/components/switches/#unstyled) + - [Unstyled tabs](/components/tabs/#unstyled) + +### MUI X + +- We have released [v5](/blog/mui-x-v5/), 42% of the npm downloads are on this major version now. +- We have introduced support for [custom locales](/components/data-grid/localization/). +- We have introduced many new features while consolidating the existing ones: + - [Row editing](/components/data-grid/editing/#row-editing) + - [Cell editing](/components/data-grid/editing/#cell-editing) + - [Column pinning](/components/data-grid/columns/#column-pinning) + - [Tree data](/components/data-grid/group-pivot/#tree-data) + - [CSV export](/components/data-grid/export/#csv-export) + - [Print](/components/data-grid/export/#print) +- We have grown the MIT downloads on npm and the number of licenses sold per month by a factor of x10 in 2021 compared to 2020. +- We have grown the size of the team from 2 to 4 people (6 in January). + +## Looking at 2022 + +I have been involved on MUI for 7 years and almost 3 years full-time now. +It's amazing to see the progress the library has done [since then](https://v0.mui.com/#/components/app-bar). +But at the same time, I'm astonished by how far we can still push the mission forward. +My experience has been that the more we improve the library, the more we envision future ways to do it better. +It's still [**day 1**](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm). + +What's our mission? To empower as many people as possible to build great UIs, faster. + +2021 was great, 2022 is going to be even more exciting! +We will continue in the same direction. +Here is a breakdown of our [roadmap](/discover-more/roadmap/). + +### MUI Core + +The release of v5 has introduced a significant API churn in the community. +While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, e.g. taking full advantage of the new style engine. + +#### MUI Base + +To continue improving the customization experience, we will double down on the version of the components without styles: `@mui/base`. +These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied or what styles. +We still have work to do to have a full set of unstyled components. + +You can read more about them in [the docs](/customization/unstyled-components/) and keep track of our progress in [#27170](https://github.com/mui-org/material-ui/issues/27170). + +Our high-level plan is to use the unstyled components and hooks as the basis of the Material Design components and our second design system. + +#### MUI System + +There a number of improvements that we can bring to the system (the npm package `@mui/system` used to create the styled components). +Hopefully, we will bring native support for CSS variables, improve DX, and improve performance. + +#### Material UI + +Google is rolling out [Material Design 3](https://m3.material.io/), we have to determine how to respond to it. +Should we implement it later on for v6? Should we ignore it? Should we implement Google's UI that looks cleaner instead? +In the meantime, we will keep improving the components, increasingly relying on `@mui/base`. + +#### MUI Joy + +We will continue [in the direction of 2021](/blog/2020/#a-second-theme). +While Material Design is a predominant design choice for building rich client-side applications, it's not the only popular design trend. +We plan to provide a [second design system](https://github.com/mui-org/material-ui/issues/22485) to expand the range of use cases for MUI, striking a balance between: + +- alignment with the best-looking design trends of hot startups in the US. +- optimization of its usage for rich client-side applications while keeping it good enough for landing pages. +- simplicity of the design for allowing simpler customizations. +- complementarity with Material Design. + +It will be built on top of the unstyled components: MUI Base and our styling library: MUI System. + +### MUI X + +The recent data grid product initiative is working, it's time to scale MUI X by growing the team and the product scope. + +#### Data Grid + +We will keep the data grid as our primary effort, there are [many features left to be built 🚧](/components/data-grid/getting-started/#feature-comparison). +Our efforts will include: doubling down on the documentation, releasing the Premium features, and working on a hook-only API. + +#### Date Picker + +MUI Core had not enough bandwidth to work on the pickers components. +So we will expand the scope of MUI X to the date picker components, taking ownership and resuming where the work was left. + +### Low-code + +Pro-code (writing code in a regular programming language) has been an incredibly effective way to deliver on our mission so far. +The two main benefits reported by developers in our 2021 survey for using MUI are "moving faster" and "ease of use". +However, the data points we can find suggest that the demand for developers in the next 5-10 years is growing a lot faster than the growth of the workforce. +The importance of these two benefits is only going to increase, it's critical for MUI to keep pushing the envelope of what development speed and ease of use look like for developers. + +Entering low-code, we have a small team that will continue explore in 2022 how MUI can empower developers and knowledge workers to build apps more visually, up to x10 faster, with no advanced SQL or JavaScript knowledge. +The goal is to write fewer lines of code, while still empowering developers to extend it with custom logic. + +### Scale + +If we sustain the current growth rate in 2022, we should be able to grow the team from 14 to 40 members in the company by the end of the year (based on the self bootstrap revenues). +The primary purpose will be to strengthen all the efforts that we have started, not starting any new ones until we reach a great level of execution on all the above. + +At a high level we are guided by the following rock beliefs: + +- React dominance in the UI development landscape will continue to increase in the next 5 years. +- Developers will always be looking to build faster, more appealing UIs, and with less specific knowledge. +- Low-code will progressively become mainstream for professional developers and knowledge workers. + +If like us, you are excited about bringing joy to developers and enabling more people to build beautiful apps faster, check our positions, there are 8 open roles as of now, [we are hiring](/careers/)! + +You can help us shape these new packages by taking part in discussions. +[RFCs](https://github.com/mui-org/material-ui/issues?q=is%3Aopen+label%3Adiscussion+%5BRFC%5D) are waiting for your feedback. +Don't hesitate to let us know what you think! + +See you in 2022, thank for being part of this journey 🚀 diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md index 397888d70bd86a..24dc11cbc69b6e 100644 --- a/docs/pages/blog/april-2019-update.md +++ b/docs/pages/blog/april-2019-update.md @@ -1,11 +1,11 @@ --- +title: April 2019 Update description: Here are the most significant improvements in April. +date: 2019-05-07T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# April 2019 Update - -Olivier Tassinari. May 7, 2019. - Here are the most significant improvements in April: - 📚 We have migrated [most](https://github.com/mui-org/material-ui/issues/14897) of our demos to TypeScript. **@eps1lon** has lead the effort. You can switch between the JavaScript demo and the TypeScript demo using this toggle button: diff --git a/docs/pages/blog/august-2019-update.md b/docs/pages/blog/august-2019-update.md index 54648dbda2bd7d..a1a6714ebf2bbe 100644 --- a/docs/pages/blog/august-2019-update.md +++ b/docs/pages/blog/august-2019-update.md @@ -1,11 +1,11 @@ --- +title: August 2019 Update description: Here are the most significant improvements in August. +date: 2019-09-07T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# August 2019 Update - -Olivier Tassinari. September 7, 2019. - Here are the most significant improvements in August: - ✨ We have introduced [a search page](/components/material-icons/) that makes it easy to find the perfect Material Design icon: diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md index 76cec2d73ea733..29a4df46b72941 100644 --- a/docs/pages/blog/benny-joo-joining.md +++ b/docs/pages/blog/benny-joo-joining.md @@ -3,7 +3,7 @@ title: Benny Joo joins MUI description: We are excited to share that Benny Joo has joined MUI. He has started last month full-time and is now a Junior Software Engineer in the Core team. date: 2021-11-16T00:00:00.000Z authors: ['mnajdova'] -card: false +tags: ['Team'] --- We are excited to share that [Benny Joo](https://github.com/hbjORbj) has joined MUI. diff --git a/docs/pages/blog/callback-support-in-style-overrides.js b/docs/pages/blog/callback-support-in-style-overrides.js new file mode 100644 index 00000000000000..d4410a841d3bd7 --- /dev/null +++ b/docs/pages/blog/callback-support-in-style-overrides.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './callback-support-in-style-overrides.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md new file mode 100644 index 00000000000000..71ab39ae09cc9d --- /dev/null +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -0,0 +1,194 @@ +--- +title: Introducing callback support in style overrides +description: We're excited to introduce callback support for global theme overrides in this minor version update! +date: 2022-01-31T00:00:00.000Z +authors: ['siriwatknp'] +tags: ['MUI Core', 'News'] +card: false +--- + +[MUI Core v5.3.0](https://github.com/mui-org/material-ui/releases/tag/v5.3.0) introduces the ability to write a callback in style overrides (global theming), giving you full control of component customization at the theme level. + +Why is using a callback better than the existing plain object? Let me explain from the beginning… + +## The problems + +In v4, the style engine library was JSS which had some limitations. +Style overrides were not able to support dynamic props via a callback so we relied on using classes. Take a look at the [`Chip` classes](https://github.com/mui-org/material-ui/blob/97d32b0ff3fae4537c20c79e619f132f4a5c5cbb/packages/mui-material/src/Chip/chipClasses.ts) for example – there are more than 20 classes that are incomplete if we count the permutation of elements (`root | avatar | icon | label | deleteIcon`), size (`small | medium | large`), and color (`primary | secondary | ...`). +This leads to a poor theming experience because developers need to know which specific key to customize. + +We believe it would be better for developers if they could create custom styles by reading the component props, without ever needing to know what key they should use. + +Fortunately, it is now possible in v5 because of the new style engine powered by emotion. Theming is simpler and more flexible. You only need to know the component's slot name and then provide an **object** (static overrides) or a **callback** (dynamic overrides). + +## Using callback in `styleOverrides` + +The callback gives you the `props` that the slot received. Most of the time you would use: + +- `props.ownerState`: the combination of runtime props and internal states. +- `props.theme`: the theme object you provided to `ThemeProvider`, or the default one. + +```jsx +import { ThemeProvider, createTheme } from '@mui/material/styles'; + + ({ + padding: { + small: '8px 4px', + medium: '12px 6px', + large: '16px 8px', + }[ownerState.size], + ...(ownerState.variant === 'outlined' && { + borderWidth: '2px', + ...(ownerState.variant === 'primary' && { + borderColor: theme.palette.primary.light, + }), + }), + }), + label: { + padding: 0, + }, + }, + }, + }, + })} +> + ...your app +; +``` + +> 💡 The side benefit of using a callback is that you can use the runtime theme without creating the outer scoped variable. + +### TypeScript + +The callback is type-safe. + +- `ownerState`: `ComponentProps` interface, eg. `ButtonProps`, `ChipProps`, etc. +- `theme`: `Theme` interface from `@mui/material/styles`. + +```tsx +{ + MuiChip: { + styleOverrides: { + // ownerState: ChipProps + // theme: Theme + root: ({ ownerState, theme }) => ({...}), + }, + } +} +``` + +If you extend the interface via module augmentation like this: + +```ts +declare module '@mui/material/Button' { + interface ButtonPropsVariantOverrides { + dashed: true; + } +} +``` + +you will be able to see those props in `ownerState.variant` 🎉. `theme` can be augmented as well. + +## Experimental `sx` function + +Initially, `sx` was designed to be a prop that enables you to inject styles with a shorthand notation to components created with the `styled` API: + +```jsx +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; + +const Label = styled('span')({ + fontWeight: 'bold', + fontSize: '0.875rem', +}) + + + +; +``` + +> 💡 All MUI components are created with the `styled` API, so they accept `sx` prop by default. + +`sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use an `sx`-like syntax in global theme overrides. + +All you need is to use the [`experimental_sx`](/system/styled/#how-can-i-use-the-sx-syntax-with-the-styled-utility) function. In the following example, I use `sx` to theme the `Chip` component: + +```jsx +import { + ThemeProvider, + createTheme, + experimental_sx as sx, +} from '@mui/material/styles'; + + + ...your app +; +``` + +If I want to add more styles based on these conditions: + +- border color `palette.text.secondary` is applied when ``. +- font size is `0.875rem` in mobile viewport, `0.75rem` in larger than mobile viewport when ``. + +An array can be used as a return type to make the code easier to add/remove conditions: + +```js +// The is omitted for readability. +{ + root: ({ ownerState }) => [ + sx({ + px: '12px', + py: '6px', + fontWeight: 500, + borderRadius: '8px', + }), + ownerState.variant === 'outlined' && ownerState.color === 'default' && + sx({ + borderColor: 'text.secondary', + }), + ownerState.size === 'small' && + sx({ + fontSize: { xs: '0.875rem', sm: '0.75rem' }, + }) + ], +} +``` + +
+ +**That's it for today!** Happy styling 💅. + +I hope this small update makes your customization experience better than ever. Don't forget to share this update with your friends and colleagues. + +To get more updates like this in the future, **subscribe to our newsletter** at the bottom of this page. + +## Read more + +- [Component theming](/customization/theme-components/) +- [All supported shorthands in `sx`](/system/the-sx-prop/#theme-aware-properties) +- [`sx` performance tradeoff](/system/basics/#performance-tradeoff) +- [`sx` with `styled`](/system/styled/#difference-with-the-sx-prop) diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.md b/docs/pages/blog/danail-hadjiatanasov-joining.md index 3cf6dbc427bcde..db42370f195d47 100644 --- a/docs/pages/blog/danail-hadjiatanasov-joining.md +++ b/docs/pages/blog/danail-hadjiatanasov-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Danail Hadjiatanasov has joined MUI as date: 2020-10-23T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined MUI as part of the enterprise team. This was his first full-time week. diff --git a/docs/pages/blog/danilo-leal-joining.md b/docs/pages/blog/danilo-leal-joining.md index f023f1ad5e9bb5..238c9d2ba99f39 100644 --- a/docs/pages/blog/danilo-leal-joining.md +++ b/docs/pages/blog/danilo-leal-joining.md @@ -4,10 +4,11 @@ description: We are excited to share that Danilo Leal has joined MUI. date: 2021-07-15T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI! -He started a couple of days ago as a lead designer. +He started a couple of days ago as a Lead Designer. Before joining MUI, he worked as a designer at Loggi, a Brazilian logistics unicorn. He has spent the last five years diving into product design, product strategy, and design systems. diff --git a/docs/pages/blog/december-2019-update.md b/docs/pages/blog/december-2019-update.md index 2b0efde8a49221..fd1638354905f7 100644 --- a/docs/pages/blog/december-2019-update.md +++ b/docs/pages/blog/december-2019-update.md @@ -1,11 +1,11 @@ --- +title: December 2019 Update description: Here are the most significant improvements in December. +date: 2020-01-07T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# December 2019 Update - -Olivier Tassinari. January 7, 2020. - Here are the most significant improvements in December: - 🚨 We have introduced a new [Alert](https://mui.com/components/alert/) component in the lab, thanks to **[@dimitropoulos](https://github.com/dimitropoulos)** ([#18702](https://github.com/mui-org/material-ui/pull/18702)). The component also supports composition with a [Snackbar](/components/snackbars/#customized-snackbars). diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.js b/docs/pages/blog/introducing-the-row-grouping-feature.js new file mode 100644 index 00000000000000..614562b92470a5 --- /dev/null +++ b/docs/pages/blog/introducing-the-row-grouping-feature.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-the-row-grouping-feature.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.md b/docs/pages/blog/introducing-the-row-grouping-feature.md new file mode 100644 index 00000000000000..68ba49fe196bba --- /dev/null +++ b/docs/pages/blog/introducing-the-row-grouping-feature.md @@ -0,0 +1,92 @@ +--- +title: 'Introducing the Row Grouping feature' +description: After more than a year of development on the DataGrid, the first premium feature is live. +date: 2022-01-20T00:00:00.000Z +authors: ['alexfauquette'] +tags: ['MUI X', 'News'] +--- + +A lot of you were asking about it, and we are pleased to announce that the Premium plan is on the road. +After an incredible year fully focused on improving the DataGrid, we are moving forward by launching the first feature of the Premium plan: the [row grouping](/components/data-grid/group-pivot/#row-grouping) which is released in [v5.3.0](https://github.com/mui-org/material-ui-x/releases/tag/v5.3.0). + +Let me introduce this new feature. + +## Start navigating the data 🚢 + +If you already use the pro plan, you may be familiar with the [tree data](/components/data-grid/group-pivot/#tree-data) which allows your users to navigate in the hierarchy by opening/closing children of a row. +However, everything does not have a natural hierarchy, and users might like to modify it. +Good news! +It is now possible with row grouping. + +Let's play with the top 250 movies according to IMDb. +There is not a clear hierarchy to organize movies. +Should you group them by director, box office results, or year of release? +The answer depends on what the user wants to do. +So let them be free to choose their own organization. +With the row grouping, they can go to the column menu of the “director” column and click on “Group by director” to group all the rows with the same director. +If they are not interested anymore in the director, they can simply click on “Stop grouping by director”. + +grouping and un-grouping by director + +## Unlock the feature 🔓🎁 + +This feature will be part of the Premium plan when we will launch it. For now, you can access it on the Pro plan by enabling an experimental feature. +The row grouping is stable in its current form. +The experimental flag is here to make sure that the Pro plan will not have any regression when the feature will be moved to the Premium plan. + +```js + +``` + +Congratulation! Your users are now able to use the row grouping 🎉. + +## Provide nice default grouping + +Save your user time by defining initial grouping. To do so, specify the row grouping model in the `initialState` prop. For a page about director's results, we could group by director, and box office as follows. + +```js + +``` + +Users are still free to modify this grouping configuration by going into the column menu. +But in a few clicks, you can see that Hitchcock's box office results vary a lot. + +remove groupable option + +## Cherry-pick the groupable columns 🍒 + +Before letting your users enjoy this new feature, let's adapt it to your use case. +All the columns are not good candidates for grouping. +In our movies example, grouping by title does not make sense since each movie has a different name. +You can remove the ability to group this specific column by setting the property `groupable` to `false` in the column definition. + +remove groupable option + +## Customize the grouping behavior 🔧 + +Some columns are interesting, but not that easy to group by. +For example, the release date of a movie is interesting, but grouping by the exact date leads to one group per movie (except for “The Thing” and “Blade Runner” both released on June 25, 1982). +It is more interesting to group them by decade. +For this purpose, the column definitions accept the property [`groupingValueGetter`](/components/data-grid/group-pivot/#using-groupingvaluegetter-for-complex-grouping-value). +Its signature is similar to `valueGetter` and it returns the grouping value associated to the column. To group movies by decade, you can use for example + +```js +groupingValueGetter: ({ value }) => `${Math.floor(value.getFullYear() / 10)}0's`; +``` + +grouping by release decade + +## Thank you + +More details about customization can be found in the [documentation](/components/data-grid/group-pivot/#disable-the-row-grouping) + +Thanks for reading. To get more information about the v5.3.0 release, visit the [changelog](https://github.com/mui-org/material-ui-x/releases/tag/v5.3.0). +We hope you will enjoy this new feature. Do not hesitate to open [issues](https://github.com/mui-org/material-ui-x/issues/new/choose) to share feedback, report bugs, or propose enhancements. diff --git a/docs/pages/blog/july-2019-update.md b/docs/pages/blog/july-2019-update.md index 235c11caa1083d..4684d0e94eb997 100644 --- a/docs/pages/blog/july-2019-update.md +++ b/docs/pages/blog/july-2019-update.md @@ -1,11 +1,11 @@ --- +title: July 2019 Update description: Here are the most significant improvements in July. +date: 2019-08-04T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# July 2019 Update - -Olivier Tassinari. August 4, 2019. - Here are the most significant improvements in July: - 🌳 We have introduced a new [Tree View component](/components/tree-view/) in the lab. Big thanks to Josh for it. diff --git a/docs/pages/blog/june-2019-update.md b/docs/pages/blog/june-2019-update.md index 6fb8b3817c3a42..c131b994cf8429 100644 --- a/docs/pages/blog/june-2019-update.md +++ b/docs/pages/blog/june-2019-update.md @@ -1,11 +1,11 @@ --- +title: June 2019 Update description: Here are the most significant improvements in June. +date: 2019-07-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# June 2019 Update - -Olivier Tassinari. July 8, 2019. - Here are the most significant improvements in June: - 💄 We have introduced a new [ButtonGroup](/components/buttons/#grouped-buttons) component. diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md index 4ea60690aeaa88..d3d7f94cb8487d 100644 --- a/docs/pages/blog/march-2019-update.md +++ b/docs/pages/blog/march-2019-update.md @@ -1,11 +1,11 @@ --- +title: March 2019 Update description: Here are the most significant improvements in March. +date: 2019-04-05T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# March 2019 Update - -Olivier Tassinari. April 5, 2019. - Here are the most significant improvements in March: - We have removed the old styles modules 💅. @@ -14,10 +14,12 @@ Here are the most significant improvements in March: - We have migrated a few demos from the `withStyles()` API to the `makeStyles()` API. If you are wondering which you should use, we would encourage the use of `makeStyles()` where possible. `withStyles()` is interesting for overriding component styles or for handling legacy class logics. - We have made the [Box API](/system/basics/) stable 🥳. + ```diff -import { unstable_Box as Box } from '@mui/material/Box'; +import Box from '@mui/material/Box'; ``` + - We have committed to [a new Roadmap](/discover-more/roadmap/) (prioritized) for the next 6 months. - We have migrated 50% of the codebase from the Classes API to the Hooks API. Once we are done with this task we can remove the internal usage of higher-order components. - We have introduced [a simplified server-side rendering API](/styles/advanced/#server-side-rendering), inspired by styled-components. diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md index b3e245b65713db..6c7b345ed20ec1 100644 --- a/docs/pages/blog/marija-najdova-joining.md +++ b/docs/pages/blog/marija-najdova-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Marija Najdova has joined MUI. She has date: 2020-09-15T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined MUI. She has started this week full-time, and is now part of the community team. diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md index 986226fcb773cc..61a517fe7f5046 100644 --- a/docs/pages/blog/material-ui-is-now-mui.md +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -3,6 +3,7 @@ title: Material-UI is now MUI! description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. date: 2021-09-16T00:00:00.000Z authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] +tags: ['Company update'] card: true --- @@ -12,6 +13,7 @@ Starting today we are evolving our brand identity to clarifying the difference b - Material-UI: the organization is now called [**MUI**](https://github.com/mui-org/). - Material-UI: the set of foundational MIT React components is now called [**MUI Core**](https://github.com/mui-org/material-ui). +- Material UI: the Material Design components developed by MUI. Also, we ditched the hyphen! - Material-UI X: the set of advanced React components is now called [**MUI X**](https://github.com/mui-org/material-ui-x). Our previous name was no longer serving our areas of focus. diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md index d8ee84b709ab64..f0521b9ca02fa5 100644 --- a/docs/pages/blog/material-ui-v1-is-out.md +++ b/docs/pages/blog/material-ui-v1-is-out.md @@ -1,18 +1,18 @@ --- -description: MUI v1 is out 🎉 +title: Material-UI v1 is out 🎉 +description: Material-UI v1 is out 🎉 +date: 2018-05-18T00:00:00.000Z +authors: ['oliviertassinari', 'mbrookes'] +tags: ['Company update'] --- -# MUI v1 is out 🎉 - -The core team. May 18, 2018. - > React components that implement Google's Material Design. ![Our new [documentation](https://mui.com/) header & logo by @hai-cea](https://cdn-images-1.medium.com/max/2050/1*BKssrX-qEmyN6YaRNTvNlw.png)

Our new documentation header & logo by @hai-cea

-It has taken us two years to do it, but MUI v1 has finally arrived! +It has taken us two years to do it, but Material-UI v1 has finally arrived! We are so excited about this release, as it's setting a new course for the project. Thank you to _everyone_, especially to [the team](/about/), and to everyone who's contributed code, issue triage, and support. **Thank you.** ✨✨✨ See the [**1.0.0 Release Note**](https://github.com/mui-org/material-ui/releases/tag/v1.0.0) on GitHub. ✨✨✨ @@ -23,12 +23,12 @@ We are so excited about this release, as it's setting a new course for the proje ## High-level Goals for v1 -MUI was started [3 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46) by [@hai-cea](https://github.com/hai-cea). The React ecosystem has evolved considerably since then, and we have also learned along the way. Two years ago, [@nathanmarks](https://github.com/nathanmarks/) [started](https://github.com/mui-org/material-ui/commit/cf0934dda2ef83852ca094ac7250e2d562ce6156) an ambitious task to rebuild MUI from the ground-up, taking advantage of this knowledge to address long-standing issues in customizability, ease of use, and code quality. +Material-UI was started [3 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46) by [@hai-cea](https://github.com/hai-cea). The React ecosystem has evolved considerably since then, and we have also learned along the way. Two years ago, [@nathanmarks](https://github.com/nathanmarks/) [started](https://github.com/mui-org/material-ui/commit/cf0934dda2ef83852ca094ac7250e2d562ce6156) an ambitious task to rebuild Material-UI from the ground-up, taking advantage of this knowledge to address long-standing issues in customizability, ease of use, and code quality. ### Customizability -MUI v1 is our second stab at the execution of [the vision](https://material-ui-next.com/discover-more/vision/). -We want MUI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. MUI is not only an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. We are even allowing developers to build non Material themes on top of MUI components. We will soon open source examples of this. +Material-UI v1 is our second stab at the execution of [the vision](https://material-ui-next.com/discover-more/vision/). +We want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. Material-UI is not only an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. We are even allowing developers to build non Material themes on top of Material-UI components. We will soon open source examples of this. - **CSS-in-JS**. We have seen [a great potential for **inline-styles** in the past](https://github.com/mui-org/material-ui/issues/30). It was an opportunity to solve four problems at once: removing the LESS toolchain dependency, allowing dynamic styles, allowing style code splitting and make overrides simpler. Unfortunately, the [**execution didn't deliver**](https://github.com/mui-org/material-ui/issues/4066). We were lacking key features only available in CSS: media queries, pseudo selectors, pseudo elements, browser prefixes. Debugging was much harder. Overriding styles was very challenging – developers always had to look the implementation, and couldn't use CSS without relying on !important. @@ -46,7 +46,7 @@ We know the ease of use is a critical part of user acquisition. The more user we - **Examples**. We are hosting [example projects](https://github.com/mui-org/material-ui/tree/master/examples) with the most popular solutions to start a project: [create-react-app](https://github.com/facebook/create-react-app), [Next.js](https://github.com/vercel/next.js), [Gatsby](https://github.com/gatsbyjs/gatsby), and CDN. -- **Isolation**. Our components now work in isolation. You should be able to use a single MUI component in an existing codebase without any side effect. No global CSS override needed, no bundle size bloat. +- **Isolation**. Our components now work in isolation. You should be able to use a single Material-UI component in an existing codebase without any side effect. No global CSS override needed, no bundle size bloat. - **Documentation**. We have made a huge investment in the documentation. We use [Next.js](https://github.com/vercel/next.js) for a blazingly fast navigation experience. It's also allowing us to provide a first server-side support for the components. We had added a search bar powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). (don't miss the s shortcut to focus the search bar). We have added many new documentation sections: guides, FAQ, etc. We have made the demos more interactive thanks to a direct integration with [CodeSandbox](https://codesandbox.io/s/4j7m47vlm4). @@ -54,13 +54,13 @@ We know the ease of use is a critical part of user acquisition. The more user we ### Code quality -Many people discover web development through MUI but it's also used in production to serve millions of customers. We have an important responsibility, our implementation needs to be rock solid. +Many people discover web development through Material-UI but it's also used in production to serve millions of customers. We have an important responsibility, our implementation needs to be rock solid. -- **Best practices.** We are following the best practices as much as possible. We have made the components: fully accessible, fully [HTML5 compliant ](https://validator.w3.org/)and SEO friendly. +- **Best practices.** We are following the best practices as much as possible. We have made the components: fully accessible, fully [HTML5 compliant](https://validator.w3.org/) and SEO friendly. -![[Lighthouse](https://github.com/GoogleChrome/lighthouse) report of the MUI documentation homepage](https://cdn-images-1.medium.com/max/2000/1*_x_j-jasswGw0WaDyeHk-g.png) +![[Lighthouse](https://github.com/GoogleChrome/lighthouse) report of the Material-UI documentation homepage](https://cdn-images-1.medium.com/max/2000/1*_x_j-jasswGw0WaDyeHk-g.png) -

Lighthouse report of the MUI documentation homepage

+

Lighthouse report of the Material-UI documentation homepage

- **Continuous integration.** Every single line of code is tested. We have an impressive [💯% test coverage](https://codecov.io/gh/mui-org/material-ui/branch/master). With more than 700 contributors, it's really important. All these tests allow us to quickly iterate and with confidence. We run the test suite runs on all the supported platforms. We also run more than [180 visual regression tests](https://www.argos-ci.com/mui-org/material-ui) thanks to [Argos-CI](https://www.argos-ci.com/). @@ -68,7 +68,7 @@ Many people discover web development through MUI but it's also used in productio

An example BrowserStack build

-- **Bundle size**. If you take all the MUI components, your bundle will weight more than 100 kB gzipped. MUI looks like a huge dependency but it's fine in practice with code splitting. You will most likely use ~40% of the library on a given page/screen. The bundle size is important. It's [constantly monitored](https://github.com/mui-org/material-ui/blob/ca69253843208c21593fff230151e1fffd93a566/.size-limit), which prevents us from introducing size regressions, and allows us to recognize positive efforts. +- **Bundle size**. If you take all the Material-UI components, your bundle will weight more than 100 kB gzipped. Material-UI looks like a huge dependency but it's fine in practice with code splitting. You will most likely use ~40% of the library on a given page/screen. The bundle size is important. It's [constantly monitored](https://github.com/mui-org/material-ui/blob/ca69253843208c21593fff230151e1fffd93a566/.size-limit), which prevents us from introducing size regressions, and allows us to recognize positive efforts. ![An example of [size-limit](https://github.com/ai/size-limit) output](https://cdn-images-1.medium.com/max/2000/1*AQoyq9OvjFZJE2Ep0UtCzA.png) @@ -104,7 +104,7 @@ There are so many new things, we can't be exhaustive. Aside from what we have al ## Premium themes -We have shipped the long-awaited MUI v1 stable release. With a new codebase designed to better support customization, it's the perfect timing to start building and promoting premium themes. We are very happy to announce [the first two](https://mui.com/store/) from [Creative Tim](https://mui.com/store/contributors/creative-tim/). More are coming. +We have shipped the long-awaited Material-UI v1 stable release. With a new codebase designed to better support customization, it's the perfect timing to start building and promoting premium themes. We are very happy to announce [the first two](https://mui.com/store/) from [Creative Tim](https://mui.com/store/contributors/creative-tim/). More are coming. ![Creative Tim themes](https://cdn-images-1.medium.com/max/2000/1*jPOu6n1EMsqv4Gh652MtPA.png) @@ -116,19 +116,15 @@ We have shipped the long-awaited MUI v1 stable release. With a new codebase desi ## Thank you -Finally, one last thank you to everyone who's contributed to MUI v1. +Finally, one last thank you to everyone who's contributed to Material-UI v1. I'm so excited at the idea we are making it stable, but rest assured, it's just the beginning. We will keep working hard on delivering the best possible UI library components. -MUI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). If you'd like to join them, please consider: +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). If you'd like to join them, please consider: -- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari). - [Become a backer or sponsor on OpenCollective](https://opencollective.com/mui). +- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari). ![Our gold sponsors](https://cdn-images-1.medium.com/max/2000/1*fx_BaOxYY0ZJo3n9iXI1Jg.png)

Our gold sponsors

-- GitHub: [https://github.com/mui-org/material-ui](https://github.com/mui-org/material-ui) ⭐️ -- Twitter: [https://twitter.com/MaterialUI](https://twitter.com/MaterialUI) - -
- -_You can find the [same post on Medium](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb)._ +- GitHub: https://github.com/mui-org/material-ui ⭐ +- Twitter: https://twitter.com/MUI_hq diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index 01fd2c3c8100fc..fef651aa112ddb 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -1,14 +1,14 @@ --- -description: MUI v4 is out 🎉 +title: Material-UI v4 is out 🎉 +description: Material-UI v4 is out 🎉 +date: 2019-05-23T00:00:00.000Z +authors: ['oliviertassinari', 'mbrookes', 'eps1lon'] +tags: ['Company update'] --- -# MUI v4 is out 🎉 - -The core team. May 23, 2019. - > React components for faster and simpler web development. Build your own design system, or start with Material Design. -MUI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. Thank you to everyone, especially to [the team](/about/), and to everyone who's contributed code, issue triage, and support. **Thank you.** +Material-UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. Thank you to everyone, especially to [the team](/about/), and to everyone who's contributed code, issue triage, and support. **Thank you.** ✨✨✨ See the **[4.0.0 Release Note](https://github.com/mui-org/material-ui/releases/tag/v4.0.0)** on GitHub. ✨✨✨ @@ -18,14 +18,14 @@ MUI v4 has finally arrived. We are so excited about this release, as it defines ## Summary -- [High-level goals for v4](#high-level-goals-for-v4) +- [High-level goals for v4](#high-level-goals-for-v4) - [What's new?](#whats-new) - [What's next?](#whats-next) - [Premium themes store](#premium-themes-store) -## High-level goals for v4 +## High-level goals for v4 -MUI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change. +Material-UI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change. This release happens within our [fixed frequency](https://mui.com/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/guides/migration-v3/) 📚. It shouldn't take more than a few hours. @@ -49,22 +49,22 @@ The Material Design team at Google has made the customization of their design sy After listening to v3 customization experiences of hundreds of developers, we realized that we could do better. We have found 4 classes of common problems. -- **CSS specificity**. The developers' style specificity needs to be higher to win over the style MUI injects in the page. By default, MUI injects its style at the end of the `` element. However, styled components and other popular styling solutions inject the style just before it, losing specificity. To solve the problem, we have introduced a new prop: `injectFirst`. +- **CSS specificity**. The developers' style specificity needs to be higher to win over the style Material-UI injects in the page. By default, Material-UI injects its style at the end of the `` element. However, styled components and other popular styling solutions inject the style just before it, losing specificity. To solve the problem, we have introduced a new prop: `injectFirst`. ```jsx import { StylesProvider } from '@mui/styles'; {/* Your component tree. - Styled components can override MUI's styles. */} + Styled components can override Material-UI's styles. */} ; ``` ![injectFirst](/static/blog/material-ui-v4-is-out/injectFirst.png) -

The DOM output once injectFirst is used.

+

The DOM output once injectFirst is used.

-- **classes boilerplate**. Early in the v1 effort, we [decided](https://github.com/oliviertassinari/a-journey-toward-better-style) to use a CSS-in-JS styling solution: [JSS](https://cssinjs.org/). The large majority of the CSS-in-JS solutions output non-deterministic class names, e.g. `.fHmkjM`. This design decision helps the isolation of the style of each component, however, it makes the overrides harder. We introduced a `classes` API in v1 to target all our elements as an attempt to mitigate this problem. +- **classes boilerplate**. Early in the v1 effort, we [decided](https://github.com/oliviertassinari/a-journey-toward-better-style) to use a CSS-in-JS styling solution: [JSS](https://cssinjs.org/). The large majority of the CSS-in-JS solutions output non-deterministic class names, e.g. `.fHmkjM`. This design decision helps the isolation of the style of each component, however, it makes the overrides harder. We introduced a `classes` API in v1 to target all our elements as an attempt to mitigate this problem. We have observed the use of this API for months and have seen many people struggling with it. It can be challenging to apply the class name on the right element and requires boilerplate as well. As an attempt to further improve the situation, we have changed the class name generation to [output global class names](/styles/advanced/#with-material-ui-core), while keeping the `classes` API working as before 💅. @@ -74,7 +74,7 @@ import { StylesProvider } from '@mui/styles'; ⚠️ Using global class names provide more power but comes with responsibility. We encourage patterns that increase your custom style isolation. -- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, MUI can't use a pseudo-class as the state doesn't exist in the platform, e.g. the selected state of a menu item. MUI implements support of eight different [custom pseudo-classes](/customization/how-to-customize/#state-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance: +- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, Material-UI can't use a pseudo-class as the state doesn't exist in the platform, e.g. the selected state of a menu item. Material-UI implements support of eight different [custom pseudo-classes](/customization/how-to-customize/#state-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance: ```css .MenuItem { @@ -117,17 +117,17 @@ function MyComponent() { Documentation was reported as the 3rd most critical pain point in the developer survey. We have fixed some of the reported issues and aim to continuously improve going forward. -- **TypeScript**. TypeScript's growth is impressive, the traffic of their documentation website has grown by a factor of 6 in 3 years. MUI v1 was released with built-in TypeScript definitions, but we needed to do more. Sebastian has led the effort to migrate all the demos from JavaScript to TypeScript. This has two important implications. First, we type check our demos, this drastically improves our TypeScript test coverage. We have fixed many issues during the migration. Second, if you are writing your application with TypeScript, you can directly copy & paste our demos without needing to convert them, or having to fix the obscure errors. +- **TypeScript**. TypeScript's growth is impressive, the traffic of their documentation website has grown by a factor of 6 in 3 years. Material-UI v1 was released with built-in TypeScript definitions, but we needed to do more. Sebastian has led the effort to migrate all the demos from JavaScript to TypeScript. This has two important implications. First, we type check our demos, this drastically improves our TypeScript test coverage. We have fixed many issues during the migration. Second, if you are writing your application with TypeScript, you can directly copy & paste our demos without needing to convert them, or having to fix the obscure errors. ![typescript](/static/blog/material-ui-v4-is-out/typescript.png) -

https://www.typescriptlang.org traffic estimation over time.

+

https://www.typescriptlang.org traffic estimation over time.

![switch](/static/blog/material-ui-v4-is-out/switch.png)

Use the JS/TS toggle to see code in JavaScript or TypeScript

-- **i18n**. Developers come to MUI's documentation from all around the world. We want to include as many people as possible 🌎🌍🌏. We have completed the effort started in v3 by working on the Algolia search support, Google search indexing, Table Of Contents and Side Nav infrastructure. +- **i18n**. Developers come to Material-UI's documentation from all around the world. We want to include as many people as possible 🌎🌍🌏. We have completed the effort started in v3 by working on the Algolia search support, Google search indexing, Table Of Contents and Side Nav infrastructure. We would like to thank [Danica Shen](https://github.com/DDDDDanica), [Dominik Engel](https://github.com/Domino987), and [Jairon Alves Lima](https://github.com/jaironalves) for their heroic work on the 🇨🇳, 🇩🇪 and 🇧🇷 translations, while not forgetting the other 348 (and growing) translators. @@ -136,9 +136,9 @@ Documentation was reported as the 3rd most critical pain point in the developer ### Performance -You may be afraid that using MUI's components will bloat and slow down your website/application. Would you be better off writing your own components? Well, it's our mission to make this cost as minimal as possible 🚀. +You may be afraid that using Material-UI's components will bloat and slow down your website/application. Would you be better off writing your own components? Well, it's our mission to make this cost as minimal as possible 🚀. -- **Tree shaking**. MUI v4 is the first version to support native tree shaking with ES modules. This has one important DX benefit—you can now use destructured imports when importing multiple components: +- **Tree shaking**. Material-UI v4 is the first version to support native tree shaking with ES modules. This has one important DX benefit—you can now use destructured imports when importing multiple components: ```js import { @@ -155,22 +155,22 @@ import { ![bundle-size](/static/blog/material-ui-v4-is-out/bundle-size.png) -

A -15% bundle size reduction. ⚠️ Please don't use the absolute number to compare different UI libraries. Nobody should import the whole barrel index.js file. What matters is the cost of the individual modules you import.

+

A -15% bundle size reduction. ⚠️ Please don't use the absolute number to compare different UI libraries. Nobody should import the whole barrel index.js file. What matters is the cost of the individual modules you import.

- **Continuous bundle size tracking**. This bundle size reduction is only possible because we track this metric in each pull request. We have improved our strategy moving from [size-limit](https://github.com/ai/size-limit) to a React [inspired solution](https://github.com/mui-org/material-ui/pull/14662). ![trackbundle](/static/blog/material-ui-v4-is-out/trackbundle.png) -

Fine level tracking

+

Fine level tracking

- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui-org/material-ui/blob/HEAD/examples/preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it. -- **Runtime performance**. We have heard that some people struggle with the runtime cost of using MUI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui-org/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5. +- **Runtime performance**. We have heard that some people struggle with the runtime cost of using Material-UI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui-org/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5. -### Preparing for the future +### Preparing for the future -MUI v4 depends on React ≥16.8.0. This is the first version of React that supports the [new Hooks API](https://reactjs.org/docs/hooks-intro.html). +Material-UI v4 depends on React ≥16.8.0. This is the first version of React that supports the [new Hooks API](https://reactjs.org/docs/hooks-intro.html). -- **Ref forwarding**. Most of the time, you use the `ref` prop to access the underlying DOM node of a React element. You might want to focus an element, compute the position of an element, and so on. You should never need to access a MUI component's instance methods, they are considered private. The components expose an `action` when it's really needed. For instance, you might want to update the tab indicator position when it goes out of sync with the tab item position. To ease this use case, Sebastian has lead an effort to implement [`React.forwardRef()`](https://reactjs.org/docs/react-api.html#reactforwardref). In practice, this means that you can retrieve a reference to the DOM node like you would do with a built-in component (`button`, `div`, etc.): +- **Ref forwarding**. Most of the time, you use the `ref` prop to access the underlying DOM node of a React element. You might want to focus an element, compute the position of an element, and so on. You should never need to access a Material-UI component's instance methods, they are considered private. The components expose an `action` when it's really needed. For instance, you might want to update the tab indicator position when it goes out of sync with the tab item position. To ease this use case, Sebastian has lead an effort to implement [`React.forwardRef()`](https://reactjs.org/docs/react-api.html#reactforwardref). In practice, this means that you can retrieve a reference to the DOM node like you would do with a built-in component (`button`, `div`, etc.): ```jsx import { Button } from '@mui/material'; @@ -187,7 +187,7 @@ function MyButton() { Not all [the platforms we support](/getting-started/supported-platforms/) can use the class API natively, so we transpile the syntax with Babel. Functions are supported everywhere, they require fewer line of code. We have observed a -2% gzipped bundle reduction by removing the need to transpile classes. - It reduces the noise in the React Dev Tools ⚛️, since we could reduce the number of intermediary elements from 5 to 2 in the most common cases.  + It reduces the noise in the React Dev Tools ⚛️, since we could reduce the number of intermediary elements from 5 to 2 in the most common cases. We have found the hooks API easier to work with: to write, to read, and to change. This is a net positive for everyone's productivity. Developers read our source to find inspiration, so we should do our best to promote the best patterns. @@ -202,15 +202,15 @@ function MyButton() { Most of our users are interested in the good looking functional aspect of our components, rather than in a strict application of the Material Design guidelines. However, we think that it's important for us to keep up to date with the guidelines. The specification received it's most significant update since Google made it the design language for its apps in 2014, at [Google I/O 2018](https://design.google/library/io-2018-our-definitive-guide-design/). -The Material Design "v2" announcement caught us by surprise when we released MUI v1. We have worked on upgrading our components since then. In v4, we have updated the styles of the Tab, Snackbar, Checkboxes, Radios, Switches, List, Dialog, and other components ✨. +The Material Design "v2" announcement caught us by surprise when we released Material-UI v1. We have worked on upgrading our components since then. In v4, we have updated the styles of the Tab, Snackbar, Checkboxes, Radios, Switches, List, Dialog, and other components ✨. ![material1](/static/blog/material-ui-v4-is-out/material1.png) -

Dense Outlined text field

+

Dense Outlined text field

![material2](/static/blog/material-ui-v4-is-out/material2.png) -

Dense Filled text field

+

Dense Filled text field

## What's new? @@ -221,7 +221,7 @@ There are so many new things, we can't be exhaustive. Aside from what we have al ![layout](/static/blog/material-ui-v4-is-out/layout.png) -

One example among others

+

One example among others

- [Responsive font sizes.](/customization/typography/#responsive-font-sizes) @@ -237,7 +237,7 @@ An application example of the Box component. ![Spacing usage example](/static/blog/material-ui-v4-is-out/spacing.png) -An example of the new spacing helper API. +An example of the new spacing helper API. - A new [@material-ui/pickers](https://github.com/mui-org/material-ui-pickers) package created and supported by [Dmitriy Kovalenko](https://github.com/dmtrKovalenko) 📅. @@ -308,23 +308,23 @@ import { Button } from '@mui/material'; ; ``` -- **Styled components.** We have seen many people asking for migration to styled components. We want MUI v5 to be better aligned with the community's best-loved tools, but at the same time, we don't want to break your code. - So we will work on isolating the components from the styling solution. The new _@mui/styles_ package is the first step in this direction. We envision a world where you can use MUI styled with styled components, linaria, and JSS or without any styles. +- **Styled components.** We have seen many people asking for migration to styled components. We want Material-UI v5 to be better aligned with the community's best-loved tools, but at the same time, we don't want to break your code. + So we will work on isolating the components from the styling solution. The new _@mui/styles_ package is the first step in this direction. We envision a world where you can use Material-UI styled with styled components, linaria, and JSS or without any styles. Developers should be able to use their preferred styling solution without paying the cost of two CSS-in-JS runtimes. - **Accessibility.** While we try to fix all accessibility issues as they are reported by our users, we feel that we can do better. We want to run a professional ADA audit of all our components ♿️. -## Premium themes store ✨ +## Premium themes store ✨ How are we going to sustain this ambitious roadmap? We will follow the Bootstrap model. We are working on [a Premium themes store](https://mui.com/store/). We have built partnerships with the best theme authors of the ecosystem. -Within a few weeks, you should find a collection of the best MUI templates and themes 😍. +Within a few weeks, you should find a collection of the best Material-UI templates and themes 😍. ## Thank you -Finally, one last thank you to everyone who's contributed to MUI v4.  +Finally, one last thank you to everyone who's contributed to Material-UI v4. I'm so excited about this release! It's just the beginning. We will keep working hard on delivering the best possible React UI framework components.
diff --git a/docs/pages/blog/matheus-wichman-joining.md b/docs/pages/blog/matheus-wichman-joining.md index fcf2863fa4169c..cafc8512914b7a 100644 --- a/docs/pages/blog/matheus-wichman-joining.md +++ b/docs/pages/blog/matheus-wichman-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Matheus Wichman has joined MUI. date: 2021-04-05T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined MUI. @@ -22,7 +23,7 @@ Matheus is the first of a series of 5 new positions we have recently opened and We will cross the 10 person milestone in the coming weeks. We have opened these positions as our revenue growth allows. At the current pace, we will soon open new positions. -You can [follow us on Twitter](https://twitter.com/MaterialUI) to hear about upcoming positions. +You can [follow us on Twitter](https://twitter.com/MUI_hq) to hear about upcoming positions. 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 Matheus on the team! diff --git a/docs/pages/blog/may-2019-update.md b/docs/pages/blog/may-2019-update.md index c5b40607fb68f0..0af8a828a08352 100644 --- a/docs/pages/blog/may-2019-update.md +++ b/docs/pages/blog/may-2019-update.md @@ -1,15 +1,15 @@ --- +title: May 2019 Update description: Here are the most significant improvements in May. +date: 2019-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# May 2019 Update - -Olivier Tassinari. June 8, 2019. - Here are the most significant improvements in May: - 🎉 We released MUI v4 stable during the React Europe conference. - You can find the details in our [blog post 📝](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) and a quick introduction in this [5 minutes talk](https://www.youtube.com/watch?v=m54_CPfbWow). + You can find the details in our [blog post 📝](https://mui.com/blog/material-ui-v4-is-out/) and a quick introduction in this [5 minutes talk](https://www.youtube.com/watch?v=m54_CPfbWow). - 🐛 We have made two subsequent releases after v4.0.0, containing a significant number of fixes (v4.0.1 and v4.0.2). But this summary is just scratching the surface. We have accepted 206 commits from 78 different contributors. We have changed 3,031 files with 96,616 additions and 85,768 deletions. diff --git a/docs/pages/blog/michal-dudak-joining.md b/docs/pages/blog/michal-dudak-joining.md index 34b23418ad60bf..3f98dc5b3eb6f8 100644 --- a/docs/pages/blog/michal-dudak-joining.md +++ b/docs/pages/blog/michal-dudak-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Michał Dudak has joined MUI. date: 2021-06-14T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Michał Dudak](https://twitter.com/michaldudak) has joined MUI! diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 14c734ae538a9f..3471e5543f8277 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -13,6 +13,7 @@ authors: 'mbrookes', ] card: true +tags: ['News'] --- After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://github.com/mui-org/material-ui/releases/tag/v5.0.0)! @@ -335,7 +336,7 @@ But what about the medium/large size engineering team that works on ambitious pr We have started working on this exact problem, isolating the logic of the Material Design components into hooks and unstyled components. -While the effort is still in alpha, you can already find the first building blocks in a new unstyled package. +While the effort is still in alpha, you can already find the first building blocks in a new Base package. So far it features: @@ -727,7 +728,7 @@ You can read more about them in [the docs](/customization/unstyled-components/) Our high-level plan is to use the unstyled components and hooks as the basis of the Material components and second design system. We are aiming to complete this work with the next major release (v6). -As of now, you can evaluate the unstyled primitives in a new unstyled package, or check out the next implementation of the Material Design components in the `@mui/material-next` package (targeted at v6). +As of now, you can evaluate the unstyled primitives in a new Base package, or check out the next implementation of the Material Design components in the `@mui/material-next` package (targeted at v6). Please note that both packages are in an alpha state so that we can release breaking changes – we want to take the opportunity to create the best APIs we possibly can. diff --git a/docs/pages/blog/mui-x-v5.md b/docs/pages/blog/mui-x-v5.md index d60a1c82eb3419..22994c73e1d8c9 100644 --- a/docs/pages/blog/mui-x-v5.md +++ b/docs/pages/blog/mui-x-v5.md @@ -5,6 +5,7 @@ date: 2021-11-22T00:00:00.000Z authors: ['oliviertassinari', 'm4theushw', 'flaviendelangle', 'DanailH', 'alexfauquette'] card: true +tags: ['News'] --- We are excited to introduce [MUI X v5.0.0](https://github.com/mui-org/material-ui-x/releases/tag/v5.0.0)! @@ -38,7 +39,7 @@ This approach recognizes that the problems solved by the components in these two The paths to success require different strategies. Many of the developers using MUI X also use MUI Core, these users care a lot about consistency (design, docs, dependencies, etc.). -With the [release of MUI Core v5](/blog/mui-core-v5) two months ago MUI X had to work on providing a cohesive experience. +With the [release of MUI Core v5](/blog/mui-core-v5/) two months ago MUI X had to work on providing a cohesive experience. The primary objective of this new major is to have MUI X provide a great **compatibility with MUI Core v5**. ## A new virtualization engine @@ -183,7 +184,7 @@ export default function App() { } ``` -#### Limitations +### Limitations Although this was a clear improvement, we still had to keep a CSS specificity of 2 for some parts of the `DataGrid` and `DataGridPro`, specifically the `GridColumnHeaderItem`, `GridRow` and `GridCell` along with all of the components that are nested in them. This is due to performance implications related to how [emotion](https://emotion.sh/) injects styles into the page, diff --git a/docs/pages/blog/november-2019-update.md b/docs/pages/blog/november-2019-update.md index a828aca3f71a5c..73c555e8423d43 100644 --- a/docs/pages/blog/november-2019-update.md +++ b/docs/pages/blog/november-2019-update.md @@ -1,11 +1,11 @@ --- +title: November 2019 Update description: Here are the most significant improvements in November. +date: 2019-12-12T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# November 2019 Update - -Olivier Tassinari. December 12, 2019. - Here are the most significant improvements in November: - 🔍 We have polished the newly introduced Autocomplete component (October). @@ -24,9 +24,9 @@ Here are the most significant improvements in November: - 🌎 We have introduced [localization](/guides/localization/) support. The framework supports [13 locales](/guides/localization/#supported-locales), and growing. We would love to see your translation contribution ✨. -- 👨‍🎤 We have added [Framer X](https://packages.framer.com/package/material-ui/material-ui) support ([#17797](https://github.com/mui-org/material-ui/pull/17797)) (and now looking into Sketch, Figma and Adobe XD). +- 👨‍🎤 We have added Framer X support ([#17797](https://github.com/mui-org/material-ui/pull/17797)) (and now looking into Sketch, Figma and Adobe XD). - Framer X + Framer X - ⚛️ We have completed the migration of the demos to TypeScript. A big thanks to all the contributors that participated in [this effort](https://github.com/mui-org/material-ui/issues/14897). Around 10% of the audience on the documentation uses this version of the demos and growing. diff --git a/docs/pages/blog/october-2019-update.md b/docs/pages/blog/october-2019-update.md index 2fa15024cdd7f9..186ab04f0eb76e 100644 --- a/docs/pages/blog/october-2019-update.md +++ b/docs/pages/blog/october-2019-update.md @@ -1,11 +1,11 @@ --- +title: October 2019 Update description: Here are the most significant improvements in October. +date: 2019-11-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# October 2019 Update - -Olivier Tassinari. November 8, 2019. - Here are the most significant improvements in October: - 🔍 We have introduced a new autocomplete / combo box / multi-select component [in the lab](/components/autocomplete/). diff --git a/docs/pages/blog/september-2019-update.md b/docs/pages/blog/september-2019-update.md index 9e7f1f96251356..745eab59c9036d 100644 --- a/docs/pages/blog/september-2019-update.md +++ b/docs/pages/blog/september-2019-update.md @@ -1,11 +1,11 @@ --- +title: September 2019 Update description: Here are the most significant improvements in September. +date: 2019-10-12T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Company update'] --- -# September 2019 Update - -Olivier Tassinari. October 12, 2019. - Here are the most significant improvements in September: - 💄 Add `startIcon` and `endIcon` props for the button. It makes it simpler to append an icon: diff --git a/docs/pages/blog/siriwat-kunaporn-joining.md b/docs/pages/blog/siriwat-kunaporn-joining.md index 821277c081437e..5576db7863e85c 100644 --- a/docs/pages/blog/siriwat-kunaporn-joining.md +++ b/docs/pages/blog/siriwat-kunaporn-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Siriwat Kunaporn has joined MUI. date: 2021-05-17T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined MUI. diff --git a/docs/pages/blog/spotlight-damien-tassone.md b/docs/pages/blog/spotlight-damien-tassone.md index fe1424c1b54a2e..e7a01a28b86fa4 100644 --- a/docs/pages/blog/spotlight-damien-tassone.md +++ b/docs/pages/blog/spotlight-damien-tassone.md @@ -2,8 +2,9 @@ title: A spotlight on Damien Tassone joining the team description: Damien Tassone has joined MUI. He's the first full-time member to focus on enterprise components. date: 2020-09-15T00:00:00.000Z -authors: ['oliviertassinari"] +authors: ['oliviertassinari'] card: true +tags: ['Team'] --- A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined MUI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly. diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index 4433cd4144844d..725f8795d6c110 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -7,11 +7,11 @@ import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; +import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded'; import Link from 'docs/src/modules/components/Link'; -import MuiLink from '@mui/material/Link'; import AppHeader from 'docs/src/layouts/AppHeader'; import AppFooter from 'docs/src/layouts/AppFooter'; import MuiStatistics from 'docs/src/components/home/MuiStatistics'; @@ -35,8 +35,7 @@ function Role(props: RoleProps) { if (props.url) { return ( - - More about this role - + ); } @@ -139,63 +145,86 @@ const faqData = [ const openRolesData = [ { - title: 'Engineering', - roles: [], - }, - { + // 1 title: 'Product', roles: [ { - title: 'Technical Product Manager - MUI X', + title: 'Designer', description: - 'You will define and maintain the product roadmap for the advanced components, identify opportunities, define specs, and work with engineers to execute on the features. Experience as an engineer is essential for this role, as you will also contribute to development work in the beginning.', - url: '/company/technical-product-manager/', + 'Design is critical to the success of our mission. We are looking for skills that complement our Lead Designer. You will empower our audience that seeks to build outstanding-looking UIs with new tools.', + url: '/company/designer/', }, + ], + }, + { + // 5 + title: 'Developer Experience', + roles: [ { - title: 'Developer Advocate', + title: 'Support Engineer - X', description: - 'You will educate users on the latest features, craft high-quality examples and demos, engage with the community, write documentation, advocate for creating faster and more appealing UIs, and help to promote/market the advanced components.', - url: '/company/developer-advocate/', + "You will provide support to users for the advanced components team. You will directly impact developers' satisfaction and success.", + url: '/company/support-engineer/', + }, + { + title: 'Developer Experience Engineer', + description: 'You will focus on providing experiences that delight developers using MUI.', + url: '/company/developer-experience-engineer/', }, ], }, -]; - -const futureRolesData = [ { - title: 'Operations', + // 2 + title: 'Engineering', roles: [ { - title: 'Head of talent', + title: 'React Engineer - X', description: - 'Recruit an exceptional team and lay the foundations for a modern corporation. We will be looking for a self-starter who acts as a strategic designer, builder, and champion for our engineering-centric and customer-oriented culture. They will serve as part of the company’s leadership team, collaborating to continuously evolve our high-performance, high-engagement crew.', + 'You will strengthen the advanced components team, build new ambitious complex features, work on strategic problems, and help grow the adoption.', + url: '/company/react-engineer/', + }, + { + title: 'Hustler Engineer - Store', + description: 'You will lead the technical and operational development of MUI Store.', + url: '/company/hustler-engineer/', }, ], }, { - title: 'Engineering', + // 3 + title: 'People', roles: [ { - title: 'Full-stack Engineer', + title: 'People Operations Manager', description: - 'You will initiate the development of a bold new product vertical. We are looking for an experienced and ambitious full-stack engineer that is ready to work in an entrepreneurial environment. You are a manager of one, you are curious, enjoy taking risks, and learning.', - url: '/company/full-stack-engineer/', + 'You will build the HR function from the ground up at a high-growth tech company.', + url: '/company/people-operations-manager/', }, + ], + }, + { + // 4 + title: 'Support', + roles: [ { - title: 'React Engineer', + title: 'Support Agent - Store', description: - 'You will support the advanced components team, build new ambitious complex features, work on strategic problems, and help grow the adoption of the free open-source tier (freemium/open-core business model).', - url: '/company/react-engineer/', + "You will provide support for the customers of MUI Store. You will directly impact customers' satisfaction and success.", + url: '/company/support-agent/', }, ], }, +]; + +const futureRolesData = [ { - title: 'Product', + title: 'Engineering', roles: [ { - title: 'Product Designer', + title: 'Full-stack Engineer', description: - 'Design is critical to the success of our mission. We will be looking for skills that complement our lead designer. It could be a graphic designer or a UX expert for instance, depending on our exact needs.', + 'You will strengthen the team working on a new low-code product. We are looking for an experienced and ambitious full-stack engineer that is ready to work in an entrepreneurial environment. You are a manager of one, you are curious, enjoy taking risks, and learning.', + url: undefined, }, ], }, @@ -303,9 +332,9 @@ function CareersContent() { {/* Perks & benefits */}
- + - + {'Perks & benefits'} @@ -333,53 +362,59 @@ function CareersContent() { ))} - - - - Handbook - - - See how we run the company and the way we work. - - (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')} - variant="body2" - fontWeight="bold" + + + - Learn more{' '} - - - - - - - - Blog - - - Check behind the scenes and news from the company. - - (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')} - variant="body2" - fontWeight="bold" + + Handbook + + + See how we run the company and the way we work. + + + theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600' + } + variant="body2" + fontWeight="bold" + > + Learn more{' '} + + + + + + - Learn more{' '} - - - + + Blog + + + Check behind the scenes and news from the company. + + + theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600' + } + variant="body2" + fontWeight="bold" + > + Learn more{' '} + + + + @@ -388,12 +423,13 @@ function CareersContent() {
- Open roles + {`Open roles (${openRolesData.reduce((acc, item) => acc + item.roles.length, 0)})`} - - The company is bootstrapped (so far). It was incorporated in mid-2019 and yet growing - fast (x2-3 YoY). We doubled the team in 2020 (6), are on track to tripled it in 2021 - (18). We're looking for help keep growing in the following areas: + + The company is bootstrapped (up to now). It was incorporated in mid-2019 and yet growing + fast (x2-3 YoY). We doubled the team in 2020 (6), accelerated in 2021 (16), and are on + track to triple it in 2022 (40). We're looking for help keep growing in the + following areas:
{ const roles = category.roles; return ( - + {category.title} {roles.length > 0 ? ( roles.map((role) => ( - + )) ) : ( No open roles. @@ -464,13 +505,18 @@ function CareersContent() { {futureRolesData.map((category) => { const roles = category.roles; return ( - + {category.title} {roles.length > 0 ? ( roles.map((role) => ( - + )) ) : ( No plans yet. @@ -512,7 +558,7 @@ function CareersContent() { We're to help you with any other question you have about our hiring process. - + Contact us diff --git a/docs/pages/company/product-manager.js b/docs/pages/company/designer.js similarity index 78% rename from docs/pages/company/product-manager.js rename to docs/pages/company/designer.js index 728fe0119fff9d..97f83ae591f5ae 100644 --- a/docs/pages/company/product-manager.js +++ b/docs/pages/company/designer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/product-manager.md?@mui/markdown'; +} from 'docs/src/pages/company/careers/designer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/developer-experience-engineer.js b/docs/pages/company/developer-experience-engineer.js new file mode 100644 index 00000000000000..25c756ac82c34c --- /dev/null +++ b/docs/pages/company/developer-experience-engineer.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; +import { + demos, + docs, + demoComponents, +} from 'docs/src/pages/company/careers/developer-experience-engineer.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/company/full-stack-engineer.js b/docs/pages/company/hustler-engineer.js similarity index 78% rename from docs/pages/company/full-stack-engineer.js rename to docs/pages/company/hustler-engineer.js index c3f2e7d29dfaf4..9417426ac84633 100644 --- a/docs/pages/company/full-stack-engineer.js +++ b/docs/pages/company/hustler-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/full-stack-engineer.md?@mui/markdown'; +} from 'docs/src/pages/company/careers/hustler-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/technical-product-manager.js b/docs/pages/company/people-operations-manager.js similarity index 76% rename from docs/pages/company/technical-product-manager.js rename to docs/pages/company/people-operations-manager.js index 926b5af56dab5e..83f91e9f203b78 100644 --- a/docs/pages/company/technical-product-manager.js +++ b/docs/pages/company/people-operations-manager.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/technical-product-manager.md?@mui/markdown'; +} from 'docs/src/pages/company/careers/people-operation-manager.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/about.js b/docs/pages/company/support-agent.js similarity index 66% rename from docs/pages/company/about.js rename to docs/pages/company/support-agent.js index 4106b1372bd409..01ac510eb78faa 100644 --- a/docs/pages/company/about.js +++ b/docs/pages/company/support-agent.js @@ -1,6 +1,10 @@ import * as React from 'react'; import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; -import { demos, docs, demoComponents } from 'docs/src/pages/company/about/about.md?@mui/markdown'; +import { + demos, + docs, + demoComponents, +} from 'docs/src/pages/company/careers/support-agent.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/support-engineer.js b/docs/pages/company/support-engineer.js new file mode 100644 index 00000000000000..addcded07a9b96 --- /dev/null +++ b/docs/pages/company/support-engineer.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; +import { + demos, + docs, + demoComponents, +} from 'docs/src/pages/company/careers/support-engineer.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/experiments/joy/button.tsx b/docs/pages/experiments/joy/button.tsx new file mode 100644 index 00000000000000..5691a465a8e6d4 --- /dev/null +++ b/docs/pages/experiments/joy/button.tsx @@ -0,0 +1,650 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Typography from '@mui/joy/Typography'; +import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import Add from '@mui/icons-material/Add'; +import DeleteForever from '@mui/icons-material/DeleteForeverOutlined'; +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; +import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; +import ThumbUp from '@mui/icons-material/ThumbUp'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function JoyButton() { + const buttonProps = { + variant: ['text', 'outlined', 'light', 'contained'], + color: ['primary', 'neutral', 'danger', 'info', 'success', 'warning'], + size: ['sm', 'md', 'lg'], + } as const; + return ( + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + + + + {Object.entries(buttonProps).map(([propName, propValue]) => ( + + + {propName} + + {propValue.map((value) => ( + + + + {value || 'default'} + + + ))} + + ))} + + + square + + + + + 40x40 + + + + + + 32x32 + + + + + + 48x48 + + + + + + + + start & end icon + + + + + + + + + + {/* Danilo's not smart iteration below 😅 - wanted to see each color with every variant. */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/pages/experiments/joy/components.tsx b/docs/pages/experiments/joy/components.tsx index 321e02d649ed06..91a07d4d2f60a0 100644 --- a/docs/pages/experiments/joy/components.tsx +++ b/docs/pages/experiments/joy/components.tsx @@ -1,76 +1,17 @@ import * as React from 'react'; -// @ts-ignore -import { jsx as _jsx } from 'react/jsx-runtime'; +import { GlobalStyles } from '@mui/system'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; -import { - CssVarsProvider, - styled, - useColorScheme, - ColorPaletteProp, - TypographySystem, - FontSize, -} from '@mui/joy/styles'; - -export const SvgIcon = styled('svg', { - shouldForwardProp: (prop) => prop !== 'fontSize' && prop !== 'sx', -})<{ - fontSize: keyof FontSize | 'inherit'; -}>(({ theme, fontSize }) => ({ - userSelect: 'none', - width: '1em', - height: '1em', - display: 'inline-block', - fill: 'currentColor', - flexShrink: 0, - ...(fontSize && { - fontSize: fontSize === 'inherit' ? 'inherit' : theme.vars.fontSize[fontSize], - }), -})); - -function createSvgIcon(path: any, displayName: any, initialProps?: any) { - const Component = (props: any, ref: any) => - ( - - {path} - - ) as unknown as typeof SvgIcon; - - // @ts-ignore - return React.memo(React.forwardRef(Component)); -} - -const Typography = styled('p', { - shouldForwardProp: (prop) => prop !== 'color' && prop !== 'level' && prop !== 'sx', -})<{ color?: ColorPaletteProp; level?: keyof TypographySystem }>( - ({ theme, level = 'body1', color }) => [ - { margin: 0 }, - theme.typography[level], - color && { color: `var(--joy-palette-${color}-textColor)` }, - ], -); - -export const Moon = createSvgIcon( - _jsx('path', { - d: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z', - }), - 'DarkMode', -); - -export const Sun = createSvgIcon( - _jsx('path', { - d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z', - }), - 'LightMode', -); +import Switch from '@mui/joy/Switch'; +import Typography from '@mui/joy/Typography'; +import { CssVarsProvider, useColorScheme, styled } from '@mui/joy/styles'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import Add from '@mui/icons-material/Add'; +import DeleteForever from '@mui/icons-material/DeleteForever'; +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -92,498 +33,248 @@ const ColorSchemePicker = () => { setMode('light'); } }} - sx={{ minWidth: 40, p: '0.25rem' }} + sx={{ + p: '0.25rem', + width: 'var(--Button-minHeight)', + }} > {mode === 'light' ? : } ); }; +const Input = styled('input')<{ ownerState: any }>(({ theme, ownerState }) => ({ + boxSizing: 'border-box', + maxWidth: 80, + padding: '0.25rem 0.5rem', + border: 'none', + borderRadius: '4px', + minWidth: 0, + ...theme.typography.body2, + ...theme.variants.light.neutral, + cursor: 'pointer', + '&:focus-visible': theme.focus.default, + flexGrow: 1, + ...(ownerState.unit && { + paddingRight: '1.5rem', + }), +})); + +const ControlInput = ({ id, label = 'Label', unit, ...props }: any) => { + return ( + + + {label} + + + + {unit && ( + + {unit} + + )} + + + ); +}; + +const components = [ + { + name: 'Button', + render: (props: any) => ( + + + + + + ), + cssVars: [ + { id: '--Button-minHeight', type: 'number', unit: 'px', defaultValue: 40 }, + { id: '--Button-gutter', type: 'number', unit: 'px', defaultValue: 24 }, + { id: '--Button-iconOffsetStep', type: 'number', defaultValue: 2 }, + { id: '--Button-gap', type: 'number', unit: 'px' }, + ], + }, + { + name: 'Switch', + render: (props: any) => ( + + + + + ), + cssVars: [ + { id: '--Switch-track-radius', type: 'number', unit: 'px', defaultValue: 16 }, + { id: '--Switch-track-width', type: 'number', unit: 'px', defaultValue: 48 }, + { id: '--Switch-track-height', type: 'number', unit: 'px', defaultValue: 24 }, + { id: '--Switch-thumb-size', type: 'number', unit: 'px', defaultValue: 16 }, + { id: '--Switch-thumb-radius', type: 'number', unit: 'px' }, + { id: '--Switch-thumb-width', type: 'number', unit: 'px' }, + { id: '--Switch-thumb-offset', type: 'number', unit: 'px' }, + ], + }, +]; + export default function JoyComponents() { - const buttonProps = { - variant: ['text', 'outlined', 'light', 'contained'], - color: ['primary', 'neutral', 'danger', 'info', 'success', 'warning'], - size: ['sm', 'md', 'lg'], - } as const; + const [current, setCurrent] = React.useState(components[0].name); + const [componentVars, setComponentVars] = React.useState>( + components.reduce((result, curr) => ({ ...result, [curr.name]: {} }), {}), + ); + const data = components.find(({ name }) => name === current); + const renderedSx = data?.name + ? Object.entries(componentVars[data?.name]) + .map(([key, value]) => ` ${key}: ${value}`) + .join('\n') + : null; return ( - - - - - - - {Object.entries(buttonProps).map(([propName, propValue]) => ( - - - {propName} - - {propValue.map((value) => ( - - - - {value || 'default'} - - - ))} - - ))} - - {/* Danilo's not smart iteration below 😅 - wanted to see each color with every variant. */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + + + - - - - - - - - - - - + li': { + marginBottom: '0.25rem', + }, + '& button': { justifyContent: 'flex-start' }, + }} + > + {components.map((config) => ( +
  • + +
    • + ))}     - - - - - - - - - - - + + + {data?.render({ sx: componentVars[data.name] })} + + + `} + language="jsx" + /> + - - - - - - - - - - - + + + + + CSS variables + + {data?.cssVars.map((cssVar) => ( + ) => { + const value = event.target.value; + setComponentVars((latest) => { + const vars = { ...latest[data.name] }; + if (!value) { + delete vars[cssVar.id]; + } else { + vars[cssVar.id] = cssVar.unit ? `${value}${cssVar.unit}` : value; + } + return { + ...latest, + [data.name]: vars, + }; + }); + }} + /> + ))} diff --git a/docs/pages/experiments/joy/style-guide.tsx b/docs/pages/experiments/joy/style-guide.tsx index 58bbecdf78a7e6..c8a974e1c6d9cd 100644 --- a/docs/pages/experiments/joy/style-guide.tsx +++ b/docs/pages/experiments/joy/style-guide.tsx @@ -9,10 +9,10 @@ import { styled, ColorPaletteProp, TypographySystem, - createGetThemeVar, + createGetCssVar, } from '@mui/joy/styles'; -const getThemeVar = createGetThemeVar(); +const getCssVar = createGetCssVar(); const rgb2hex = (rgb: string) => `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || []) @@ -26,7 +26,7 @@ const Typography = styled('p', { ({ theme, level = 'body1', color }) => [ { margin: 0 }, theme.typography[level], - color && color !== 'context' && { color: getThemeVar(`palette-${color}-textColor`) }, + color && color !== 'context' && { color: getCssVar(`palette-${color}-textColor`) }, ], ); @@ -85,12 +85,12 @@ const ColorToken = ({ name, value }: { name: string; value: string }) => { ({ - borderRadius: `calc(${theme.getThemeVar('radius-md')} / 2)`, + borderRadius: `calc(${theme.getCssVar('radius-md')} / 2)`, bgcolor: value, width: 64, height: 64, mb: 1, - boxShadow: theme.getThemeVar('shadow-sm'), + boxShadow: theme.getCssVar('shadow-sm'), })} /> {name} @@ -118,7 +118,7 @@ const PaletteTokens = () => { diff --git a/docs/pages/experiments/joy/svg-icon.tsx b/docs/pages/experiments/joy/svg-icon.tsx new file mode 100644 index 00000000000000..75db51ef5905aa --- /dev/null +++ b/docs/pages/experiments/joy/svg-icon.tsx @@ -0,0 +1,108 @@ +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; +import SvgIcon from '@mui/joy/SvgIcon'; +import Typography from '@mui/joy/Typography'; +import * as React from 'react'; +// @ts-ignore +import { jsx as _jsx } from 'react/jsx-runtime'; + +function createSvgIcon(path: any, displayName: any, initialProps?: any) { + const Component = (props: any, ref: any) => + ( + + {path} + + ) as unknown as typeof SvgIcon; + + // @ts-ignore + return React.memo(React.forwardRef(Component)); +} + +export const Moon = createSvgIcon( + _jsx('path', { + d: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z', + }), + 'DarkMode', +); + +export const Sun = createSvgIcon( + _jsx('path', { + d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z', + }), + 'LightMode', +); + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +const props = { + fontSize: ['xs', 'sm', 'md', 'lg', 'xl', 'xl2', 'xl3', 'xl4', 'xl5', 'xl6'], + color: ['primary', 'danger', 'info', 'success', 'warning', 'neutral'], +} as const; + +export default function JoySvgIcon() { + return ( + + + + + + + {Object.entries(props).map(([propName, propValue]) => ( + + {propName} + {propValue.map((value) => ( + + + + + {value && ( + + {value} + + )} + + ))} + + ))} + + + + ); +} diff --git a/docs/pages/experiments/joy/switch.tsx b/docs/pages/experiments/joy/switch.tsx new file mode 100644 index 00000000000000..bf63d6de25fa68 --- /dev/null +++ b/docs/pages/experiments/joy/switch.tsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Switch from '@mui/joy/Switch'; +import Typography from '@mui/joy/Typography'; +import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +const props = { + size: ['sm', 'md', 'lg'], + color: ['primary', 'danger', 'info', 'success', 'warning'], +} as const; + +export default function JoySwitch() { + return ( + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + + + + {Object.entries(props).map(([propName, propValue]) => ( + + {propName} + {propValue.map((value) => ( + + + {value && ( + + {value} + + )} + + ))} + + ))} + + + + ); +} diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx new file mode 100644 index 00000000000000..15a724b7d8d2c6 --- /dev/null +++ b/docs/pages/experiments/joy/typography.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Typography from '@mui/joy/Typography'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function JoyTypography() { + return ( + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + + + {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'] as const).map((level) => ( + + {`${level} - typography`} + + ))} + + + ); +} diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 305bcb85ad7a5e..90ad60957fe28c 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -52,8 +52,8 @@ export default function Home() { "url": "https://mui.com/", "logo": "https://mui.com/static/logo.png", "sameAs": [ - "https://twitter.com/materialUI", - "https://github.com/mui-org/material-ui", + "https://twitter.com/MUI_hq", + "https://github.com/mui-org/", "https://opencollective.com/mui" ] } diff --git a/docs/pages/material.tsx b/docs/pages/material.tsx new file mode 100644 index 00000000000000..69f426013e200e --- /dev/null +++ b/docs/pages/material.tsx @@ -0,0 +1,119 @@ +import * as React from 'react'; +import Head from 'docs/src/modules/components/Head'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import Typography from '@mui/material/Typography'; +import Divider from '@mui/material/Divider'; +import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import BrandingProvider from 'docs/src/BrandingProvider'; +import Section from 'docs/src/layouts/Section'; +import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import Link from 'docs/src/modules/components/Link'; +import { MuiPage } from 'docs/src/pages'; +import pages from 'docs/data/material/pages'; + +export default function Components() { + const t = useTranslate(); + const componentPageData = pages.find(({ title }) => title === 'Components'); + if (!componentPageData) { + throw new Error('There should be a list of components for docsearch indexing'); + } + function renderItem(aPage: MuiPage) { + return ( + + + {pageToTitleI18n(aPage, t) || ''} + + + + ); + } + return ( + + + +
    +
    + + All Components + + + {(componentPageData?.children || []).map((page: MuiPage) => ( + + + {pageToTitleI18n(page, t)} + + + {!page.children?.length && renderItem(page)} + {(page.children || []).map((nestedPage) => { + if (nestedPage.children) { + return ( + + + + {pageToTitleI18n(nestedPage, t) || ''} + + {nestedPage.children.map(renderItem)} + + + ); + } + return renderItem(nestedPage); + })} + + + ))} + +
    +
    + + +     + ); +} diff --git a/docs/pages/versions.js b/docs/pages/versions.js index 6405cad9a40fb0..94d33f25dab9a6 100644 --- a/docs/pages/versions.js +++ b/docs/pages/versions.js @@ -39,7 +39,7 @@ async function getBranches() { } Page.getInitialProps = async () => { - const FILTERED_BRANCHES = ['latest', 'l10n', 'next', 'material-ui.com']; + const FILTERED_BRANCHES = ['latest', 'l10n', 'next', 'migration', 'material-ui.com']; const branches = await getBranches(); /** diff --git a/docs/public/_redirects b/docs/public/_redirects index bf9f93716dedb5..2df3a160b91b13 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -41,7 +41,7 @@ https://mui.com/store/* https://material-ui.com/store/:splat 302! /r/issue-template https://codesandbox.io/s/material-ui-issue-latest-s2dsx /r/issue-template-next https://codesandbox.io/s/material-ui-issue-next-o7xkt /r/issue-template-latest https://codesandbox.io/s/material-ui-issue-latest-s2dsx -/r/ts-issue-template https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEMhhYowZABsAtHOCdhlMnToE5o-MAii4AESwgIACgBKVnYuHgBNeSghCBUsDSA 302 +/r/ts-issue-template https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEHOCcQyGFijBkAGzJ06BOaPzAIouABEsICAAoAlKzsXDwAmvJQQhAqWBpAA 302 /r/custom-component-variants /customization/components/#adding-new-component-variants /r/x-license https://material-ui.com/store/items/material-ui-pro/ /r/migration-v4 /guides/migration-v4/ @@ -105,6 +105,9 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /company/careers/ /careers/ 301 /discover-more/team/ /about/ 301 /api/data-grid/grid-export-csv-options/ /api/data-grid/grid-csv-export-options/ 301 +# 2022 +/company/about/ /about/ 301 +/company/jobs/ /careers/ 301 ## Localization /fr/* /:splat 301 diff --git a/docs/public/static/blog/2021/card.png b/docs/public/static/blog/2021/card.png index 32663409e2b0fa..e5662c0d8702cc 100644 Binary files a/docs/public/static/blog/2021/card.png and b/docs/public/static/blog/2021/card.png differ diff --git a/docs/public/static/blog/introducing-the-row-grouping-feature/blog1.gif b/docs/public/static/blog/introducing-the-row-grouping-feature/blog1.gif new file mode 100644 index 00000000000000..e04f4c2808007e Binary files /dev/null and b/docs/public/static/blog/introducing-the-row-grouping-feature/blog1.gif differ diff --git a/docs/public/static/blog/introducing-the-row-grouping-feature/blog2.gif b/docs/public/static/blog/introducing-the-row-grouping-feature/blog2.gif new file mode 100644 index 00000000000000..28a51ce73f868e Binary files /dev/null and b/docs/public/static/blog/introducing-the-row-grouping-feature/blog2.gif differ diff --git a/docs/public/static/blog/introducing-the-row-grouping-feature/defaultSettings.png b/docs/public/static/blog/introducing-the-row-grouping-feature/defaultSettings.png new file mode 100644 index 00000000000000..467bd233223dc9 Binary files /dev/null and b/docs/public/static/blog/introducing-the-row-grouping-feature/defaultSettings.png differ diff --git a/docs/public/static/blog/introducing-the-row-grouping-feature/groupable1.png b/docs/public/static/blog/introducing-the-row-grouping-feature/groupable1.png new file mode 100644 index 00000000000000..2e58da1190ca7b Binary files /dev/null and b/docs/public/static/blog/introducing-the-row-grouping-feature/groupable1.png differ diff --git a/docs/public/static/branding/about/andrii.png b/docs/public/static/branding/about/andrii.png new file mode 100644 index 00000000000000..3bb5a3793c0c7b Binary files /dev/null and b/docs/public/static/branding/about/andrii.png differ diff --git a/docs/public/static/branding/about/benny.png b/docs/public/static/branding/about/benny.png index 632c17e446c1e7..83dcc210fec762 100644 Binary files a/docs/public/static/branding/about/benny.png and b/docs/public/static/branding/about/benny.png differ diff --git a/docs/public/static/branding/about/danilo.png b/docs/public/static/branding/about/danilo.png index cd2cee9d0eb5a3..f5bd9f490599dc 100644 Binary files a/docs/public/static/branding/about/danilo.png and b/docs/public/static/branding/about/danilo.png differ diff --git a/docs/public/static/branding/about/jan.png b/docs/public/static/branding/about/jan.png index 09a8a0f6a1bedf..d58ee4a6f8a761 100644 Binary files a/docs/public/static/branding/about/jan.png and b/docs/public/static/branding/about/jan.png differ diff --git a/docs/public/static/branding/about/jose.png b/docs/public/static/branding/about/jose.png new file mode 100644 index 00000000000000..a9e83fe435ae2a Binary files /dev/null and b/docs/public/static/branding/about/jose.png differ diff --git a/docs/public/static/branding/about/marija.png b/docs/public/static/branding/about/marija.png index 1a449e236a3f93..2be42831b8e3a1 100644 Binary files a/docs/public/static/branding/about/marija.png and b/docs/public/static/branding/about/marija.png differ diff --git a/docs/public/static/branding/about/matheus.png b/docs/public/static/branding/about/matheus.png index cc0300c4d26fd4..2de10ef9f50f6a 100644 Binary files a/docs/public/static/branding/about/matheus.png and b/docs/public/static/branding/about/matheus.png differ diff --git a/docs/public/static/branding/about/olivier.png b/docs/public/static/branding/about/olivier.png index 04fd9e31c7c881..187def5b866522 100644 Binary files a/docs/public/static/branding/about/olivier.png and b/docs/public/static/branding/about/olivier.png differ diff --git a/docs/public/static/branding/about/sebastian.png b/docs/public/static/branding/about/sebastian.png deleted file mode 100644 index 664f664319729f..00000000000000 Binary files a/docs/public/static/branding/about/sebastian.png and /dev/null differ diff --git a/docs/public/static/fonts/IBMPlexSans-SemiBold.ttf b/docs/public/static/fonts/IBMPlexSans-SemiBold.ttf new file mode 100644 index 00000000000000..89aa8e82c31293 Binary files /dev/null and b/docs/public/static/fonts/IBMPlexSans-SemiBold.ttf differ diff --git a/docs/public/static/fonts/IBMPlexSans-SemiBold.woff b/docs/public/static/fonts/IBMPlexSans-SemiBold.woff new file mode 100644 index 00000000000000..fa272e45373b6e Binary files /dev/null and b/docs/public/static/fonts/IBMPlexSans-SemiBold.woff differ diff --git a/docs/public/static/fonts/IBMPlexSans-SemiBold.woff2 b/docs/public/static/fonts/IBMPlexSans-SemiBold.woff2 new file mode 100644 index 00000000000000..535fcfa6941eaa Binary files /dev/null and b/docs/public/static/fonts/IBMPlexSans-SemiBold.woff2 differ diff --git a/docs/public/static/logo.svg b/docs/public/static/logo.svg index dea1f22374461e..5cb3a1e389ce63 100644 --- a/docs/public/static/logo.svg +++ b/docs/public/static/logo.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/docs/scripts/ApiBuilders/ComponentApiBuilder.ts b/docs/scripts/ApiBuilders/ComponentApiBuilder.ts index 3d3338f326c8b4..03aeebd673a7e8 100644 --- a/docs/scripts/ApiBuilders/ComponentApiBuilder.ts +++ b/docs/scripts/ApiBuilders/ComponentApiBuilder.ts @@ -15,7 +15,6 @@ import generatePropTypeDescription, { getChained, } from 'docs/src/modules/utils/generatePropTypeDescription'; import { renderInline as renderMarkdownInline } from '@mui/markdown'; -import { pageToTitle } from 'docs/src/modules/utils/helpers'; import createDescribeableProp, { DescribeablePropDescriptor, } from 'docs/src/modules/utils/createDescribeableProp'; @@ -23,27 +22,24 @@ import generatePropDescription from 'docs/src/modules/utils/generatePropDescript import parseStyles, { Styles } from 'docs/src/modules/utils/parseStyles'; import generateUtilityClass from '@mui/base/generateUtilityClass'; import * as ttp from 'typescript-to-proptypes'; -import { getLineFeed, getUnstyledFilename } from '../helpers'; -import { findComponentDemos, getMuiName } from '../buildApiUtils'; +import { getUnstyledFilename } from '../helpers'; +import { ComponentInfo } from '../buildApiUtils'; const DEFAULT_PRETTIER_CONFIG_PATH = path.join(process.cwd(), 'prettier.config.js'); -interface ReactApi extends ReactDocgenApi { - /** - * list of page pathnames - * @example ['/components/Accordion'] - */ - demos: readonly string[]; +export interface ReactApi extends ReactDocgenApi { + demos: ReturnType; EOL: string; filename: string; - apiUrl: string; + apiPathname: string; forwardsRefTo: string | undefined; - inheritance: { component: string; pathname: string } | null; + inheritance: ReturnType; /** * react component name * @example 'Accordion' */ name: string; + muiName: string; description: string; spread: boolean | undefined; /** @@ -88,21 +84,6 @@ export function writePrettifiedFile( }); } -const parseFile = (filename: string) => { - const src = readFileSync(filename, 'utf8'); - return { - src, - shouldSkip: - filename.indexOf('internal') !== -1 || - !!src.match(/@ignore - internal component\./) || - !!src.match(/@ignore - do not document\./), - spread: !src.match(/ = exactProp\(/), - name: path.parse(filename).name, - EOL: getLineFeed(src), - inheritedComponent: src.match(/\/\/ @inheritedComponent (.*)/)?.[1], - }; -}; - /** * Produces markdown of the description that can be hosted anywhere. * @@ -218,11 +199,11 @@ async function annotateComponentDefinition(api: ReactApi) { let inheritanceAPILink = null; if (api.inheritance !== null) { - const url = api.inheritance.pathname.startsWith('/') - ? `${HOST}${api.inheritance.pathname}` - : api.inheritance.pathname; - - inheritanceAPILink = `[${api.inheritance.component} API](${url})`; + inheritanceAPILink = `[${api.inheritance.name} API](${ + api.inheritance.apiPathname.startsWith('http') + ? api.inheritance.apiPathname + : `${HOST}${api.inheritance.apiPathname}` + })`; } const markdownLines = (await computeApiDescription(api, { host: HOST })).split('\n'); @@ -233,13 +214,21 @@ async function annotateComponentDefinition(api: ReactApi) { markdownLines.push( 'Demos:', '', - ...api.demos.map((demoPathname) => { - return `- [${pageToTitle({ pathname: demoPathname })}](${HOST}${demoPathname}/)`; + ...api.demos.map((item) => { + return `- [${item.name}](${ + item.demoPathname.startsWith('http') ? item.demoPathname : `${HOST}${item.demoPathname}` + })`; }), '', ); - markdownLines.push('API:', '', `- [${api.name} API](${HOST}${api.apiUrl}/)`); + markdownLines.push( + 'API:', + '', + `- [${api.name} API](${ + api.apiPathname.startsWith('http') ? api.apiPathname : `${HOST}${api.apiPathname}` + })`, + ); if (api.inheritance !== null) { markdownLines.push(`- inherits ${inheritanceAPILink}`); } @@ -284,18 +273,6 @@ function extractClassConditions(descriptions: any) { return classConditions; } -/** - * Generate list of component demos - */ -function generateDemoList(reactAPI: ReactApi): string { - return ``; -} - /** * @param filepath - absolute path * @example toGithubPath('/home/user/material-ui/packages/Accordion') === '/packages/Accordion' @@ -371,8 +348,15 @@ const generateApiPage = (outputDirectory: string, reactApi: ReactApi) => { spread: reactApi.spread, forwardsRefTo: reactApi.forwardsRefTo, filename: toGithubPath(reactApi.filename), - inheritance: reactApi.inheritance, - demos: generateDemoList(reactApi), + inheritance: reactApi.inheritance + ? { + component: reactApi.inheritance.name, + pathname: reactApi.inheritance.apiPathname, + } + : null, + demos: `
      ${reactApi.demos + .map((item) => `
    • ${item.name}
      • `) + .join('\n')}
    `, cssComponent: cssComponents.indexOf(reactApi.name) >= 0, }; @@ -520,25 +504,26 @@ const attachPropsTable = (reactApi: ReactApi) => { * - Add the comment in the component filename with its demo & API urls (including the inherited component). * this process is done by sourcing markdown files and filter matched `components` in the frontmatter */ -const generateComponentApi = async ( - filename: string, - options: { - outputPagesDirectory: string; - productUrlPrefix: string; - apiUrl: string; - ttpProgram: ttp.ts.Program; - pagesMarkdown: Array<{ components: string[]; pathname: string }>; - }, -) => { - const { ttpProgram: program, pagesMarkdown, outputPagesDirectory } = options; - const { shouldSkip, name, spread, EOL, inheritedComponent } = parseFile(filename); +const generateComponentApi = async (componentInfo: ComponentInfo, program: ttp.ts.Program) => { + const { + filename, + name, + muiName, + apiPathname, + apiPagesDirectory, + getInheritance, + getDemos, + readFile, + } = componentInfo; + + const { shouldSkip, spread, EOL, src } = readFile(); if (shouldSkip) { return null; } const reactApi: ReactApi = docgenParse( - readFileSync(filename, 'utf8'), + src, null, defaultHandlers.concat(muiDefaultPropsHandler), { filename }, @@ -588,9 +573,10 @@ const generateComponentApi = async ( } reactApi.filename = filename; reactApi.name = name; - reactApi.apiUrl = options.apiUrl; + reactApi.muiName = muiName; + reactApi.apiPathname = apiPathname; reactApi.EOL = EOL; - reactApi.demos = findComponentDemos(name, pagesMarkdown); + reactApi.demos = getDemos(); if (reactApi.demos.length === 0) { throw new Error( 'Unable to find demos. \n' + @@ -603,30 +589,14 @@ const generateComponentApi = async ( // no Object.assign to visually check for collisions reactApi.forwardsRefTo = testInfo.forwardsRefTo; reactApi.spread = testInfo.spread ?? spread; - - const inheritedComponentName = testInfo.inheritComponent || inheritedComponent; - if (inheritedComponentName) { - reactApi.inheritance = { - component: inheritedComponentName, - pathname: - inheritedComponentName === 'Transition' - ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' - : `${options.productUrlPrefix}/api/${kebabCase(inheritedComponentName)}/`, - }; - } else { - reactApi.inheritance = null; - } - + reactApi.inheritance = getInheritance(testInfo.inheritComponent); reactApi.styles = await parseStyles(reactApi, program); if (reactApi.styles.classes.length > 0 && !reactApi.name.endsWith('Unstyled')) { - reactApi.styles.name = getMuiName(reactApi.name); + reactApi.styles.name = reactApi.muiName; } reactApi.styles.classes.forEach((key) => { - const globalClass = generateUtilityClass( - reactApi.styles.name || getMuiName(reactApi.name), - key, - ); + const globalClass = generateUtilityClass(reactApi.styles.name || reactApi.muiName, key); reactApi.styles.globalClasses[key] = globalClass; }); @@ -638,7 +608,7 @@ const generateComponentApi = async ( // Generate pages, json and translations generateApiTranslations(path.join(process.cwd(), 'docs/translations/api-docs'), reactApi); - generateApiPage(outputPagesDirectory, reactApi); + generateApiPage(apiPagesDirectory, reactApi); // Add comment about demo & api links (including inherited component) to the component file await annotateComponentDefinition(reactApi); diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 5a2c66d7e2ace4..400bb21e9a182a 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -1,56 +1,25 @@ -import { mkdirSync, readFileSync } from 'fs'; +import { mkdirSync } from 'fs'; import * as fse from 'fs-extra'; import path from 'path'; -import * as _ from 'lodash'; import kebabCase from 'lodash/kebabCase'; import * as yargs from 'yargs'; -import { ReactDocgenApi } from 'react-docgen'; -import { findPages, findPagesMarkdown, findComponents } from 'docs/src/modules/utils/find'; -import { getHeaders } from '@mui/markdown'; -import { Styles } from 'docs/src/modules/utils/parseStyles'; import * as ttp from 'typescript-to-proptypes'; -import { getGeneralPathInfo, getMaterialPathInfo, getBasePathInfo } from './buildApiUtils'; -import buildComponentApi, { writePrettifiedFile } from './ApiBuilders/ComponentApiBuilder'; +import { findPages, findComponents } from 'docs/src/modules/utils/find'; +import FEATURE_TOGGLE from 'docs/src/featureToggle'; +import { + ComponentInfo, + getGenericComponentInfo, + getMaterialComponentInfo, + getBaseComponentInfo, + extractApiPage, +} from 'docs/scripts/buildApiUtils'; +import buildComponentApi, { + writePrettifiedFile, + ReactApi, +} from 'docs/scripts/ApiBuilders/ComponentApiBuilder'; const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs'); -interface ReactApi extends ReactDocgenApi { - /** - * list of page pathnames - * @example ['/components/Accordion'] - */ - demos: readonly string[]; - EOL: string; - filename: string; - apiUrl: string; - forwardsRefTo: string | undefined; - inheritance: { component: string; pathname: string } | null; - /** - * react component name - * @example 'Accordion' - */ - name: string; - description: string; - spread: boolean | undefined; - /** - * result of path.readFileSync from the `filename` in utf-8 - */ - src: string; - styles: Styles; - propsTable: _.Dictionary<{ - default: string | undefined; - required: boolean | undefined; - type: { name: string | undefined; description: string | undefined }; - deprecated: true | undefined; - deprecationInfo: string | undefined; - }>; - translations: { - componentDescription: string; - propDescriptions: { [key: string]: string | undefined }; - classDescriptions: { [key: string]: { description: string; conditions?: string } }; - }; -} - async function removeOutdatedApiDocsTranslations(components: readonly ReactApi[]): Promise { const componentDirectories = new Set(); const files = await fse.readdir(apiDocsTranslationsDirectory); @@ -82,39 +51,71 @@ async function removeOutdatedApiDocsTranslations(components: readonly ReactApi[] ); } +const getAllFiles = (dirPath: string, arrayOfFiles: string[] = []) => { + const files = fse.readdirSync(dirPath); + + files.forEach((file) => { + if (fse.statSync(`${dirPath}/${file}`).isDirectory()) { + arrayOfFiles = getAllFiles(`${dirPath}/${file}`, arrayOfFiles); + } else { + arrayOfFiles.push(path.join(__dirname, dirPath, '/', file)); + } + }); + + return arrayOfFiles; +}; + +function findApiPages(relativeFolder: string) { + let pages: Array<{ pathname: string }> = []; + let filePaths = []; + try { + filePaths = getAllFiles(path.join(process.cwd(), relativeFolder)); + } catch (error) { + // eslint-disable-next-line no-console + console.log(error); + return []; + } + filePaths.forEach((itemPath) => { + if (itemPath.endsWith('.js')) { + const data = extractApiPage(itemPath); + + pages.push({ pathname: data.apiPathname }); + } + }); + + // sort by pathnames without '-' so that e.g. card comes before card-action + pages = pages.sort((a, b) => { + const pathnameA = a.pathname.replace(/-/g, ''); + const pathnameB = b.pathname.replace(/-/g, ''); + if (pathnameA < pathnameB) { + return -1; + } + if (pathnameA > pathnameB) { + return 1; + } + return 0; + }); + + return pages; +} + interface Settings { input: { /** * Component directories to be used to generate API */ libDirectory: string[]; - /** - * The directory to get api pathnames to generate pagesApi - */ - pageDirectory: string; - /** - * The directory that contains markdown files to be used to find demos - * related to the processed component - */ - markdownDirectory: string; }; output: { - /** - * API page + json content output directory - */ - pagesDirectory: string; /** * The output path of `pagesApi` generated from `input.pageDirectory` */ apiManifestPath: string; }; - productUrlPrefix: string; - getPathInfo: (filename: string) => { apiUrl: string; demoUrl: string }; + getApiPages: () => Array<{ pathname: string }>; + getComponentInfo: (filename: string) => ComponentInfo; } -/** - * This is the refactored version of the current API building process, nothing's changed. - */ const BEFORE_MIGRATION_SETTINGS: Settings[] = [ { input: { @@ -123,127 +124,88 @@ const BEFORE_MIGRATION_SETTINGS: Settings[] = [ path.join(process.cwd(), 'packages/mui-material/src'), path.join(process.cwd(), 'packages/mui-lab/src'), ], - pageDirectory: path.join(process.cwd(), 'docs/pages'), - markdownDirectory: path.join(process.cwd(), 'docs/src/pages'), }, output: { - pagesDirectory: path.join(process.cwd(), 'docs/pages/api-docs'), apiManifestPath: path.join(process.cwd(), 'docs/src/pagesApi.js'), }, - productUrlPrefix: '', - getPathInfo: getGeneralPathInfo, + getApiPages: () => { + const pages = findPages({ front: true }, path.join(process.cwd(), 'docs/pages')); + return pages.find(({ pathname }) => pathname.indexOf('api') !== -1)?.children ?? []; + }, + getComponentInfo: getGenericComponentInfo, }, ]; -/** - * Once the preparation is done (as described in https://github.com/mui-org/material-ui/issues/30091), swithc to this settings. - * It will generate API for the current & `/material` paths, then set the redirect to link `/api/*` to `/material/api/*` - * At this point, `mui-base` content is still live in with `mui-material`. - */ -// @ts-ignore -// eslint-disable-next-line @typescript-eslint/no-unused-vars const MIGRATION_SETTINGS: Settings[] = [ - ...BEFORE_MIGRATION_SETTINGS, { input: { libDirectory: [ - path.join(process.cwd(), 'packages/mui-base/src'), path.join(process.cwd(), 'packages/mui-material/src'), path.join(process.cwd(), 'packages/mui-lab/src'), ], - pageDirectory: path.join(process.cwd(), 'docs/pages/material'), - markdownDirectory: path.join(process.cwd(), 'docs/data'), }, output: { - pagesDirectory: path.join(process.cwd(), 'docs/pages/material/api-docs'), apiManifestPath: path.join(process.cwd(), 'docs/data/material/pagesApi.js'), }, - productUrlPrefix: '/material', - getPathInfo: getMaterialPathInfo, + getApiPages: () => findApiPages('docs/pages/material/api'), + getComponentInfo: getMaterialComponentInfo, }, -]; - -/** - * Once redirects are stable - * - Create `mui-base` content in `docs/pages/base/*` and switch to this settings. - * - Remove old content directories, eg. `docs/pages/components/*`, ...etc - */ -// @ts-ignore -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const POST_MIGRATION_SETTINGS: Settings[] = [ { input: { - libDirectory: [ - path.join(process.cwd(), 'packages/mui-material/src'), - path.join(process.cwd(), 'packages/mui-lab/src'), - ], - pageDirectory: path.join(process.cwd(), 'docs/pages/material'), - markdownDirectory: path.join(process.cwd(), 'docs/data'), + libDirectory: [path.join(process.cwd(), 'packages/mui-base/src')], }, output: { - pagesDirectory: path.join(process.cwd(), 'docs/pages/material/api-docs'), - apiManifestPath: path.join(process.cwd(), 'docs/data/material/pagesApi.js'), + apiManifestPath: path.join(process.cwd(), 'docs/data/base/pagesApi.js'), }, - productUrlPrefix: '/material', - getPathInfo: getMaterialPathInfo, + getApiPages: () => findApiPages('docs/pages/base/api'), + getComponentInfo: getBaseComponentInfo, }, + // add other products, eg. joy, data-grid, ...etc { + // use old config so that component type definition does not change by `annotateComponentDefinition` + // TODO: remove this setting at cleanup phase input: { - libDirectory: [path.join(process.cwd(), 'packages/mui-base/src')], - pageDirectory: path.join(process.cwd(), 'docs/pages/base'), - markdownDirectory: path.join(process.cwd(), 'docs/data'), + libDirectory: [ + path.join(process.cwd(), 'packages/mui-base/src'), + path.join(process.cwd(), 'packages/mui-material/src'), + path.join(process.cwd(), 'packages/mui-lab/src'), + ], }, output: { - pagesDirectory: path.join(process.cwd(), 'docs/pages/base/api-docs'), - apiManifestPath: path.join(process.cwd(), 'docs/data/base/pagesApi.js'), + apiManifestPath: path.join(process.cwd(), 'docs/src/pagesApi.js'), + }, + getApiPages: () => { + const pages = findPages({ front: true }, path.join(process.cwd(), 'docs/pages')); + return pages.find(({ pathname }) => pathname.indexOf('api') !== -1)?.children ?? []; }, - productUrlPrefix: '/base', - getPathInfo: getBasePathInfo, + getComponentInfo: getGenericComponentInfo, }, - // add other products, eg. joy, data-grid, ...etc ]; -const ACTIVE_SETTINGS = BEFORE_MIGRATION_SETTINGS; +// TODO: Switch to MIGRATION_SETTINGS once ready to migrate content +const ACTIVE_SETTINGS = FEATURE_TOGGLE.enable_product_scope + ? MIGRATION_SETTINGS + : BEFORE_MIGRATION_SETTINGS; + +type CommandOptions = { grep?: string }; -async function run(argv: { grep?: string }) { +async function run(argv: CommandOptions) { const grep = argv.grep == null ? null : new RegExp(argv.grep); let allBuilds: Array> = []; await ACTIVE_SETTINGS.reduce(async (resolvedPromise, setting) => { + await resolvedPromise; const workspaceRoot = path.resolve(__dirname, '../../'); /** * @type {string[]} */ const componentDirectories = setting.input.libDirectory; const apiPagesManifestPath = setting.output.apiManifestPath; - const pagesDirectory = setting.output.pagesDirectory; - mkdirSync(pagesDirectory, { mode: 0o777, recursive: true }); const manifestDir = apiPagesManifestPath.match(/(.*)\/[^/]+\./)?.[1]; if (manifestDir) { mkdirSync(manifestDir, { recursive: true }); } - /** - * pageMarkdown: Array<{ components: string[]; filename: string; pathname: string }> - * - * e.g.: - * [{ - * pathname: '/components/accordion', - * filename: '/Users/user/Projects/material-ui/docs/src/pages/components/badges/accordion-ja.md', - * components: [ 'Accordion', 'AccordionActions', 'AccordionDetails', 'AccordionSummary' ] - * }, ...] - */ - const pagesMarkdown = findPagesMarkdown(setting.input.markdownDirectory) - .map((markdown) => { - const markdownSource = readFileSync(markdown.filename, 'utf8'); - return { - ...markdown, - pathname: setting.getPathInfo(markdown.filename).demoUrl, - components: getHeaders(markdownSource).components, - }; - }) - .filter((markdown) => markdown.components.length > 0); - /** * components: Array<{ filename: string }> * e.g. @@ -282,15 +244,11 @@ async function run(argv: { grep?: string }) { const componentBuilds = components.map(async (component) => { try { const { filename } = component; - const pathInfo = setting.getPathInfo(filename); + const componentInfo = setting.getComponentInfo(filename); - return buildComponentApi(filename, { - ttpProgram: program, - pagesMarkdown, - apiUrl: pathInfo.apiUrl, - productUrlPrefix: setting.productUrlPrefix, - outputPagesDirectory: setting.output.pagesDirectory, - }); + mkdirSync(componentInfo.apiPagesDirectory, { mode: 0o777, recursive: true }); + + return buildComponentApi(componentInfo, program); } catch (error: any) { error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`; throw error; @@ -312,16 +270,9 @@ async function run(argv: { grep?: string }) { allBuilds = [...allBuilds, ...builds]; - const pages = findPages({ front: true }, setting.input.pageDirectory); - const apiPages = pages.find(({ pathname }) => pathname.indexOf('api') !== -1)?.children; - if (apiPages === undefined) { - throw new TypeError('Unable to find pages under /api'); - } - - const source = `module.exports = ${JSON.stringify(apiPages)}`; + const source = `module.exports = ${JSON.stringify(setting.getApiPages())}`; writePrettifiedFile(apiPagesManifestPath, source); - - await resolvedPromise; + return Promise.resolve(); }, Promise.resolve()); if (grep === null) { @@ -337,7 +288,7 @@ async function run(argv: { grep?: string }) { } yargs - .command({ + .command({ command: '$0', describe: 'formats codebase', builder: (command) => { diff --git a/docs/scripts/buildApiUtils.test.ts b/docs/scripts/buildApiUtils.test.ts index 080ba4acad3cdb..ba60141a64e522 100644 --- a/docs/scripts/buildApiUtils.test.ts +++ b/docs/scripts/buildApiUtils.test.ts @@ -1,89 +1,225 @@ +import path from 'path'; +import fs from 'fs'; import { expect } from 'chai'; +import sinon from 'sinon'; +import FEATURE_TOGGLE from '../src/featureToggle'; import { - findComponentDemos, - getMuiName, - getGeneralPathInfo, - getMaterialPathInfo, - getBasePathInfo, + extractApiPage, + extractPackageFile, + getGenericComponentInfo, + getMaterialComponentInfo, + getBaseComponentInfo, } from './buildApiUtils'; describe('buildApiUtils', () => { - it('findComponentDemos return matched component', () => { - expect( - findComponentDemos('Accordion', [ - { - pathname: '/material/components/accordion', - components: ['Accordion', 'AccordionDetails'], - }, - { - pathname: '/material/components/accordion-details', - components: ['Accordion', 'AccordionDetails'], - }, - ]), - ).to.deep.equal(['/material/components/accordion', '/material/components/accordion-details']); + describe('extractApiPage', () => { + it('return info for api page', () => { + expect( + extractApiPage('/material-ui/docs/pages/material/api/accordion-actions.js'), + ).to.deep.equal({ + apiPathname: '/material/api/accordion-actions', + }); + }); }); - it('getMuiName return name without Unstyled', () => { - expect(getMuiName('ButtonUnstyled')).to.equal('MuiButton'); - }); + describe('extractPackageFilePath', () => { + it('return info if path is a package (material)', () => { + const result = extractPackageFile('/material-ui/packages/mui-material/src/Button/Button.js'); + sinon.assert.match(result, { + packagePath: 'mui-material', + muiPackage: 'mui-material', + name: 'Button', + }); + }); - it('getMuiName return name without Styled', () => { - expect(getMuiName('StyledInputBase')).to.equal('MuiInputBase'); - }); + it('return info if path is a package (lab)', () => { + const result = extractPackageFile( + '/material-ui/packages/mui-lab/src/LoadingButton/LoadingButton.js', + ); + sinon.assert.match(result, { + packagePath: 'mui-lab', + muiPackage: 'mui-lab', + name: 'LoadingButton', + }); + }); - describe('getGeneralPathInfo', () => { - it('return correct apiUrl', () => { - const info = getGeneralPathInfo(`/packages/mui-material/src/Button/Button.js`); - expect(info.apiUrl).to.equal(`/api/button`); + it('return info if path is a package (base)', () => { + const result = extractPackageFile( + '/material-ui/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx', + ); + sinon.assert.match(result, { + packagePath: 'mui-base', + muiPackage: 'mui-base', + name: 'TabUnstyled', + }); }); - it('return correct demoUrl', () => { - const info = getGeneralPathInfo(`/docs/src/pages/components/buttons/buttons.md`); - expect(info.demoUrl).to.equal(`/components/buttons`); + it('return info if path is a package (data-grid)', () => { + const result = extractPackageFile('/material-ui/packages/grid/x-data-grid/src/DataGrid.tsx'); + sinon.assert.match(result, { + packagePath: 'x-data-grid', + muiPackage: 'mui-data-grid', + name: 'DataGrid', + }); }); - }); - describe('getMaterialPathInfo', () => { - it('[mui-material] return correct apiUrl', () => { - const info = getMaterialPathInfo(`/packages/mui-material/src/Button/Button.js`); - expect(info.apiUrl).to.equal(`/material/api/button`); + it('return info if path is a package (data-grid-pro)', () => { + const result = extractPackageFile( + '/material-ui/packages/grid/x-data-grid-pro/src/DataGridPro.tsx', + ); + sinon.assert.match(result, { + packagePath: 'x-data-grid-pro', + muiPackage: 'mui-data-grid-pro', + name: 'DataGridPro', + }); }); - it('[mui-material] return correct demoUrl', () => { - const info = getMaterialPathInfo(`/docs/data/material/components/buttons/buttons.md`); - expect(info.demoUrl).to.equal(`/material/components/buttons`); + it('return null if path is not a package', () => { + const result = extractPackageFile( + '/material-ui/docs/pages/material/getting-started/getting-started.md', + ); + sinon.assert.match(result, { + packagePath: null, + name: null, + }); }); + }); + + describe('getGenericComponentInfo', () => { + it('return correct apiPathname', () => { + const info = getGenericComponentInfo( + path.join(process.cwd(), `/packages/mui-material/src/Button/Button.js`), + ); + sinon.assert.match(info, { + name: 'Button', + apiPathname: '/api/button/', + muiName: 'MuiButton', + apiPagesDirectory: sinon.match((value) => + value.endsWith(`docs${path.sep}pages${path.sep}api-docs`), + ), + }); + + expect(info.getInheritance('ButtonBase')).to.deep.equal({ + name: 'ButtonBase', + apiPathname: '/api/button-base/', + }); - it('[mui-lab] return correct apiUrl', () => { - const info = getMaterialPathInfo(`/packages/mui-lab/src/LoadingButton/LoadingButton.js`); - expect(info.apiUrl).to.equal(`/material/api/loading-button`); + expect(info.getDemos()).to.deep.equal([ + { + name: 'Button Group', + demoPathname: '/components/button-group/', + }, + { + name: 'Buttons', + demoPathname: '/components/buttons/', + }, + ]); }); - it('[mui-lab] return correct demoUrl', () => { - const info = getMaterialPathInfo(`/docs/data/material/components/buttons/buttons.md`); - expect(info.demoUrl).to.equal(`/material/components/buttons`); + it('Icon return correct Demos annotation', () => { + const info = getGenericComponentInfo( + path.join(process.cwd(), `/packages/mui-material/src/Icon/Icon.js`), + ); + sinon.assert.match(info, { + name: 'Icon', + apiPathname: '/api/icon/', + muiName: 'MuiIcon', + apiPagesDirectory: sinon.match((value) => + value.endsWith(`docs${path.sep}pages${path.sep}api-docs`), + ), + }); + + expect(info.getDemos()).to.deep.equal([ + { + name: 'Icons', + demoPathname: '/components/icons/', + }, + { + name: 'Material Icons', + demoPathname: '/components/material-icons/', + }, + ]); }); + }); - it('[mui-base] return correct apiUrl', () => { - const info = getMaterialPathInfo(`/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx`); - expect(info.apiUrl).to.equal(`/material/api/button-unstyled`); + describe('getMaterialComponentInfo', () => { + beforeEach(function test() { + if (!FEATURE_TOGGLE.enable_product_scope) { + this.skip(); + } }); + it('return correct info for material component file', () => { + const info = getMaterialComponentInfo( + path.join(process.cwd(), `/packages/mui-material/src/Button/Button.js`), + ); + sinon.assert.match(info, { + name: 'Button', + apiPathname: '/material/api/button/', + muiName: 'MuiButton', + apiPagesDirectory: sinon.match((value) => value.endsWith('docs/pages/material/api')), + }); - it('[mui-base] return correct demoUrl', () => { - const info = getMaterialPathInfo(`/docs/data/material/components/buttons/buttons.md`); - expect(info.demoUrl).to.equal(`/material/components/buttons`); + expect(info.getInheritance('ButtonBase')).to.deep.equal({ + name: 'ButtonBase', + apiPathname: '/material/api/button-base/', + }); + + let existed = false; + try { + fs.readdirSync(path.join(process.cwd(), 'docs/data')); + existed = true; + // eslint-disable-next-line no-empty + } catch (error) {} + if (existed) { + expect(info.getDemos()).to.deep.equal([ + { + name: 'Button Group', + demoPathname: '/material/react-button-group/', + }, + { + name: 'Buttons', + demoPathname: '/material/react-button/', + }, + ]); + } }); }); - describe('getBasePathInfo', () => { - it('return correct apiUrl', () => { - const info = getBasePathInfo(`/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx`); - expect(info.apiUrl).to.equal(`/base/api/button-unstyled`); + describe('getBaseComponentInfo', () => { + beforeEach(function test() { + if (!FEATURE_TOGGLE.enable_product_scope) { + this.skip(); + } }); + it('return correct info for base component file', () => { + const info = getBaseComponentInfo( + path.join(process.cwd(), `/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx`), + ); + sinon.assert.match(info, { + name: 'ButtonUnstyled', + apiPathname: '/base/api/button-unstyled/', + muiName: 'MuiButton', + apiPagesDirectory: sinon.match((value) => value.endsWith('docs/pages/base/api')), + }); + + info.readFile(); + + expect(info.getInheritance()).to.deep.equal(null); - it('return correct demoUrl', () => { - const info = getBasePathInfo(`/docs/data/base/components/button-unstyled/button-unstyled.md`); - expect(info.demoUrl).to.equal(`/base/components/button-unstyled`); + let existed = false; + try { + fs.readdirSync(path.join(process.cwd(), 'docs/data')); + existed = true; + // eslint-disable-next-line no-empty + } catch (error) {} + if (existed) { + expect(info.getDemos()).to.deep.equal([ + { + name: 'Buttons', + demoPathname: '/material/react-button/', + }, + ]); + } }); }); }); diff --git a/docs/scripts/buildApiUtils.ts b/docs/scripts/buildApiUtils.ts index 30579aa88dc1ac..2943cf325249ed 100644 --- a/docs/scripts/buildApiUtils.ts +++ b/docs/scripts/buildApiUtils.ts @@ -1,57 +1,229 @@ +import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; +import { getHeaders } from '@mui/markdown'; +import { findPagesMarkdown, findPagesMarkdownNew } from 'docs/src/modules/utils/find'; +import { getLineFeed } from 'docs/scripts/helpers'; +import { pageToTitle } from 'docs/src/modules/utils/helpers'; +import { replaceComponentLinks } from 'docs/src/modules/utils/replaceUrl'; -export function findComponentDemos( +function findComponentDemos( componentName: string, pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>, ) { - const demos = pagesMarkdown - .filter((page) => { - return page.components.includes(componentName); - }) - .map((page) => { - return page.pathname; - }); - - return Array.from(new Set(demos)); + const filteredMarkdowns = pagesMarkdown + .filter((page) => page.components.includes(componentName)) + .map((page) => page.pathname); + return Array.from(new Set(filteredMarkdowns)) // get unique filenames + .map((pathname) => ({ + name: pageToTitle({ pathname }) || '', + demoPathname: `${pathname}/`, + })); } -export function getMuiName(name: string) { +function getMuiName(name: string) { return `Mui${name.replace('Unstyled', '').replace('Styled', '')}`; } -function normalizeFilePath(filename: string) { - return filename.replace(new RegExp(`\\${path.sep}`, 'g'), '/'); -} +export const extractPackageFile = (filePath: string) => { + filePath = filePath.replace(new RegExp(`\\${path.sep}`, 'g'), '/'); + const match = filePath.match( + /.*\/packages.*\/(?[^/]+)\/src\/(.*\/)?(?[^/]+)\.(js|tsx|ts|d\.ts)/, + ); + const result = { + packagePath: match ? match.groups?.packagePath! : null, + name: match ? match.groups?.name! : null, + }; + return { + ...result, + muiPackage: result.packagePath?.replace('x-', 'mui-'), + }; +}; + +export const extractApiPage = (filePath: string) => { + filePath = filePath.replace(new RegExp(`\\${path.sep}`, 'g'), '/'); + return { + apiPathname: filePath + .replace(/^.*\/pages/, '') + .replace(/\.(js|tsx)/, '') + .replace(/^\/index$/, '/') // Replace `index` by `/`. + .replace(/\/index$/, ''), + }; +}; + +const parseFile = (filename: string) => { + const src = fs.readFileSync(filename, 'utf8'); + return { + src, + shouldSkip: + filename.indexOf('internal') !== -1 || + !!src.match(/@ignore - internal component\./) || + !!src.match(/@ignore - do not document\./), + spread: !src.match(/ = exactProp\(/), + EOL: getLineFeed(src), + inheritedComponent: src.match(/\/\/ @inheritedComponent (.*)/)?.[1], + }; +}; + +export type ComponentInfo = { + /** + * Full path to the file + */ + filename: string; + /** + * Component name + */ + name: string; + /** + * Component name with `Mui` prefix + */ + muiName: string; + apiPathname: string; + readFile: () => { + src: string; + spread: boolean; + shouldSkip: boolean; + EOL: string; + inheritedComponent?: string; + }; + getInheritance: (inheritedComponent?: string) => null | { + /** + * Component name + */ + name: string; + /** + * API pathname + */ + apiPathname: string; + }; + getDemos: () => Array<{ name: string; demoPathname: string }>; + apiPagesDirectory: string; +}; -/** - * Provide information from the filename, can be component or markdown. (will be removed once migration is done) - * component example: /Users/siriwatknp/Personal-Repos/material-ui/packages/mui-material/src/Button/Button.js - * markdown example: /Users/siriwatknp/Personal-Repos/material-ui/docs/src/pages/components/buttons/buttons.md - */ -export const getGeneralPathInfo = (filename: string) => { - filename = normalizeFilePath(filename); - const componentName = filename.match(/.*\/([^/]+)\.(tsx|js)/)?.[1]; +export const getGenericComponentInfo = (filename: string): ComponentInfo => { + const { name } = extractPackageFile(filename); + let srcInfo: null | ReturnType = null; + if (!name) { + throw new Error(`Could not find the component name from: ${filename}`); + } return { - apiUrl: `/api/${kebabCase(componentName)}`, - demoUrl: filename.replace(/^.*\/pages/, '').replace(/\/[^/]+\.(md|js|ts|tsx)/, ''), + filename, + name, + muiName: getMuiName(name), + apiPathname: `/api/${kebabCase(name)}/`, + apiPagesDirectory: path.join(process.cwd(), 'docs/pages/api-docs'), + readFile() { + srcInfo = parseFile(filename); + return srcInfo; + }, + getInheritance(inheritedComponent = srcInfo?.inheritedComponent) { + if (!inheritedComponent) { + return null; + } + return { + name: inheritedComponent, + apiPathname: + inheritedComponent === 'Transition' + ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' + : `/api/${kebabCase(inheritedComponent)}/`, + }; + }, + getDemos: () => { + const allMarkdowns = findPagesMarkdown().map((markdown) => ({ + ...markdown, + components: getHeaders(fs.readFileSync(markdown.filename, 'utf8')).components as string[], + })); + return findComponentDemos(name, allMarkdowns); + }, }; }; -export const getMaterialPathInfo = (filename: string) => { - filename = normalizeFilePath(filename); - const componentName = filename.match(/.*\/([^/]+)\.(tsx|js)/)?.[1]; +function findNewComponentDemos( + componentName: string, + pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>, +) { + const filteredMarkdowns = pagesMarkdown + .filter((page) => page.components.includes(componentName)) + .map((page) => page.pathname); + return Array.from(new Set(filteredMarkdowns)) // get unique filenames + .map((pathname) => ({ + name: pageToTitle({ pathname }) || '', + demoPathname: replaceComponentLinks(`${pathname.replace(/^\/material/, '')}/`), + })); +} + +export const getMaterialComponentInfo = (filename: string): ComponentInfo => { + const { name } = extractPackageFile(filename); + let srcInfo: null | ReturnType = null; + if (!name) { + throw new Error(`Could not find the component name from: ${filename}`); + } return { - apiUrl: `/material/api/${kebabCase(componentName)}`, - demoUrl: filename.replace(/^.*\/data/, '').replace(/\/[^/]+\.(md|js|ts|tsx)/, ''), + filename, + name, + muiName: getMuiName(name), + apiPathname: `/material/api/${kebabCase(name)}/`, + apiPagesDirectory: path.join(process.cwd(), `docs/pages/material/api`), + readFile() { + srcInfo = parseFile(filename); + return srcInfo; + }, + getInheritance(inheritedComponent = srcInfo?.inheritedComponent) { + if (!inheritedComponent) { + return null; + } + return { + name: inheritedComponent, + apiPathname: + inheritedComponent === 'Transition' + ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' + : `/material/api/${kebabCase(inheritedComponent)}/`, + }; + }, + getDemos: () => { + const allMarkdowns = findPagesMarkdownNew().map((markdown) => ({ + ...markdown, + components: getHeaders(fs.readFileSync(markdown.filename, 'utf8')).components as string[], + })); + return findNewComponentDemos(name, allMarkdowns); + }, }; }; -export const getBasePathInfo = (filename: string) => { - filename = normalizeFilePath(filename); - const componentName = filename.match(/.*\/([^/]+)\.(tsx|js)/)?.[1]; +export const getBaseComponentInfo = (filename: string): ComponentInfo => { + const { name } = extractPackageFile(filename); + let srcInfo: null | ReturnType = null; + if (!name) { + throw new Error(`Could not find the component name from: ${filename}`); + } return { - apiUrl: `/base/api/${kebabCase(componentName)}`, - demoUrl: filename.replace(/^.*\/data/, '').replace(/\/[^/]+\.(md|js|ts|tsx)/, ''), + filename, + name, + muiName: getMuiName(name), + apiPathname: `/base/api/${kebabCase(name)}/`, + apiPagesDirectory: path.join(process.cwd(), `docs/pages/base/api`), + readFile() { + srcInfo = parseFile(filename); + return srcInfo; + }, + getInheritance(inheritedComponent = srcInfo?.inheritedComponent) { + if (!inheritedComponent) { + return null; + } + return { + name: inheritedComponent, + apiPathname: + inheritedComponent === 'Transition' + ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' + : `/base/api/${kebabCase(inheritedComponent)}/`, + }; + }, + getDemos: () => { + const allMarkdowns = findPagesMarkdownNew().map((markdown) => ({ + ...markdown, + components: getHeaders(fs.readFileSync(markdown.filename, 'utf8')).components as string[], + })); + return findNewComponentDemos(name, allMarkdowns); + }, }; }; diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index 8cc123a47d3f8c..f2cea30ac5f638 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -9,7 +9,7 @@ * List of demos to ignore when transpiling * Example: "app-bar/BottomAppBar.tsx" */ -const ignoreList = []; +const ignoreList = ['/pages.ts']; const fse = require('fs-extra'); const path = require('path'); diff --git a/docs/scripts/postMigration.ts b/docs/scripts/postMigration.ts new file mode 100644 index 00000000000000..48a0ea404f07f5 --- /dev/null +++ b/docs/scripts/postMigration.ts @@ -0,0 +1,138 @@ +import fs from 'fs-extra'; +import path from 'path'; +import prettier from 'prettier'; +import replaceMarkdownLinks from '../src/modules/utils/replaceMarkdownLinks'; + +const workspaceRoot = path.resolve(__dirname, '../../'); +const prettierConfigPath = path.join(workspaceRoot, 'prettier.config.js'); + +function writePrettifiedFile(filename: string, data: string, options: object = {}) { + const prettierConfig = prettier.resolveConfig.sync(filename, { + config: prettierConfigPath, + }); + if (prettierConfig === null) { + throw new Error( + `Could not resolve config for '${filename}' using prettier config path '${prettierConfigPath}'.`, + ); + } + + fs.writeFileSync(filename, prettier.format(data, { ...prettierConfig, filepath: filename }), { + encoding: 'utf8', + ...options, + }); +} + +const readdirDeep = (directory: string, pathsProp: string[] = []) => { + const paths: string[] = pathsProp; + const items = fs.readdirSync(directory); + items.forEach((item) => { + const itemPath = path.resolve(directory, item); + + if (fs.statSync(itemPath).isDirectory()) { + readdirDeep(itemPath, paths); + } + + if (itemPath.match(/.*\/[^/]+\.[^.]+/)) { + // ends with extension + paths.push(itemPath); + } + }); + + return paths; +}; + +function run() { + fs.removeSync(path.resolve(`docs/pages/api-docs`)); + fs.removeSync(path.resolve(`docs/pages/components`)); + fs.removeSync(path.resolve(`docs/pages/customization`)); + fs.removeSync(path.resolve(`docs/pages/discover-more`)); + fs.removeSync(path.resolve(`docs/pages/getting-started`)); + fs.removeSync(path.resolve(`docs/pages/guides`)); + fs.removeSync(path.resolve(`docs/pages/styles`)); + + fs.removeSync(path.resolve(`test/e2e-website/material-current.spec.ts`)); + + const dataDir = readdirDeep(path.resolve(`docs/data`)); + dataDir.forEach((filePath) => { + if (filePath.endsWith('.md')) { + let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); + + data = replaceMarkdownLinks(data); + + writePrettifiedFile(filePath, data); + } + }); + + // Turn feature toggle `enable_product_scope: true` + const featureTogglePath = path.join(process.cwd(), 'docs/src/featureToggle.js'); + let featureToggle = fs.readFileSync(featureTogglePath, { encoding: 'utf8' }); + + featureToggle = featureToggle + .replace(`enable_redirects: false`, `enable_redirects: true`) + .replace(`enable_system_scope: false`, `enable_system_scope: true`); + + fs.writeFileSync(featureTogglePath, featureToggle); + + // Add redirects to _redirects (netlify) + const redirectsPath = path.join(process.cwd(), 'docs/public/_redirects'); + let redirects = fs.readFileSync(redirectsPath, { encoding: 'utf8' }); + + redirects = redirects.replace( + `# 2022`, + `# 2022 +## MUI X +/components/data-grid/* https://material-ui-x.netlify.app/x/react-data-grid/:splat 200 +/api/data-grid/* https://material-ui-x.netlify.app/x/api/data-grid/:splat 200 +/x/* https://material-ui-x.netlify.app/x/:splat 200 + +## MUI Core +/styles/* /system/styles/:splat 301 +/getting-started/* /material/getting-started/:splat 301 +/customization/* /material/customization/:splat 301 +/guides/* /material/guides/:splat 301 +/discover-more/* /material/discover-more/:splat 301 + +### Exceptions +/components/icons/ /material/icons/ 301 +/components/material-icons/ /material/material-icons/ 301 +/components/about-the-lab/ /material/about-the-lab/ 301 +/components/transitions/ /material/transitions/ 301 +/components/pickers/ /material/pickers/ 301 + +### React plural +/components/tabs/ /material/react-tabs/ 301 +/components/breadcrumbs/ /material/react-breadcrumbs/ 301 + +/components/checkboxes/ /material/react-checkbox/ 301 +/components/switches/ /material/react-switch/ 301 +/components/buttons/ /material/react-button/ 301 +/components/radio-buttons/ /material/react-radio-button/ 301 +/components/selects/ /material/react-select/ 301 +/components/text-fields/ /material/react-text-field/ 301 +/components/avatars/ /material/react-avatar/ 301 +/components/badges/ /material/react-badge/ 301 +/components/chips/ /material/react-chip/ 301 +/components/dividers/ /material/react-divider/ 301 +/components/lists/ /material/react-list/ 301 +/components/tables/ /material/react-table/ 301 +/components/tooltips/ /material/react-tooltip/ 301 +/components/dialogs/ /material/react-dialog/ 301 +/components/snackbars/ /material/react-snackbar/ 301 +/components/cards/ /material/react-card/ 301 +/components/drawers/ /material/react-drawer/ 301 +/components/links/ /material/react-link/ 301 +/components/menus/ /material/react-menu/ 301 +/components/steppers/ /material/react-stepper/ 301 +/components/* /material/react-:splat 301 +/api/* /material/api/:splat 301`, + ); + + // remove X redirects because of the above redirects + redirects + .replace('/api/*/ https://docs-v5--material-ui-x.netlify.app/api/:splat/ 200', '') + .replace('/components/* https://docs-v5--material-ui-x.netlify.app/components/:splat 200', ''); + + fs.writeFileSync(redirectsPath, redirects); +} + +run(); diff --git a/docs/scripts/restructure.ts b/docs/scripts/restructure.ts index 7a1177a3c2ab8f..7dd2a949612052 100644 --- a/docs/scripts/restructure.ts +++ b/docs/scripts/restructure.ts @@ -1,9 +1,7 @@ import fs from 'fs'; import path from 'path'; import prettier from 'prettier'; -import pages from 'docs/src/pages'; import { - refactorJsonContent, getNewDataLocation, getNewPageLocation, productPathnames, @@ -14,50 +12,25 @@ const workspaceRoot = path.resolve(__dirname, '../../'); const prettierConfigPath = path.join(workspaceRoot, 'prettier.config.js'); function writePrettifiedFile(filename: string, data: string, options: object = {}) { - const prettierConfig = prettier.resolveConfig.sync(filename, { - config: prettierConfigPath, - }); - if (prettierConfig === null) { - throw new Error( - `Could not resolve config for '${filename}' using prettier config path '${prettierConfigPath}'.`, - ); - } + if (filename.endsWith('.tsx.preview')) { + fs.writeFileSync(filename, data); + } else { + const prettierConfig = prettier.resolveConfig.sync(filename, { + config: prettierConfigPath, + }); + if (prettierConfig === null) { + throw new Error( + `Could not resolve config for '${filename}' using prettier config path '${prettierConfigPath}'.`, + ); + } - fs.writeFileSync(filename, prettier.format(data, { ...prettierConfig, filepath: filename }), { - encoding: 'utf8', - ...options, - }); + fs.writeFileSync(filename, prettier.format(data, { ...prettierConfig, filepath: filename }), { + encoding: 'utf8', + ...options, + }); + } } -const prefixSource = (arraySource: string, pathnames: string[], product: string) => { - let target = arraySource; - - // prefix with `/${product}/` - pathnames.forEach((pathname) => { - const replace = `"${pathname}/([-/a-z]*)"`; - target = target.replace(new RegExp(replace, 'g'), `"/${product}${pathname}/$1"`); - target = target.replace( - new RegExp(`"pathname":"${pathname}"`, 'g'), - `"pathname":"/${product}${pathname}"`, - ); - }); - - return target; -}; - -const createProductPagesData = (arraySource: string, product: string) => { - // prepare source code - const source = ` -const pages = ${arraySource} - -export default pages - `; - - // create new folder and add prettified file. - fs.mkdirSync(`${workspaceRoot}/docs/data/${product}`, { recursive: true }); - writePrettifiedFile(`${workspaceRoot}/docs/data/${product}/pages.ts`, source); -}; - const appendSource = (target: string, template: string, source: string) => { const match = source.match(/^(.*)$/m); if (match && target.includes(match[0])) { @@ -71,6 +44,11 @@ const appendSource = (target: string, template: string, source: string) => { const updateAppToUseProductPagesData = (product: string) => { const appPath = path.resolve(__dirname, '../../docs/pages/_app.js'); let appSource = fs.readFileSync(appPath, { encoding: 'utf8' }); + appSource = appendSource( + appSource, + `import findActivePage from 'docs/src/modules/utils/findActivePage';`, + `import FEATURE_TOGGLE from 'docs/src/featureToggle';`, + ); appSource = appendSource( appSource, `import pages from 'docs/src/pages';`, @@ -79,7 +57,9 @@ const updateAppToUseProductPagesData = (product: string) => { appSource = appendSource( appSource, `let productPages = pages;`, - `if (router.asPath.startsWith('/${product}')) { + `if (asPathWithoutLang.startsWith('/${product}')${ + product === 'system' ? ` && FEATURE_TOGGLE.enable_system_scope` : '' + }) { productPages = ${product}Pages; }`, ); @@ -96,7 +76,10 @@ const readdirDeep = (directory: string, pathsProp: string[] = []) => { readdirDeep(itemPath, paths); } - paths.push(itemPath); + if (itemPath.match(/.*\/[^/]+\.[^.]+/)) { + // ends with extension + paths.push(itemPath); + } }); return paths; @@ -107,73 +90,112 @@ function run() { * clone pages & api data from `docs/src/pages.ts` to `docs/src/data/materialPages.ts` * also prefix all pathnames with `/$product/` by using Regexp replace */ - (['styles', 'system', 'material'] as const).forEach((product) => { + (['system', 'material'] as const).forEach((product) => { const pathnames = productPathnames[product] as unknown as string[]; - const productPages = pages.filter((item) => pathnames.includes(item.pathname)); - - let arraySource = JSON.stringify(productPages); - - if (product === 'material') { - arraySource = prefixSource(arraySource, [...pathnames, '/api'], 'material'); - } - - createProductPagesData(arraySource, product); // update _app.js to use product pages updateAppToUseProductPagesData(product); pathnames.forEach((pathname) => { - if (pathname !== '/api-docs') { - // clone js/md data to new location - const dataDir = readdirDeep(path.resolve(`docs/src/pages${pathname}`)); - dataDir.forEach((filePath) => { - const info = getNewDataLocation(filePath, product); - // pathname could be a directory - if (info) { - let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); - if (filePath.endsWith('.md')) { - data = markdown.removeDemoRelativePath(data); - data = markdown.addMaterialPrefixToLinks(data); - if (product === 'material') { - data = markdown.addProductFrontmatter(data, 'material'); - } + // clone js/md data to new location + const dataDir = readdirDeep(path.resolve(`docs/src/pages${pathname}`)); + dataDir.forEach((filePath) => { + const info = getNewDataLocation(filePath, product); + // pathname could be a directory + if (info) { + let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); + if (filePath.endsWith('.md')) { + data = markdown.removeDemoRelativePath(data); + if (product === 'material') { + data = markdown.addProductFrontmatter(data, 'material'); } - fs.mkdirSync(info.directory, { recursive: true }); - fs.writeFileSync(info.path, data); // (A) } - }); - } + fs.mkdirSync(info.directory, { recursive: true }); + writePrettifiedFile(info.path, data); // (A) + + fs.rmSync(filePath); + } + }); const pagesDir = readdirDeep(path.resolve(`docs/pages${pathname}`)); pagesDir.forEach((filePath) => { if (product === 'material') { - // clone pages to new location - const info = getNewPageLocation(filePath); - // pathname could be a directory - if (info) { - let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); - - if (filePath.endsWith('.json')) { - data = refactorJsonContent(data); - } + if (!filePath.includes('api-docs')) { + // clone pages to new location + const info = getNewPageLocation(filePath); + // pathname could be a directory + if (info) { + let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); + + if (filePath.endsWith('.js')) { + data = data.replace('/src/pages/', `/data/material/`); // point to data path (A) in new directory + } - if (filePath.endsWith('.js')) { - data = data.replace('/src/pages/', `/products/${product}/`); // point to data path (A) in new directory - } + fs.mkdirSync(info.directory, { recursive: true }); + writePrettifiedFile(info.path, data); - fs.mkdirSync(info.directory, { recursive: true }); - fs.writeFileSync(info.path, data); + writePrettifiedFile(filePath, data); + } } } else { let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); if (filePath.endsWith('.js')) { - data = data.replace('/src/pages/', `/products/`); // point to data path (A) in new directory + data = data.replace(`/src/pages/`, `/data/`); // point to data path (A) in new directory } - fs.writeFileSync(filePath, data); + writePrettifiedFile(filePath, data); } }); }); }); + + /** + * ====================================================================== + * Styles legacy + */ + const stylesDataDir = readdirDeep(path.resolve(`docs/src/pages/styles`)); + stylesDataDir.forEach((filePath) => { + // pathname could be a directory + let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); + if (filePath.endsWith('.md')) { + data = markdown.removeDemoRelativePath(data); + } + const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json|tsx\.preview)$/); + fs.mkdirSync(match[1].replace('src/pages', 'data'), { recursive: true }); + writePrettifiedFile(filePath.replace('src/pages', 'data'), data); + + fs.rmSync(filePath); + }); + + const stylesPagesDir = readdirDeep(path.resolve(`docs/pages/styles`)); + stylesPagesDir.forEach((filePath) => { + let data = fs.readFileSync(filePath, { encoding: 'utf-8' }); + if (filePath.endsWith('.js')) { + data = data.replace(`src/pages`, `data`); + } + + // replace the old file + writePrettifiedFile(filePath, data); + + // add to /system + const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json|tsx\.preview)$/); + fs.mkdirSync(match[1].replace('pages/styles', 'pages/system/styles'), { recursive: true }); + writePrettifiedFile(filePath.replace('pages/styles', 'pages/system/styles'), data); + }); + // ======================================================================= + + // include `base` pages in `_app.js` + updateAppToUseProductPagesData('base'); + + // Turn feature toggle `enable_product_scope: true` + const featureTogglePath = path.join(process.cwd(), 'docs/src/featureToggle.js'); + let featureToggle = fs.readFileSync(featureTogglePath, { encoding: 'utf8' }); + + featureToggle = featureToggle.replace( + `enable_product_scope: false`, + `enable_product_scope: true`, + ); + + writePrettifiedFile(featureTogglePath, featureToggle); } run(); diff --git a/docs/scripts/restructureUtils.test.ts b/docs/scripts/restructureUtils.test.ts index cc1f2f33474a40..424b20a60beb36 100644 --- a/docs/scripts/restructureUtils.test.ts +++ b/docs/scripts/restructureUtils.test.ts @@ -1,10 +1,5 @@ import { expect } from 'chai'; -import { - markdown, - refactorJsonContent, - getNewDataLocation, - getNewPageLocation, -} from './restructureUtils'; +import { markdown, getNewDataLocation, getNewPageLocation } from './restructureUtils'; describe('restructure utils', () => { describe('refactorMarkdownContent', () => { @@ -71,24 +66,6 @@ githubLabel: 'component: Avatar' }); }); - describe('refactorJsonContent', () => { - it('add prefix to demos value', () => { - expect( - refactorJsonContent( - `"demos": ""`, - ), - ).to.equal( - `"demos": ""`, - ); - }); - - it('add prefix to pathname value', () => { - expect( - refactorJsonContent(`"inheritance": { "component": "Paper", "pathname": "/api/paper/" },`), - ).to.equal(`"inheritance": { "component": "Paper", "pathname": "/material/api/paper/" },`); - }); - }); - it('getNewDataLocation', () => { expect( getNewDataLocation( @@ -115,5 +92,40 @@ githubLabel: 'component: Avatar' directory: 'material-ui/docs/pages/material/getting-started', path: 'material-ui/docs/pages/material/getting-started/installation.js', }); + + expect(getNewPageLocation('material-ui/docs/pages/components/buttons.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-button.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/image-list.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-image-list.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/no-ssr.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-no-ssr.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/masonry.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-masonry.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/trap-focus.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-trap-focus.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/css-baseline.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/react-css-baseline.js', + }); + + expect(getNewPageLocation('material-ui/docs/pages/components/about-the-lab.js')).to.deep.equal({ + directory: 'material-ui/docs/pages/material', + path: 'material-ui/docs/pages/material/about-the-lab.js', + }); }); }); diff --git a/docs/scripts/restructureUtils.ts b/docs/scripts/restructureUtils.ts index 6d854fc72def48..bac03f433eaa09 100644 --- a/docs/scripts/restructureUtils.ts +++ b/docs/scripts/restructureUtils.ts @@ -1,22 +1,20 @@ +import { replaceComponentLinks } from '../src/modules/utils/replaceUrl'; + export const productPathnames = { - material: [ - '/getting-started', - '/components', - '/api-docs', - '/customization', - '/guides', - '/discover-more', - ], + material: ['/getting-started', '/components', '/customization', '/guides', '/discover-more'], system: ['/system'], styles: ['/styles'], } as const; export const markdown = { removeDemoRelativePath: (content: string) => - content.replace(/"pages\/[/\-a-zA-Z]*\/([a-zA-Z]*\.js)"/gm, `"$1"`), + content.replace(/"pages\/?[^"]*\/([^"]+\.js)"/gm, `"$1"`), addMaterialPrefixToLinks: (content: string) => { productPathnames.material.forEach((path) => { - content = content.replace(new RegExp(`\\(${path}`, 'g'), `(/material${path}`); + content = content.replace( + new RegExp(`\\(${path}`, 'g'), + `(/material${path.replace('/components/', '/react-')}`, + ); }); return content; }, @@ -24,23 +22,11 @@ export const markdown = { content.replace('---', `---\nproduct: ${product}`), }; -export const refactorJsonContent = (content: string) => { - let result = content; - - // i. add prefix to "demos" key - result = result.replace(/href=\\"\/components/g, 'href=\\"/material/components'); - - // ii. add prefix to "pathname" value - result = result.replace(/"pathname": "\/api/g, '"pathname": "/material/api'); - - return result; -}; - export const getNewDataLocation = ( filePath: string, product: string, ): { directory: string; path: string } | null => { - const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json)$/); + const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json|tsx\.preview)$/); if (!match) { return null; } @@ -53,10 +39,16 @@ export const getNewDataLocation = ( export const getNewPageLocation = ( filePath: string, ): { directory: string; path: string } | null => { - const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json)$/); + const match = filePath.match(/^(.*)\/[^/]+\.(ts|js|tsx|md|json|tsx\.preview)$/); if (!match) { return null; } + if (filePath.match('pages/components')) { + return { + directory: match[1].replace('docs/pages/components', 'docs/pages/material'), + path: replaceComponentLinks(filePath), + }; + } return { directory: match[1].replace('docs/pages', 'docs/pages/material'), path: filePath.replace('docs/pages', 'docs/pages/material'), diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx index 03e9947999f8f4..db0d920c2f8ea2 100644 --- a/docs/src/components/footer/EmailSubscribe.tsx +++ b/docs/src/components/footer/EmailSubscribe.tsx @@ -118,6 +118,15 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps }) { typography: 'body2', flexGrow: 1, minWidth: 200, + '&:focus': { + outline: (theme) => + `2px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primary[400] + : theme.palette.primary[200] + }`, + outlineOffset: '2px', + }, }} /> - + diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index e3de57e8b3f536..c9cf147a0f42dc 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -71,7 +71,7 @@ export default function GoldSponsors() { }); return ( - + theme.palette.mode === 'dark' ? theme.palette.warning[500] - : theme.palette.warning[800], + : theme.palette.warning[700], }} > Gold diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx index f2107c2592c050..66817778495029 100644 --- a/docs/src/components/home/Hero.tsx +++ b/docs/src/components/home/Hero.tsx @@ -122,6 +122,7 @@ export default function Hero() { } rightSx={{ p: 3, + ml: 2, minWidth: 2000, overflowY: 'auto', '& > div': { diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx index 6101f5c008f17e..0ee5cfbd1c04f1 100644 --- a/docs/src/components/home/MaterialDesignComponents.tsx +++ b/docs/src/components/home/MaterialDesignComponents.tsx @@ -7,6 +7,7 @@ import { useTheme, Theme, ThemeOptions, + alpha, } from '@mui/material/styles'; import { capitalize } from '@mui/material/utils'; import Alert from '@mui/material/Alert'; @@ -103,7 +104,6 @@ const Grid = styled('div')(({ theme }) => ({ }, '&:last-of-type': { borderBottomRightRadius: theme.shape.borderRadius, - borderStyle: 'dashed', }, '&:nth-last-of-type(3)': { borderBottomLeftRadius: theme.shape.borderRadius, @@ -228,7 +228,7 @@ export function buildTheme(theme: Theme): ThemeOptions { ...theme.typography, button: { ...theme.typography.button, - fontSize: '1rem', + fontSize: '0.875rem', lineHeight: 24 / 16, }, }, @@ -243,19 +243,44 @@ export function buildTheme(theme: Theme): ThemeOptions { disableElevation: true, }, styleOverrides: { - text: { - color: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[200] - : theme.palette.primaryDark[700], + root: { + borderRadius: '99px', + fontWeight: 500, + fontSize: '0.875rem', + lineHeight: 24 / 16, + }, + sizeSmall: { + padding: theme.spacing(0.5, 1), }, sizeMedium: { - padding: theme.spacing(1, 2), + padding: theme.spacing(0.8, 2), }, sizeLarge: { - padding: theme.spacing(1.5, 2.5), + padding: theme.spacing(1, 2), fontSize: '1rem', - lineHeight: 24 / 16, + }, + contained: { + color: theme.palette.primaryDark[50], + bgColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[400] + : theme.palette.primaryDark[600], + }, + text: { + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[50] + : theme.palette.primaryDark[700], + }, + outlined: { + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[300] + : theme.palette.primaryDark[600], + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[50] + : theme.palette.primaryDark[700], }, iconSizeSmall: { '& > *:nth-of-type(1)': { @@ -264,18 +289,13 @@ export function buildTheme(theme: Theme): ThemeOptions { }, iconSizeMedium: { '& > *:nth-of-type(1)': { - fontSize: '1rem', + fontSize: '0.875rem', }, }, - outlined: { - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[200] - : theme.palette.primaryDark[700], - color: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[200] - : theme.palette.primaryDark[700], + iconSizeLarge: { + '& > *:nth-of-type(1)': { + fontSize: '1rem', + }, }, }, }, @@ -294,23 +314,53 @@ export function buildTheme(theme: Theme): ThemeOptions { }, }, filled: { + color: theme.palette.primaryDark[50], backgroundColor: theme.palette.mode === 'dark' - ? theme.palette.primaryDark[800] + ? theme.palette.primaryDark[500] + : theme.palette.primaryDark[700], + '& .MuiAlert-icon': { + color: theme.palette.primary[50], + }, + }, + outlined: { + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[50] : theme.palette.primaryDark[700], + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.5) + : alpha(theme.palette.primaryDark[50], 0.5), + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[200] + : theme.palette.primaryDark[600], '& .MuiAlert-icon': { - color: theme.palette.primary[100], + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[100] + : theme.palette.primaryDark[800], }, }, message: { padding: 0, - fontWeight: 700, + fontWeight: 500, }, standardInfo: { - backgroundColor: theme.palette.primaryDark[100], - color: theme.palette.primaryDark[600], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.primaryDark[50], + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[50] + : theme.palette.primaryDark[700], '& .MuiAlert-icon': { - color: theme.palette.primaryDark[600], + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[50] + : theme.palette.primaryDark[700], }, }, icon: { @@ -395,7 +445,9 @@ export function buildTheme(theme: Theme): ThemeOptions { MuiPopover: { styleOverrides: { paper: { - boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.1)', + boxShadow: `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, }, }, }, @@ -440,7 +492,7 @@ export default function MaterialDesignComponents() { mt: { xs: 2, md: 4 }, mb: 2, display: 'flex', - justifyContent: { xs: 'flex-start', sm: 'flex-end' }, + justifyContent: { sm: 'flex-start', md: 'flex-end' }, }} > + {data.map((item) => ( theme.palette.mode === 'dark' ? 'primaryDark.600' : 'primary.100', }} > (theme.palette.mode === 'dark' ? 'primary.200' : 'primary.main')} fontWeight="bold" > diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx index bcdccf6fa6f092..988e39acc7962b 100644 --- a/docs/src/components/home/ProductsSwitcher.tsx +++ b/docs/src/components/home/ProductsSwitcher.tsx @@ -71,7 +71,7 @@ function ProductItem({ alignItems: 'center', minHeight: 24, '& > svg': { transition: '0.2s' }, - '&:hover > svg': { transform: 'translateX(4px)' }, + '&:hover > svg': { transform: 'translateX(2px)' }, }} onClick={(event: React.MouseEvent) => { event.stopPropagation(); diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx index d8fe42e515c7da..9d72b49b35e7bb 100644 --- a/docs/src/components/home/StartToday.tsx +++ b/docs/src/components/home/StartToday.tsx @@ -11,7 +11,7 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; export default function StartToday() { return ( - + (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')} + color="primary" variant="body2" fontWeight="bold" + sx={{ + '& > svg': { transition: '0.2s' }, + '&:hover > svg': { transform: 'translateX(2px)' }, + }} > Learn more{' '} @@ -53,8 +57,6 @@ export default function StartToday() { (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')} + color="primary" variant="body2" fontWeight="bold" + sx={{ + '& > svg': { transition: '0.2s' }, + '&:hover > svg': { transform: 'translateX(2px)' }, + }} > Learn more{' '} diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx index feaa15fff52b9d..abb34a48b739e8 100644 --- a/docs/src/components/home/UserFeedbacks.tsx +++ b/docs/src/components/home/UserFeedbacks.tsx @@ -21,7 +21,7 @@ const Feedback = ({ }) => { return ( - + {quote} @@ -31,17 +31,17 @@ const Feedback = ({ alt={`Picture of ${profile.name}`} imgProps={{ loading: 'lazy' }} sx={{ - width: 60, - height: 60, - border: '1px solid', - borderColor: '#fff', + width: 58, + height: 58, + border: '2px solid', + borderColor: 'primary.200', bgcolor: 'grey.800', }} /> - + {profile.name},{' '} - + {profile.role} diff --git a/docs/src/components/home/XGridGlobalStyles.tsx b/docs/src/components/home/XGridGlobalStyles.tsx index 1fdd1dc943e132..739908f1801f78 100644 --- a/docs/src/components/home/XGridGlobalStyles.tsx +++ b/docs/src/components/home/XGridGlobalStyles.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; +import { useTheme, alpha } from '@mui/material/styles'; import GlobalStyles from '@mui/material/GlobalStyles'; export default function XGridGlobalStyles({ @@ -42,11 +42,11 @@ export default function XGridGlobalStyles({ '& .MuiCheckbox-root': { color: theme.palette.mode === 'dark' - ? theme.palette.primary[300] + ? theme.palette.primary[400] : theme.palette.grey[600], padding: theme.spacing(0.5), '& > svg': { - fontSize: '1.25rem', + fontSize: '1.2rem', }, }, '& .MuiIconButton-root:not(.Mui-disabled)': { @@ -60,11 +60,14 @@ export default function XGridGlobalStyles({ '& .MuiDataGrid-menuIcon svg': { fontSize: '1rem', }, - '& .MuiDataGrid-columnsContainer': { - borderColor: + '& .MuiDataGrid-columnHeaders': { + borderBottom: `1px solid ${ theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] - : theme.palette.grey[200], + : theme.palette.grey[200] + }`, + }, + '& .MuiDataGrid-columnsContainer': { bgcolor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] : '#fff', }, '& .MuiDataGrid-columnHeaderTitleContainer': { @@ -93,12 +96,13 @@ export default function XGridGlobalStyles({ theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : theme.palette.grey[50], - '& .MuiDataGrid-cell': { - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200], - }, + }, + '& .MuiDataGrid-cell': { + borderBottom: `1px solid ${ + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[500], 0.5) + : theme.palette.grey[200] + }`, }, '& .MuiDataGrid-editInputCell': { fontSize: '0.75rem', @@ -120,7 +124,14 @@ export default function XGridGlobalStyles({ marginRight: theme.spacing(1), '& .MuiIconButton-root': { '&:not([disabled])': { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, + color: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[100] + : theme.palette.primary.main, + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[300] + : theme.palette.grey[400], }, borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.5), @@ -129,13 +140,13 @@ export default function XGridGlobalStyles({ theme.palette.mode === 'dark' ? theme.palette.primaryDark[600] : 'transparent', borderColor: theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] + ? theme.palette.primaryDark[500] : theme.palette.grey[200], '&:last-of-type': { marginLeft: theme.spacing(1), }, '& > svg': { - fontSize: '1.25rem', + fontSize: '1rem', }, }, }, diff --git a/docs/src/components/pricing/EarlyBird.tsx b/docs/src/components/pricing/EarlyBird.tsx index 3db056655f4cee..6b30d3066c9c60 100644 --- a/docs/src/components/pricing/EarlyBird.tsx +++ b/docs/src/components/pricing/EarlyBird.tsx @@ -52,7 +52,7 @@ export default function EarlyBird() { py: 1, ml: { xs: 0, sm: 2 }, mt: { xs: 3, sm: 0 }, - width: { xs: '100%', sm: '50%', md: '20%' }, + width: { xs: '100%', sm: '50%', md: '15%' }, }} > Buy now diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index f62a72ff4d570c..96a39436b31f42 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -331,25 +331,14 @@ function getUrl(hash: string) { const rowHeaders: Record = { // Core - '@mui/base': ( - - ), + '@mui/base': , '@mui/material': ( - + ), '@mui/system': ( ), // Advanced @@ -742,7 +731,7 @@ const StickyHead = ({ sx={{ position: 'fixed', zIndex: 1, - top: 64, + top: 56, left: 0, right: 0, transition: '0.3s', diff --git a/docs/src/components/productCore/CoreComponents.tsx b/docs/src/components/productCore/CoreComponents.tsx index 636704cdfbef35..48abd5c2da717c 100644 --- a/docs/src/components/productCore/CoreComponents.tsx +++ b/docs/src/components/productCore/CoreComponents.tsx @@ -314,6 +314,7 @@ export default function CoreComponents() {
    - + - + } + sx={{ width: { xs: '100%', sm: 'auto' } }} > Learn more diff --git a/docs/src/components/productCore/CoreStyling.tsx b/docs/src/components/productCore/CoreStyling.tsx index 7947c7193e13a9..443bbbfdc0ea43 100644 --- a/docs/src/components/productCore/CoreStyling.tsx +++ b/docs/src/components/productCore/CoreStyling.tsx @@ -302,7 +302,7 @@ export default function CoreStyling() { - + diff --git a/docs/src/components/productCore/CoreTheming.tsx b/docs/src/components/productCore/CoreTheming.tsx index db1649f1de2b22..c58102bdd7db66 100644 --- a/docs/src/components/productCore/CoreTheming.tsx +++ b/docs/src/components/productCore/CoreTheming.tsx @@ -18,38 +18,63 @@ import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; const lightTheme = createTheme(); const darkTheme = createTheme({ palette: { mode: 'dark' } }); -const code = ` - - - - Ultraviolet - - - Basement • Beside Myself - - - - - - setPaused((val) => !val)} - > - {paused ? : } - - - - - - +const code = ` + + + + Ultraviolet + + + Basement • Beside Myself + + + + + + setPaused((val) => !val)} + > + {paused ? : } + + + + + + `; export default function CoreTheming() { diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index eeed043a71967f..11c7d4f7fcc982 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -3,7 +3,8 @@ import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import Link from '@mui/material/Link'; +import Button from '@mui/material/Button'; +import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import InternalLink from 'docs/src/modules/components/Link'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; @@ -152,7 +153,9 @@ export default function DesignKitFAQ() { theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300', @@ -167,9 +170,17 @@ export default function DesignKitFAQ() { From community help to premium business support, we’re here to help. - + diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx index cd74ece34d01ce..5efec5769ad2e5 100644 --- a/docs/src/components/productX/XComponents.tsx +++ b/docs/src/components/productX/XComponents.tsx @@ -5,7 +5,6 @@ import Box from '@mui/material/Box'; import Fade from '@mui/material/Fade'; import Grid from '@mui/material/Grid'; import Chip from '@mui/material/Chip'; -import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; @@ -141,11 +140,6 @@ export default function XComponents() { - - - - - {demo === DEMOS[3] && ( @@ -205,10 +199,26 @@ export default function XComponents() { - - Coming soon! - - + + + Coming soon! + + + + + Subscribe to our newsletter to get first-hand info about the development and release of new components. diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx index 2000336fd59fef..4f166f717bede7 100644 --- a/docs/src/components/productX/XGridFullDemo.tsx +++ b/docs/src/components/productX/XGridFullDemo.tsx @@ -64,9 +64,13 @@ function SettingsPanel(props: GridToolbarContainerProps) { return ( *': { '&:not(:first-child)': { ml: 1 }, '&:last-child': { ml: 'auto' } }, + flexDirection: { xs: 'column', sm: 'row' }, + alignContent: { xs: 'start', sm: 'center' }, + '& > *': { + '&:not(:first-child)': { ml: { xs: 0, sm: 1 } }, + '&:last-child': { ml: 'auto' }, + }, '& .MuiFilledInput-root': { borderRadius: 1, backgroundColor: 'transparent', @@ -102,7 +106,9 @@ function SettingsPanel(props: GridToolbarContainerProps) { {Number(1000).toLocaleString()} - + ); } @@ -168,6 +174,7 @@ export default function XGridFullDemo() { '& .MuiDataGrid-root': { bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : '#fff'), '& .MuiAvatar-root': { width: 24, height: 24, fontSize: 14, fontWeight: 'bold' }, + '& .MuiButton-root': { marginLeft: 0, marginRight: 1 }, '& .MuiDataGrid-renderingZone': { '& .MuiDataGrid-cell': { bgcolor: (theme) => diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx index 4b63365fee1a79..f5dac4f8e7397a 100644 --- a/docs/src/components/productX/XHero.tsx +++ b/docs/src/components/productX/XHero.tsx @@ -17,6 +17,7 @@ import HeroContainer from 'docs/src/layouts/HeroContainer'; import IconImage from 'docs/src/components/icon/IconImage'; import FolderTreeView from 'docs/src/components/showcase/FolderTreeView'; import ROUTES from 'docs/src/route'; +import { alpha } from '@mui/material/styles'; const startDate = new Date(); startDate.setDate(10); @@ -70,33 +71,63 @@ export default function XHero() { }} right={ - + + theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff', + border: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[200] + }`, + boxShadow: (theme) => + `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(170, 180, 190, 0.3)' + }`, + mb: { md: 2, lg: 3, xl: 4 }, + }} + > - theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.100', + borderRadius: 0, + borderBottom: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[200] + }`, }} > - - Trades, October 2020 - + Trades, October 2020 svg': { fontSize: '1.25rem', }, }, + '& .MuiDataGrid-columnHeaders': { + borderBottom: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[200] + }`, + }, '& .MuiDataGrid-columnHeaderTitleContainer': { padding: 0, + color: 'text.primary', }, '& .MuiDataGrid-columnHeaderTitle': { flexGrow: 1, @@ -105,6 +136,16 @@ export default function XHero() { '& button, & button > svg': { fontSize: 16, }, + '& .MuiDataGrid-cell': { + fontSize: '0.875rem', + color: 'text.secondary', + borderBottom: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[600], 0.5) + : theme.palette.grey[200] + }`, + }, '& .MuiDataGrid-viewport': { '& .MuiDataGrid-cell': { fontSize: '0.875rem', @@ -141,7 +182,27 @@ export default function XHero() { p: { md: 2, lg: 3, xl: 0 }, }} > - + + theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff', + border: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[200] + }`, + boxShadow: (theme) => + `0px 4px 20px ${ + theme.palette.mode === 'dark' + ? 'rgba(0, 0, 0, 0.3)' + : 'rgba(170, 180, 190, 0.3)' + }`, + minWidth: 300, + mr: { md: 2, lg: 3, xl: 4 }, + flexGrow: 1, + }} + > Cool Project @@ -150,7 +211,24 @@ export default function XHero() { div': { borderRadius: 1, overflow: 'auto', bgcolor: 'transparent' }, + border: (theme) => + `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[200] + }`, + boxShadow: (theme) => + `0px 4px 20px ${ + theme.palette.mode === 'dark' + ? 'rgba(0, 0, 0, 0.3)' + : 'rgba(170, 180, 190, 0.3)' + }`, + '& > div': { + borderRadius: 1, + overflow: 'auto', + backgroundColor: (theme) => + theme.palette.mode === 'dark' ? 'primaryDark.800' : 'initial', + }, '& .MuiTypography-subtitle1': { fontSize: '0.875rem', }, diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx index e57738d1937e01..3c1d281f0d1623 100644 --- a/docs/src/components/productX/XPlans.tsx +++ b/docs/src/components/productX/XPlans.tsx @@ -30,7 +30,7 @@ export default function XPlans() {
    - + } + sx={{ width: { xs: '100%', sm: 'auto' } }} > Compare plans diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx index 26e327e3c6d15a..9590aab2cc1f77 100644 --- a/docs/src/components/productX/XRoadmap.tsx +++ b/docs/src/components/productX/XRoadmap.tsx @@ -77,10 +77,10 @@ export default function XRoadmap() { return (
    - + - + } + sx={{ width: { xs: '100%', sm: 'auto' } }} > See the roadmap diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx index c604ee32c38f7f..ce12ae24e33f7e 100644 --- a/docs/src/components/showcase/PlayerCard.tsx +++ b/docs/src/components/showcase/PlayerCard.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { ThemeProvider, createTheme, useTheme, Theme } from '@mui/material/styles'; import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import Card from '@mui/material/Card'; +import CardMedia from '@mui/material/CardMedia'; import Fade from '@mui/material/Fade'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; @@ -108,28 +110,29 @@ export default function PlayerCard({ theme: externalTheme }: { theme?: Theme }) - - Beside Myself album cover - - + /> + Ultraviolet @@ -137,17 +140,22 @@ export default function PlayerCard({ theme: externalTheme }: { theme?: Theme }) component="div" variant="caption" color="text.secondary" - sx={{ textAlign: { xs: 'center', sm: 'start' } }} + fontWeight={500} + sx={{ textAlign: { xm: 'center', sm: 'start' } }} > Basement • Beside Myself - + setPaused((val) => !val)} > {paused ? : } @@ -155,7 +163,7 @@ export default function PlayerCard({ theme: externalTheme }: { theme?: Theme }) - + diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js new file mode 100644 index 00000000000000..03db7e79bc4387 --- /dev/null +++ b/docs/src/featureToggle.js @@ -0,0 +1,10 @@ +// need to use commonjs export so that docs/packages/markdown can use +module.exports = { + nav_products: true, + enable_website_banner: false, + // TODO: cleanup once migration is done + enable_product_scope: false, // related to new structure change + enable_redirects: false, // related to new structure change + enable_mui_base_scope: false, // will be enabled after the migration + enable_system_scope: false, // will be enabled after the migration +}; diff --git a/docs/src/featureToggle.ts b/docs/src/featureToggle.ts deleted file mode 100644 index 1d4e86ecfc3cac..00000000000000 --- a/docs/src/featureToggle.ts +++ /dev/null @@ -1,7 +0,0 @@ -const FEATURE_TOGGLE = { - nav_products: true, - enable_product_scope: false, - enable_website_banner: false, -}; - -export default FEATURE_TOGGLE; diff --git a/docs/src/icons/SvgHamburgerMenu.tsx b/docs/src/icons/SvgHamburgerMenu.tsx index 9ec6c6c7e00b1f..e47c00f841f79b 100644 --- a/docs/src/icons/SvgHamburgerMenu.tsx +++ b/docs/src/icons/SvgHamburgerMenu.tsx @@ -5,8 +5,8 @@ export default function SvgHamburgerMenu(props: RootSvgProps) { return ( diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index e1d616686c39c2..59698eb18b820f 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -20,7 +20,8 @@ export default function AppFooter() { theme.typography.pxToRem(9), fontWeight: 700, @@ -146,7 +148,7 @@ export default function AppFooter() { title="GitHub" size="small" > - + - + - + - + diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx index a2c69274b0f734..cffc979d8cc1b5 100644 --- a/docs/src/layouts/AppHeader.tsx +++ b/docs/src/layouts/AppHeader.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { styled, alpha, useTheme } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import Container from '@mui/material/Container'; import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; import HeaderNavBar from 'docs/src/components/header/HeaderNavBar'; @@ -33,7 +34,6 @@ const Header = styled('header')(({ theme }) => ({ })); export default function AppHeader() { - const theme = useTheme(); const changeTheme = useChangeTheme(); const [mode, setMode] = React.useState(null); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); @@ -55,67 +55,39 @@ export default function AppHeader() { return (
    - + - + - + - - - - - - - {mode !== null ? ( - - ) : null} + + + + + + {mode !== null ? ( + + ) : null} + diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 1ccfa2a7c68736..a6305d1ca6d3b0 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1,6 +1,6 @@ import { deepmerge } from '@mui/utils'; import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; -import { createTheme, ThemeOptions, Theme } from '@mui/material/styles'; +import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; declare module '@mui/material/styles/createPalette' { interface ColorRange { @@ -114,7 +114,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => main: blue[400], }), }, - divider: mode === 'dark' ? blueDark[700] : grey[100], + divider: mode === 'dark' ? alpha(blue[100], 0.08) : grey[100], primaryDark: blueDark, mode, ...(mode === 'dark' && { @@ -177,8 +177,8 @@ export const getDesignTokens = (mode: 'light' | 'dark') => 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text + main: '#DEA500', 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - main: '#AB6800', 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text @@ -285,11 +285,15 @@ export function getThemedComponents(theme: Theme) { }, styleOverrides: { sizeLarge: { - padding: '1rem 1.25rem', + padding: '0.875rem 1rem', ...theme.typography.body1, lineHeight: 21 / 16, fontWeight: 700, }, + sizeSmall: { + padding: theme.spacing(0.5, 1), + marginLeft: theme.spacing(-1), + }, containedPrimary: { backgroundColor: theme.palette.primary[500], color: '#fff', @@ -305,14 +309,16 @@ export function getThemedComponents(theme: Theme) { borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[400] - : theme.palette.grey[200], + : theme.palette.grey[300], backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[50], - ...theme.typography.body2, fontFamily: theme.typography.fontFamilyCode, - fontWeight: 600, + fontWeight: 400, + fontSize: defaultTheme.typography.pxToRem(13), // 14px + lineHeight: 21 / 14, + letterSpacing: 0, WebkitFontSmoothing: 'subpixel-antialiased', '&:hover, &.Mui-focusVisible': { borderColor: theme.palette.primary.main, @@ -331,13 +337,119 @@ export function getThemedComponents(theme: Theme) { color: theme.palette.grey[400], }, '& .MuiButton-endIcon': { + display: 'inline-block', + position: 'absolute', + right: 0, + marginRight: 10, color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[700], }, }, }, + { + props: { variant: 'link' }, + style: { + fontSize: theme.typography.pxToRem(14), + fontWeight: 700, + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + mb: 1, + '& svg': { + ml: -0.5, + }, + }, + }, + ], + }, + MuiIconButton: { + variants: [ + { + props: { color: 'primary' }, + style: { + height: 34, + width: 34, + border: `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200] + }`, + borderRadius: theme.shape.borderRadius, + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[500], + '&:hover': { + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[300], + background: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + }, + }, ], }, + MuiMenu: { + styleOverrides: { + paper: { + mt: 0.5, + minWidth: 160, + elevation: 0, + color: theme.palette.text.secondary, + backgroundImage: 'none', + bgColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.background.paper, + border: `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200] + }`, + '& .MuiMenuItem-root': { + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + '&:focus': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + '&.Mui-selected': { + fontWeight: 500, + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : alpha(theme.palette.primary[100], 0.6), + }, + }, + }, + }, + }, + MuiPopover: { + styleOverrides: { + paper: { + boxShadow: `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, + }, + }, + }, MuiContainer: { styleOverrides: { root: { @@ -353,7 +465,7 @@ export function getThemedComponents(theme: Theme) { root: { borderColor: theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] + ? alpha(theme.palette.primary[100], 0.08) : theme.palette.grey[100], }, }, @@ -366,11 +478,17 @@ export function getThemedComponents(theme: Theme) { root: { color: theme.palette.mode === 'dark' - ? theme.palette.primary[400] + ? theme.palette.primary[300] : theme.palette.primary[600], fontWeight: 700, display: 'inline-flex', alignItems: 'center', + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[200] + : theme.palette.primary[700], + }, '&.MuiTypography-body1 > svg': { marginTop: 2, }, @@ -380,12 +498,85 @@ export function getThemedComponents(theme: Theme) { }, }, }, + MuiChip: { + styleOverrides: { + root: { + fontWeight: 500, + }, + outlined: { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.grey[900], + backgroundColor: 'transparent', + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[300], + }, + filled: { + border: '1px solid transparent', + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[800], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.primary[100], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[200], + }, + }, + deleteIcon: { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[100] + : theme.palette.primary[900], + }, + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, MuiListItemButton: { styleOverrides: { root: { - borderRadius: 5, - '&:hover, &:focus': { - backgroundColor: theme.palette.mode === 'dark' ? '' : theme.palette.grey[100], + padding: '8px', + textTransform: 'none', + fontWeight: 500, + fontSize: theme.typography.pxToRem(14), + color: + theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], + borderRadius: 0, + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + '&.Mui-selected': { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], + borderRadius: 10, + border: '1px solid', + borderColor: + theme.palette.mode === 'dark' + ? `${theme.palette.primary[700]} !important` + : `${theme.palette.primary[500]} !important`, + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.primary[50], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + }, }, }, }, @@ -408,6 +599,7 @@ export function getThemedComponents(theme: Theme) { MuiPaper: { styleOverrides: { root: { + backgroundImage: 'none', backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff', '&[href]': { @@ -418,14 +610,16 @@ export function getThemedComponents(theme: Theme) { display: 'block', borderColor: theme.palette.mode === 'dark' - ? theme.palette.primaryDark[400] + ? theme.palette.primaryDark[500] : theme.palette.grey[200], ...(theme.palette.mode === 'dark' && { backgroundColor: theme.palette.primaryDark[700], }), 'a&, button&': { '&:hover': { - boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)', + boxShadow: `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, }, }, }, @@ -458,7 +652,7 @@ export function getThemedComponents(theme: Theme) { styleOverrides: { root: { textTransform: 'none', - fontWeight: 700, + fontWeight: 500, color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], borderColor: @@ -488,8 +682,7 @@ export function getThemedComponents(theme: Theme) { MuiTooltip: { styleOverrides: { tooltip: { - paddingTop: 7, - paddingBottom: 7, + padding: '5px 9px', }, }, }, @@ -528,6 +721,37 @@ export function getThemedComponents(theme: Theme) { }, }, }, + MuiPaginationItem: { + styleOverrides: { + root: { + textTransform: 'none', + fontWeight: 700, + color: + theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.grey[200], + '&.Mui-selected': { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], + borderColor: + theme.palette.mode === 'dark' + ? `${theme.palette.primary[700]} !important` + : `${theme.palette.primary[500]} !important`, + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.primary[50], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + }, + }, + }, + }, + }, MuiCssBaseline: { defaultProps: { enableColorScheme: true, diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 89db4a084d05af..5d9a2fd0b3bc15 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -1,6 +1,7 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useRouter } from 'next/router'; import clsx from 'clsx'; import { exactProp } from '@mui/utils'; import { styled } from '@mui/material/styles'; @@ -10,12 +11,14 @@ import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; +import replaceHtmlLinks from 'docs/src/modules/utils/replaceHtmlLinks'; const Asterisk = styled('abbr')(({ theme }) => ({ color: theme.palette.error.main })); function PropsTable(props) { const { componentProps, propDescriptions } = props; const t = useTranslate(); + const router = useRouter(); return ( @@ -69,7 +72,7 @@ function PropsTable(props) { )}
    @@ -180,6 +183,7 @@ Heading.propTypes = { }; function ApiDocs(props) { + const router = useRouter(); const { descriptions, pageContent } = props; const t = useTranslate(); const userLanguage = useUserLanguage(); @@ -283,7 +287,11 @@ import { ${componentName} } from '${source}';`}

    - +     ) : null} {componentStyles.name && ( @@ -291,16 +299,19 @@ import { ${componentName} } from '${source}';`} )} -

    +


    {cssComponent && ( @@ -320,11 +331,14 @@ import { ${componentName} } from '${source}';`} @@ -345,7 +359,7 @@ import { ${componentName} } from '${source}';`} ) : null} - + diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 819007d32410c8..43258be67ce17e 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -9,13 +9,9 @@ import AppBar from '@mui/material/AppBar'; import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; +import SvgHamburgerMenu from 'docs/src/icons/SvgHamburgerMenu'; import Tooltip from '@mui/material/Tooltip'; import Box from '@mui/material/Box'; -import NoSsr from '@mui/material/NoSsr'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Divider from '@mui/material/Divider'; import SettingsIcon from '@mui/icons-material/SettingsOutlined'; import GitHubIcon from '@mui/icons-material/GitHub'; import NProgressBar from '@mui/docs/NProgressBar'; @@ -23,15 +19,11 @@ import AppNavDrawer from 'docs/src/modules/components/AppNavDrawer'; import AppSettingsDrawer from 'docs/src/modules/components/AppSettingsDrawer'; import Notifications from 'docs/src/modules/components/Notifications'; import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks'; -import { LANGUAGES_LABEL } from 'docs/src/modules/constants'; -import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; -import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -import LanguageIcon from '@mui/icons-material/Translate'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; import { debounce } from '@mui/material/utils'; - -const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; -const CROWDIN_ROOT_URL = 'https://translate.mui.com/project/material-ui-docs/'; +import NextLink from 'next/link'; +import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; const nProgressStart = debounce(() => { NProgress.start(); @@ -129,7 +121,7 @@ const StyledAppBar = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'disablePermanent', })(({ disablePermanent, theme }) => { return { - padding: '5px 0px 5px 8px', + padding: theme.spacing(1, 2), transition: theme.transitions.create('width'), ...(disablePermanent && { boxShadow: 'none', @@ -153,23 +145,6 @@ const StyledAppBar = styled(AppBar, { ? alpha(theme.palette.primaryDark[900], 0.7) : 'rgba(255,255,255,0.7)', color: theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[800], - '& .MuiIconButton-root': { - border: `1px solid ${ - theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200] - }`, - borderRadius: theme.shape.borderRadius, - color: - theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[500], - // background: theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] : '#FFF', - '&:hover': { - borderColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[600] : theme.palette.grey[300], - background: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - }, }; }); @@ -197,7 +172,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) => return { [theme.breakpoints.up('lg')]: { flexShrink: 0, - width: 240, + width: 280, }, }; }); @@ -205,52 +180,14 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) => function AppFrame(props) { const { children, disableDrawer = false } = props; const t = useTranslate(); - const userLanguage = useUserLanguage(); - - const crowdInLocale = LOCALES[userLanguage] || userLanguage; - - const [languageMenu, setLanguageMenu] = React.useState(null); - const handleLanguageIconClick = (event) => { - setLanguageMenu(event.currentTarget); - }; - const handleLanguageMenuClose = (event) => { - if (event.currentTarget.nodeName === 'A') { - document.cookie = `userLanguage=${event.currentTarget.lang};path=/;max-age=31536000`; - } - setLanguageMenu(null); - }; const [mobileOpen, setMobileOpen] = React.useState(false); - const handleNavDrawerOpen = () => { - setMobileOpen(true); - }; - const handleNavDrawerClose = React.useCallback(() => { - setMobileOpen(false); - }, []); - const [settingsOpen, setSettingsOpen] = React.useState(false); - const handleSettingsDrawerOpen = () => { - setSettingsOpen(true); - }; - const handleSettingsDrawerClose = React.useCallback(() => { - setSettingsOpen(false); - }, []); - const router = useRouter(); - const { canonicalAs } = pathnameToLanguage(router.asPath); const { activePage } = React.useContext(PageContext); const disablePermanent = activePage?.disableDrawer === true || disableDrawer === true; - const languageButtonProps = { - color: 'inherit', - onClick: handleLanguageIconClick, - 'aria-owns': languageMenu ? 'language-menu' : undefined, - 'aria-haspopup': 'true', - 'data-ga-event-category': 'header', - 'data-ga-event-action': 'language', - }; - return ( @@ -260,148 +197,57 @@ function AppFrame(props) { - + setMobileOpen(true)} + sx={{ ml: '1px' }} > - + + + + + + - button': { width: 38 } }}> + - - - - - - + setSettingsOpen(true)} sx={{ px: '8px' }}> - -

    - theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200', - bgcolor: (theme) => - theme.palette.mode === 'dark' ? 'primaryDark.900' : 'background.paper', - boxShadow: (theme) => - `0px 4px 20px ${ - theme.palette.mode === 'dark' - ? 'rgba(0, 0, 0, 0.5)' - : 'rgba(170, 180, 190, 0.3)' - }`, - '& .MuiMenuItem-root': { - fontSize: (theme) => theme.typography.pxToRem(14), - fontWeight: 500, - '&:hover': { - color: (theme) => - theme.palette.mode === 'dark' ? '#fff' : theme.palette.common.black, - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - '&:focus': { - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - '&.Mui-selected': { - fontWeight: 500, - color: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : alpha(theme.palette.primary[100], 0.6), - }, - }, - }, - }} - > - {LANGUAGES_LABEL.map((language) => ( - - {language.text} - - ))} - - - - - {t('appFrame.helpToTranslate')} - - - setMobileOpen(false)} + onOpen={() => setMobileOpen(true)} mobileOpen={mobileOpen} /> {children} - + setSettingsOpen(false)} open={settingsOpen} /> ); } diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 389c86a7880da5..b2068b2aa3f2b4 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -13,8 +13,8 @@ import AdManager from 'docs/src/modules/components/AdManager'; import AdGuest from 'docs/src/modules/components/AdGuest'; import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter'; -const TOC_WIDTH = 210; -const NAV_WIDTH = 240; +const TOC_WIDTH = 240; +const NAV_WIDTH = 280; const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'disableToc', diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index f70acf9c55d886..b9a3ed495ed6a0 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import NextLink from 'next/link'; +import { useRouter } from 'next/router'; import Button from '@mui/material/Button'; import Divider from '@mui/material/Divider'; import { styled, alpha } from '@mui/material/styles'; @@ -8,6 +9,7 @@ import List from '@mui/material/List'; import Drawer from '@mui/material/Drawer'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; import SwipeableDrawer from '@mui/material/SwipeableDrawer'; import useMediaQuery from '@mui/material/useMediaQuery'; import Box from '@mui/material/Box'; @@ -20,9 +22,289 @@ import PageContext from 'docs/src/modules/components/PageContext'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded'; import DoneRounded from '@mui/icons-material/DoneRounded'; +import FEATURE_TOGGLE from 'docs/src/featureToggle'; +import IconImage from 'docs/src/components/icon/IconImage'; +import Link from 'docs/src/modules/components/Link'; +import ROUTES from 'docs/src/route'; +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; +import materialPkgJson from '../../../../packages/mui-material/package.json'; +import basePkgJson from '../../../../packages/mui-base/package.json'; +import systemPkgJson from '../../../../packages/mui-system/package.json'; const savedScrollTop = {}; +const LinksWrapper = styled('div')(({ theme }) => { + return { + paddingLeft: theme.spacing(5.5), + paddingTop: theme.spacing(1), + display: 'flex', + flexDirection: 'column', + '& > a': { + display: 'flex', + justifyContent: 'space-between', + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + fontSize: theme.typography.pxToRem(14), + color: + theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[600], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + '& svg': { + width: 18, + height: 18, + }, + }, + }; +}); + +function ProductSubMenu(props) { + return ( + + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[100], + }, + }} + > + {props.icon} + +
    + + {props.name} + + + {props.description} + +
    +     + ); +} + +ProductSubMenu.propTypes = { + description: PropTypes.string, + icon: PropTypes.element, + name: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), +}; + +function ProductDrawerButton(props) { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
    + + + theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200', + bgcolor: (theme) => + theme.palette.mode === 'dark' ? 'primaryDark.900' : 'background.paper', + boxShadow: (theme) => + `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, + '& ul': { + margin: 0, + padding: 0, + listStyle: 'none', + }, + '& li:not(:last-of-type)': { + borderBottom: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.primary[100], 0.08) + : theme.palette.grey[100], + }, + '& a': { textDecoration: 'none' }, + '& li': { + p: 2, + }, + }, + }} + > +
  • + } + name="MUI Core" + description="Ready-to-use foundational components, free forever." + /> + + {FEATURE_TOGGLE.enable_mui_base_scope && ( + + Base + + )} + + Material Design + + + System + + +
    • +
  • + } + name={ + + MUI X + + } + description="Advanced and powerful components for complex use-cases." + /> + + + Data Grid + + +
    • +     +
    + ); +} + +ProductDrawerButton.propTypes = { + productName: PropTypes.string, +}; + +const ProductIdentifier = ({ name, metadata, versionSelector }) => ( + +
    + ({ + ml: 1, + color: theme.palette.grey[600], + fontSize: theme.typography.pxToRem(11), + fontWeight: 700, + textTransform: 'uppercase', + letterSpacing: '.08rem', + })} + > + {metadata} + + + + {versionSelector} + +
    +     +); + +ProductIdentifier.propTypes = { + metadata: PropTypes.string, + name: PropTypes.string, + versionSelector: PropTypes.element, +}; + +const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch')); +export function DeferredAppSearch() { + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + + return ( + + {/* Suspense isn't supported for SSR yet */} + {mounted ? ( + + + + ) : null} + + ); +} + function PersistScroll(props) { const { slot, children, enabled } = props; const rootRef = React.useRef(); @@ -62,9 +344,8 @@ const ToolbarIE11 = styled('div')({ display: 'flex' }); const ToolbarDiv = styled('div')(({ theme }) => { return { - paddingTop: theme.spacing(1.6), - paddingBottom: theme.spacing(1.6), - paddingLeft: theme.spacing(3), + padding: theme.spacing(1.45, 2), + height: 64, display: 'flex', flexGrow: 1, flexDirection: 'row', @@ -84,9 +365,17 @@ const StyledDrawer = styled(Drawer)(({ theme }) => { }; }); -const SwipeableDrawerPaperComponent = styled('div')({ - width: 250, - boxShadow: 'none', +const SwipeableDrawerPaperComponent = styled('div')(({ theme }) => { + return { + width: 280, + boxShadow: 'none', + [theme.breakpoints.up('xs')]: { + borderRadius: '0px 10px 10px 0px', + }, + [theme.breakpoints.up('sm')]: { + borderRadius: '0px', + }, + }; }); function renderNavItems(options) { @@ -116,7 +405,10 @@ function reduceChildRoutes(context) { if (page.children && page.children.length > 1) { const title = pageToTitleI18n(page, t); - const topLevel = activePage ? activePage.pathname.indexOf(`${page.pathname}/`) === 0 : false; + const topLevel = activePage + ? activePage.pathname.indexOf(`${page.pathname}`) === 0 || + page.scopePathnames?.some((pathname) => activePage.pathname.includes(pathname)) + : false; items.push( theme.breakpoints.down('lg')); const drawer = React.useMemo(() => { + const isProductScoped = + router.asPath.startsWith('/x') || + router.asPath.startsWith('/material') || + (router.asPath.startsWith('/system') && FEATURE_TOGGLE.enable_system_scope) || + router.asPath.startsWith('/base'); + const navItems = renderNavItems({ onClose, pages, activePage, depth: 0, t }); + const renderVersionSelector = (versions = []) => { + if (!versions?.length) { + return null; + } + return ( + + + setAnchorEl(null)} + > + {versions.map((item) => ( + setAnchorEl(null), + } + : { + component: 'a', + href: item.href, + onClick: onClose, + })} + > + {item.text} {item.current && } + + ))} + {versions.length > 1 && [ + , + + {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */} + {`View all versions`} + , + ]} + + + ); + }; + return ( - + + theme.palette.mode === 'dark' + ? alpha(theme.palette.primary[100], 0.08) + : theme.palette.grey[200], + }} + > - {process.env.LIB_VERSION ? ( - - - setAnchorEl(null)} - PaperProps={{ - variant: 'outlined', - elevation: 0, - sx: { - mt: 0.5, - minWidth: 180, - backgroundImage: 'none', - borderColor: (theme) => - theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200', - bgcolor: (theme) => - theme.palette.mode === 'dark' ? 'primaryDark.900' : 'background.paper', - boxShadow: (theme) => - `0px 4px 20px ${ - theme.palette.mode === 'dark' - ? 'rgba(0, 0, 0, 0.5)' - : 'rgba(170, 180, 190, 0.3)' - }`, - '& .MuiMenuItem-root': { - fontSize: (theme) => theme.typography.pxToRem(14), - fontWeight: 500, - '&:hover': { - color: (theme) => - theme.palette.mode === 'dark' ? '#fff' : theme.palette.common.black, - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - '&:focus': { - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - '&.Mui-selected': { - fontWeight: 500, - color: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : alpha(theme.palette.primary[100], 0.6), - }, - }, - }, - }} - > - setAnchorEl(null)}> - {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */} - {`v${process.env.LIB_VERSION}`} - - - {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */} - {`v4`} - - - - {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */} - {`View all versions`} - - - - ) : null} + {!isProductScoped && + renderVersionSelector([ + { text: `v${process.env.LIB_VERSION}`, current: true }, + { text: 'v4', href: `https://v4.mui.com${languagePrefix}/` }, + ])} + {router.asPath.startsWith('/material/') && ( + + )} + {router.asPath.startsWith('/system/') && FEATURE_TOGGLE.enable_system_scope && ( + + )} + {router.asPath.startsWith('/base/') && ( + + )} + {(router.asPath.startsWith('/x/react-data-grid') || + router.asPath.startsWith('/x/api/data-grid')) && ( + + )} ); - }, [activePage, pages, onClose, languagePrefix, t, anchorEl, setAnchorEl]); + }, [activePage, pages, onClose, languagePrefix, t, anchorEl, setAnchorEl, router.asPath]); return (
    - + ); } diff --git a/docs/src/modules/utils/StyledEngineProvider.js b/docs/src/modules/utils/StyledEngineProvider.js index a7bf3900f597b6..bf0c547ba7b468 100644 --- a/docs/src/modules/utils/StyledEngineProvider.js +++ b/docs/src/modules/utils/StyledEngineProvider.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { StyleSheetManager } from 'styled-components'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; +import { prefixer } from 'stylis'; import rtlPlugin from 'stylis-plugin-rtl'; import rtlPluginSc from 'stylis-plugin-rtl-sc'; import { useTheme } from '@mui/material/styles'; @@ -11,7 +12,7 @@ import { useTheme } from '@mui/material/styles'; const cacheRtl = createCache({ key: 'rtl', prepend: true, - stylisPlugins: [rtlPlugin], + stylisPlugins: [prefixer, rtlPlugin], }); export default function StyledEngineProvider(props) { diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.js index 57c8b548d6ece5..54b501bba2e84e 100644 --- a/docs/src/modules/utils/find.js +++ b/docs/src/modules/utils/find.js @@ -1,5 +1,6 @@ const fs = require('fs'); const path = require('path'); +const FEATURE_TOGGLE = require('../../featureToggle'); const markdownRegex = /\.md$/; @@ -10,7 +11,9 @@ const markdownRegex = /\.md$/; * @returns {Array<{ filename: string, pathname: string }>} */ function findPagesMarkdown( - directory = path.resolve(__dirname, '../../../src/pages'), + directory = FEATURE_TOGGLE.enable_product_scope + ? path.resolve(__dirname, '../../../data') + : path.resolve(__dirname, '../../../src/pages'), pagesMarkdown = [], ) { const items = fs.readdirSync(directory); @@ -27,13 +30,64 @@ function findPagesMarkdown( return; } + let pathname = ''; + if (FEATURE_TOGGLE.enable_product_scope) { + pathname = itemPath + .replace(new RegExp(`\\${path.sep}`, 'g'), '/') + .replace(/^.*\/material[^-]/, '/') + .replace('.md', ''); + } else { + pathname = itemPath + .replace(new RegExp(`\\${path.sep}`, 'g'), '/') + .replace(/^.*\/pages/, '') + .replace('.md', ''); + } + + // Remove the last pathname segment. + pathname = pathname.split('/').slice(0, 3).join('/'); + + pagesMarkdown.push({ + // Relative location in the path (URL) system. + pathname, + // Relative location in the file system. + filename: itemPath, + }); + }); + + return pagesMarkdown; +} + +/** + * Returns the markdowns of the documentation in a flat array. + * @param {string} [directory] + * @param {Array<{ filename: string, pathname: string }>} [pagesMarkdown] + * @returns {Array<{ filename: string, pathname: string }>} + */ +function findPagesMarkdownNew( + directory = path.resolve(__dirname, '../../../data'), + pagesMarkdown = [], +) { + const items = fs.readdirSync(directory); + + items.forEach((item) => { + const itemPath = path.resolve(directory, item); + + if (fs.statSync(itemPath).isDirectory()) { + findPagesMarkdownNew(itemPath, pagesMarkdown); + return; + } + + if (!markdownRegex.test(item)) { + return; + } + let pathname = itemPath .replace(new RegExp(`\\${path.sep}`, 'g'), '/') - .replace(/^.*\/pages/, '') + .replace(/^.*\/data/, '') .replace('.md', ''); // Remove the last pathname segment. - pathname = pathname.split('/').slice(0, 3).join('/'); + pathname = pathname.split('/').slice(0, 4).join('/'); pagesMarkdown.push({ // Relative location in the path (URL) system. @@ -159,5 +213,6 @@ function findPages( module.exports = { findPages, findPagesMarkdown, + findPagesMarkdownNew, findComponents, }; diff --git a/docs/src/modules/utils/findActivePage.test.js b/docs/src/modules/utils/findActivePage.test.js new file mode 100644 index 00000000000000..47819675bd67c3 --- /dev/null +++ b/docs/src/modules/utils/findActivePage.test.js @@ -0,0 +1,96 @@ +import { expect } from 'chai'; +import findActivePage from './findActivePage'; + +describe('findActivePage', () => { + describe('old structure', () => { + const pages = [ + { + pathname: '/getting-started', + icon: 'DescriptionIcon', + children: [{ pathname: '/getting-started/installation' }], + }, + { + pathname: '/components', + icon: 'ToggleOnIcon', + children: [ + { + pathname: '/components', + subheader: '/components/inputs', + children: [ + { pathname: '/components/autocomplete' }, + { pathname: '/components/buttons', title: 'Button' }, + { pathname: '/components/button-group' }, + { pathname: '/components/checkboxes', title: 'Checkbox' }, + { pathname: '/components/floating-action-button' }, + { pathname: '/components/radio-buttons', title: 'Radio button' }, + { pathname: '/components/rating' }, + { pathname: '/components/selects', title: 'Select' }, + { pathname: '/components/slider' }, + { pathname: '/components/switches', title: 'Switch' }, + { pathname: '/components/text-fields', title: 'Text field' }, + { pathname: '/components/transfer-list' }, + { pathname: '/components/toggle-button' }, + ], + }, + ], + }, + ]; + it('return first level page', () => { + expect(findActivePage(pages, '/getting-started')).to.deep.equal({ + pathname: '/getting-started', + icon: 'DescriptionIcon', + children: [{ pathname: '/getting-started/installation' }], + }); + }); + + it('return nested page', () => { + expect(findActivePage(pages, '/getting-started/installation')).to.deep.equal({ + pathname: '/getting-started/installation', + }); + }); + + it('return deep nested page', () => { + expect(findActivePage(pages, '/components/radio-buttons')).to.deep.equal({ + pathname: '/components/radio-buttons', + title: 'Radio button', + }); + }); + }); + + describe('new structure', () => { + const pages = [ + { + pathname: '/material/components', + icon: 'ToggleOnIcon', + children: [ + { + pathname: '/material/components', + subheader: '/components/inputs', + children: [ + { pathname: '/material/react-autocomplete' }, + { pathname: '/material/react-buttons', title: 'Button' }, + { pathname: '/material/react-button-group' }, + { pathname: '/material/react-checkboxes', title: 'Checkbox' }, + { pathname: '/material/react-floating-action-button' }, + { pathname: '/material/react-radio-buttons', title: 'Radio button' }, + { pathname: '/material/react-rating' }, + { pathname: '/material/react-selects', title: 'Select' }, + { pathname: '/material/react-slider' }, + { pathname: '/material/react-switches', title: 'Switch' }, + { pathname: '/material/react-text-fields', title: 'Text field' }, + { pathname: '/material/react-transfer-list' }, + { pathname: '/material/react-toggle-button' }, + ], + }, + ], + }, + ]; + + it('return deep nested page', () => { + expect(findActivePage(pages, '/material/react-radio-buttons')).to.deep.equal({ + pathname: '/material/react-radio-buttons', + title: 'Radio button', + }); + }); + }); +}); diff --git a/docs/src/modules/utils/findActivePage.ts b/docs/src/modules/utils/findActivePage.ts new file mode 100644 index 00000000000000..9d9edd1ef54f3c --- /dev/null +++ b/docs/src/modules/utils/findActivePage.ts @@ -0,0 +1,16 @@ +import { MuiPage } from 'docs/src/pages'; + +export default function findActivePage(currentPages: MuiPage[], pathname: string): MuiPage | null { + const map: Record = {}; + + const traverse = (array: MuiPage[]) => { + array.forEach((item) => { + map[item.pathname] = item; + traverse(item.children || []); + }); + }; + + traverse(currentPages); + + return map[pathname] || null; +} diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index 75595ebc132a88..630c56a56b2deb 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import { getDependencies } from './helpers'; +import { getDependencies, pageToTitle } from './helpers'; describe('docs getDependencies helpers', () => { before(() => { @@ -10,6 +10,20 @@ describe('docs getDependencies helpers', () => { delete process.env.SOURCE_CODE_REPO; }); + it('should return correct title', () => { + expect(pageToTitle({ pathname: '/docs/src/pages/components/buttons/buttons.md' })).to.equal( + 'Buttons', + ); + expect(pageToTitle({ pathname: '/components' })).to.equal('Components'); + expect(pageToTitle({ pathname: '/customization/how-to-customize' })).to.equal( + 'How To Customize', + ); + }); + + it('should remove `react-` prefix', () => { + expect(pageToTitle({ pathname: '/docs/pages/material/react-buttons.js' })).to.equal('Buttons'); + }); + const s1 = ` import * as React from 'react'; import PropTypes from 'prop-types'; diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts index 4a28d4d55c4b06..3993867bd474e8 100644 --- a/docs/src/modules/utils/helpers.ts +++ b/docs/src/modules/utils/helpers.ts @@ -36,7 +36,7 @@ export function pageToTitle(page: Page): string | null { } const path = page.subheader || page.pathname; - const name = path.replace(/.*\//, ''); + const name = path.replace(/.*\//, '').replace('react-', '').replace(/\..*/, ''); if (path.indexOf('/api') === 0) { return upperFirst(camelCase(name)); diff --git a/docs/src/modules/utils/i18n.js b/docs/src/modules/utils/i18n.js index 82111afa451430..5cbe50514d65e4 100644 --- a/docs/src/modules/utils/i18n.js +++ b/docs/src/modules/utils/i18n.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import { useRouter } from 'next/router'; -import replaceMarkdownLinks from 'docs/src/modules/utils/replaceMarkdownLinks'; +import replaceHtmlLinks from 'docs/src/modules/utils/replaceHtmlLinks'; function mapTranslations(req) { const translations = {}; @@ -72,7 +72,7 @@ export function useTranslate() { // TODO: remove this logic once the migration to new structure is done. function pointToNewHref(translation) { if (typeof translation === 'string') { - return replaceMarkdownLinks(translation, router.asPath); + return replaceHtmlLinks(translation, router.asPath); } return translation; } diff --git a/docs/src/modules/utils/replaceHtmlLinks.test.js b/docs/src/modules/utils/replaceHtmlLinks.test.js new file mode 100644 index 00000000000000..70b3597fde8b70 --- /dev/null +++ b/docs/src/modules/utils/replaceHtmlLinks.test.js @@ -0,0 +1,419 @@ +import { expect } from 'chai'; +import replaceHtmlLinks, { + replaceMaterialLinks, + replaceAPILinks, + replaceComponentLinks, +} from './replaceHtmlLinks'; +import FEATURE_TOGGLE from '../../featureToggle'; + +describe('replaceHtmlLinks', () => { + it('replace material related links', () => { + expect( + replaceMaterialLinks(` + + `), + ).to.equal(` + + `); + }); + + it('should not change if links have been updated', () => { + expect( + replaceMaterialLinks(` + + `), + ).to.equal(` + + `); + }); + + it('replace correct component links', () => { + expect( + replaceComponentLinks(` + + `), + ).to.equal(` + + `); + }); + + it('should do nothing if the components have updated', () => { + expect( + replaceComponentLinks(` + + `), + ).to.equal(` + + `); + }); + + it('replace correct API links', () => { + expect( + replaceAPILinks(` +

    API

    + `), + ).to.equal(` +

    API

    + `); + }); + + it('should do nothing if the APIs have updated', () => { + expect( + replaceAPILinks(` +

    API

    + `), + ).to.equal(` +

    API

    + `); + }); + + it('only replace links for new routes (/material/* & /x/*)', () => { + expect( + replaceHtmlLinks( + ` + + `, + '/material/react-buttons', + ), + ).to.equal(` + + `); + if (FEATURE_TOGGLE.enable_system_scope) { + expect(`
  • Styles
    • `).to.equal( + `
  • Styles
    • `, + ); + } else { + expect(`
  • Styles
    • `).to.equal( + `
  • Styles
    • `, + ); + } + }); + + it('[i18n] only replace links for new routes (/material/* & /x/*)', () => { + expect( + replaceHtmlLinks( + ` + + `, + '/zh/material/react-buttons', + ), + ).to.equal(` + + `); + if (FEATURE_TOGGLE.enable_system_scope) { + expect(`
  • Styles
    • `).to.equal( + `
  • Styles
    • `, + ); + } else { + expect(`
  • Styles
    • `).to.equal( + `
  • Styles
    • `, + ); + } + }); + + it('should work with json', () => { + const json = { + importDifference: + 'You can learn about the difference by reading this guide on minimizing bundle size.', + }; + expect(replaceHtmlLinks(JSON.stringify(json), '/material/api/')).to.equal( + '{"importDifference":"You can learn about the difference by reading this guide on minimizing bundle size."}', + ); + const json2 = { + styleOverrides: + 'The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.', + }; + expect(replaceHtmlLinks(JSON.stringify(json2), '/material/api/')).to.equal( + '{"styleOverrides":"The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme."}', + ); + }); + + it('does nothing for old routes', () => { + expect( + replaceHtmlLinks( + ` + + `, + '/components/buttons/', + ), + ).to.equal(` + + `); + }); +}); diff --git a/docs/src/modules/utils/replaceHtmlLinks.ts b/docs/src/modules/utils/replaceHtmlLinks.ts new file mode 100644 index 00000000000000..887a91d60e07b5 --- /dev/null +++ b/docs/src/modules/utils/replaceHtmlLinks.ts @@ -0,0 +1,84 @@ +import FEATURE_TOGGLE from 'docs/src/featureToggle'; + +export const replaceMaterialLinks = (html: string) => { + return html.replace( + /href=(\\*?)"(\/[a-z]{2})?\/(guides|customization|getting-started|discover-more)\/([^"]*)"/gm, + 'href=$1"$2/material/$3/$4"', + ); +}; + +export const replaceComponentLinks = (html: string) => { + return html + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/components\/data-grid([^"]*)"/gm, + 'href=$1"$2/x/react-data-grid$3"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/components\/((icons|material-icons|transitions|pickers|about-the-lab)\/?[^"]*)"/gm, + 'href=$1"$2/material/$3"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/components\/(?!tabs|breadcrumbs)([^"]*)"/gm, + 'href=$1"$2/material/react-$3"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/material\/(react-[-a-z]+)(x|ch)es(\/|#)([^"]*)"/gm, + 'href=$1"$2/material/$3$4$5$6"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/material\/(react-[-a-z]+)(x|ch)es"/gm, + 'href=$1"$2/material/$3$4"', + ) + .replace(/react-trap-focu/gm, 'react-trap-focus') + .replace(/react-progres/gm, 'react-progress') + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/material\/(?!react-tabs|react-breadcrumbs)(react-[-a-z]+)s(\/|#)([^"]*)"/gm, + 'href=$1"$2/material/$3$4$5"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/material\/(?!react-tabs|react-breadcrumbs)(react-[-a-z]+)s"/gm, + 'href=$1"$2/material/$3"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/components\/(tabs|breadcrumbs)([^"]*)"/gm, + 'href=$1"$2/material/react-$3$4"', + ); +}; + +export const replaceAPILinks = (html: string) => { + return html + .replace(/href=(\\*?)"(\/[a-z]{2})?\/api\/data-grid([^"]*)"/gm, 'href=$1"$2/x/api/data-grid$3"') + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^"]*)"/gm, + 'href=$1"$2/material/api/$3$4"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/api\/([^"/]+-unstyled)([^"]*)"/gm, + 'href=$1"$2/base/api/$3$4"', + ) + .replace( + /href=(\\*?)"(\/[a-z]{2})?\/api\/(no-ssr|portal|textarea-autosize)([^"]*)"/gm, + 'href=$1"$2/base/api/$3$4"', + ) + .replace(/href=(\\*?)"(\/[a-z]{2})?\/api\/([^"]*)"/gm, 'href=$1"$2/material/api/$3"'); +}; + +const replaceStylesLinks = (html: string) => { + return html.replace( + /href=(\\*?)"(\/[a-z]{2})?\/styles\/([^"]*)"/gm, + 'href=$1"$2/system/styles/$3"', + ); +}; + +export default function replaceHtmlLinks(html: string, asPath: string) { + asPath = asPath.replace(/^\/[a-z]{2}\//, '/'); + if ( + asPath.startsWith('/material/') || + asPath.startsWith('/x/') || + asPath.startsWith('/base/') || + (FEATURE_TOGGLE.enable_system_scope && asPath.startsWith('/system')) + ) { + return replaceStylesLinks(replaceMaterialLinks(replaceAPILinks(replaceComponentLinks(html)))); + } + return html; +} diff --git a/docs/src/modules/utils/replaceMarkdownLinks.test.js b/docs/src/modules/utils/replaceMarkdownLinks.test.js index 15b2dda1e1bc15..126582aa9d6431 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.test.js +++ b/docs/src/modules/utils/replaceMarkdownLinks.test.js @@ -4,234 +4,353 @@ import replaceMarkdownLinks, { replaceAPILinks, replaceComponentLinks, } from './replaceMarkdownLinks'; +import FEATURE_TOGGLE from '../../featureToggle'; describe('replaceMarkdownLinks', () => { it('replace material related links', () => { expect( replaceMaterialLinks(` - + [reading this guide on minimizing bundle size](/guides/minimizing-bundle-size/) + [default props](/customization/theme-components/#default-props) + [Get started](/getting-started/usage/) + [Tree view](/discover-more/related-projects/) `), ).to.equal(` - + [reading this guide on minimizing bundle size](/material/guides/minimizing-bundle-size/) + [default props](/material/customization/theme-components/#default-props) + [Get started](/material/getting-started/usage/) + [Tree view](/material/discover-more/related-projects/) `); }); it('should not change if links have been updated', () => { expect( replaceMaterialLinks(` - + [reading this guide on minimizing bundle size](/material/guides/minimizing-bundle-size/) + [default props](/material/customization/theme-components/#default-props) + [Get started](/material/getting-started/usage/) + [Tree view](/material/discover-more/related-projects/) `), ).to.equal(` - + [reading this guide on minimizing bundle size](/material/guides/minimizing-bundle-size/) + [default props](/material/customization/theme-components/#default-props) + [Get started](/material/getting-started/usage/) + [Tree view](/material/discover-more/related-projects/) `); }); it('replace correct component links', () => { expect( replaceComponentLinks(` - + [ButtonGroup](/components/button-group/) + [Buttons](/components/buttons/) + [text](/components/checkboxes/#main-content) + [text](/components/radio-buttons#main-content) + [text](/components/selects/#main-content) + [text](/components/switches/#main-content) + [text](/components/text-fields/#main-content) + [text](/components/avatars/#main-content) + [text](/components/badges/#main-content) + [text](/components/chips/#main-content) + [text](/components/dividers/#main-content) + [text](/components/icons/#main-content) + [text](/components/material-icons/#main-content) + [text](/components/lists/#main-content) + [text](/components/tables/#main-content) + [text](/components/tooltips/#main-content) + [text](/components/dialogs/#main-content) + [text](/components/snackbars/#main-content) + [text](/components/cards/#main-content) + [text](/components/breadcrumbs/#main-content) + [text](/components/drawers/#main-content) + [text](/components/links/#main-content) + [text](/components/menus/#main-content) + [text](/components/steppers/#main-content) + [text](/components/tabs/#main-content) + [text](/components/transitions/#main-content) + [text](/components/pickers/#main-content) + [text](/components/trap-focus/#main-content) + [text](/components/css-baseline/#main-content) + [text](/components/no-ssr/#main-content) + [text](/components/image-list/#main-content) + [text](/components/progress/#main-content) + - + [Tree view](/components/tree-view/) + [Demo](/components/data-grid/demo/) `), ).to.equal(` - + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) + [text](/material/react-text-field/#main-content) + [text](/material/react-avatar/#main-content) + [text](/material/react-badge/#main-content) + [text](/material/react-chip/#main-content) + [text](/material/react-divider/#main-content) + [text](/material/icons/#main-content) + [text](/material/material-icons/#main-content) + [text](/material/react-list/#main-content) + [text](/material/react-table/#main-content) + [text](/material/react-tooltip/#main-content) + [text](/material/react-dialog/#main-content) + [text](/material/react-snackbar/#main-content) + [text](/material/react-card/#main-content) + [text](/material/react-breadcrumbs/#main-content) + [text](/material/react-drawer/#main-content) + [text](/material/react-link/#main-content) + [text](/material/react-menu/#main-content) + [text](/material/react-stepper/#main-content) + [text](/material/react-tabs/#main-content) + [text](/material/transitions/#main-content) + [text](/material/pickers/#main-content) + [text](/material/react-trap-focus/#main-content) + [text](/material/react-css-baseline/#main-content) + [text](/material/react-no-ssr/#main-content) + [text](/material/react-image-list/#main-content) + [text](/material/react-progress/#main-content) + - + [Tree view](/material/react-tree-view/) + [Demo](/x/react-data-grid/demo/) `); }); it('should do nothing if the components have updated', () => { expect( replaceComponentLinks(` - + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) + [text](/material/react-text-field/#main-content) + [text](/material/react-avatar/#main-content) + [text](/material/react-badge/#main-content) + [text](/material/react-chip/#main-content) + [text](/material/react-divider/#main-content) + [text](/material/icons/#main-content) + [text](/material/material-icons/#main-content) + [text](/material/react-list/#main-content) + [text](/material/react-table/#main-content) + [text](/material/react-tooltip/#main-content) + [text](/material/react-dialog/#main-content) + [text](/material/react-snackbar/#main-content) + [text](/material/react-card/#main-content) + [text](/material/react-breadcrumbs/#main-content) + [text](/material/react-drawer/#main-content) + [text](/material/react-link/#main-content) + [text](/material/react-menu/#main-content) + [text](/material/react-stepper/#main-content) + [text](/material/react-tabs/#main-content) + [text](/material/transitions/#main-content) + [text](/material/pickers/#main-content) + - + [Tree view](/material/react-tree-view/) + [Demo](/x/react-data-grid/demo/) `), ).to.equal(` - + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) + [text](/material/react-text-field/#main-content) + [text](/material/react-avatar/#main-content) + [text](/material/react-badge/#main-content) + [text](/material/react-chip/#main-content) + [text](/material/react-divider/#main-content) + [text](/material/icons/#main-content) + [text](/material/material-icons/#main-content) + [text](/material/react-list/#main-content) + [text](/material/react-table/#main-content) + [text](/material/react-tooltip/#main-content) + [text](/material/react-dialog/#main-content) + [text](/material/react-snackbar/#main-content) + [text](/material/react-card/#main-content) + [text](/material/react-breadcrumbs/#main-content) + [text](/material/react-drawer/#main-content) + [text](/material/react-link/#main-content) + [text](/material/react-menu/#main-content) + [text](/material/react-stepper/#main-content) + [text](/material/react-tabs/#main-content) + [text](/material/transitions/#main-content) + [text](/material/pickers/#main-content) + - + [Tree view](/material/react-tree-view/) + [Demo](/x/react-data-grid/demo/) `); }); it('replace correct API links', () => { expect( replaceAPILinks(` -

    API

    + [Button](/api/button) + [No Ssr](/api/no-ssr) + [Portal](/api/portal) + [Textarea Autosize](/api/textarea-autosize) + [ButtonBase](/api/button-base) + [ButtonUnstyled](/api/button-unstyled) + [IconButton](/api/icon-button) + [LoadingButton](/api/loading-button) + [DataGrid](/api/data-grid/data-grid) + [DataGridPro](/api/data-grid/data-grid-pro) + [System](/system/basics) `), ).to.equal(` -

    API

    + [Button](/material/api/button) + [No Ssr](/base/api/no-ssr) + [Portal](/base/api/portal) + [Textarea Autosize](/base/api/textarea-autosize) + [ButtonBase](/material/api/button-base) + [ButtonUnstyled](/base/api/button-unstyled) + [IconButton](/material/api/icon-button) + [LoadingButton](/material/api/loading-button) + [DataGrid](/x/api/data-grid/data-grid) + [DataGridPro](/x/api/data-grid/data-grid-pro) + [System](/system/basics) `); }); it('should do nothing if the APIs have updated', () => { expect( replaceAPILinks(` -

    API

    + [Button](/material/api/button) + [ButtonBase](/material/api/button-base) + [ButtonUnstyled](/base/api/button-unstyled) + [IconButton](/material/api/icon-button) + [LoadingButton](/material/api/loading-button) + [DataGrid](/x/api/data-grid/data-grid) + [DataGridPro](/x/api/data-grid/data-grid-pro) + [System](/system/basics) `), ).to.equal(` -

    API

    + [Button](/material/api/button) + [ButtonBase](/material/api/button-base) + [ButtonUnstyled](/base/api/button-unstyled) + [IconButton](/material/api/icon-button) + [LoadingButton](/material/api/loading-button) + [DataGrid](/x/api/data-grid/data-grid) + [DataGridPro](/x/api/data-grid/data-grid-pro) + [System](/system/basics) `); }); - it('only replace links for new routes (/material/* & /x/*)', () => { + it('only replace links for components, api', () => { expect( replaceMarkdownLinks( ` - + [ButtonGroup](/components/button-group/) + [Buttons](/components/buttons/) + [text](/components/checkboxes/#main-content) + [text](/components/radio-buttons#main-content) + [text](/components/selects/#main-content) + [text](/components/switches/#main-content) + [text](/components/text-fields/#main-content) + [text](/components/avatars/#main-content) + [text](/components/badges/#main-content) + [text](/components/chips/#main-content) + [text](/components/dividers/#main-content) + [text](/components/icons/#main-content) + [text](/components/material-icons/#main-content) + [text](/components/lists/#main-content) + [text](/components/tables/#main-content) + [text](/components/tooltips/#main-content) + [text](/components/dialogs/#main-content) + [text](/components/snackbars/#main-content) + [text](/components/cards/#main-content) + [text](/components/breadcrumbs/#main-content) + [text](/components/drawers/#main-content) + [text](/components/links/#main-content) + [text](/components/menus/#main-content) + [text](/components/steppers/#main-content) + [text](/components/tabs/#main-content) + [text](/components/transitions/#main-content) + [text](/components/pickers/#main-content) + - + [Tree view](/components/tree-view/) + [Demo](/components/data-grid/demo/) + + [Button](/material/api/button) + [ButtonBase](/material/api/button-base) + [ButtonUnstyled](/base/api/button-unstyled) + [IconButton](/material/api/icon-button) + [LoadingButton](/material/api/loading-button) + [DataGrid](/x/api/data-grid/data-grid) + [DataGridPro](/x/api/data-grid/data-grid-pro) + [System](/system/basics) `, - '/material/react-buttons', ), ).to.equal(` - - `); - }); + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) + [text](/material/react-text-field/#main-content) + [text](/material/react-avatar/#main-content) + [text](/material/react-badge/#main-content) + [text](/material/react-chip/#main-content) + [text](/material/react-divider/#main-content) + [text](/material/icons/#main-content) + [text](/material/material-icons/#main-content) + [text](/material/react-list/#main-content) + [text](/material/react-table/#main-content) + [text](/material/react-tooltip/#main-content) + [text](/material/react-dialog/#main-content) + [text](/material/react-snackbar/#main-content) + [text](/material/react-card/#main-content) + [text](/material/react-breadcrumbs/#main-content) + [text](/material/react-drawer/#main-content) + [text](/material/react-link/#main-content) + [text](/material/react-menu/#main-content) + [text](/material/react-stepper/#main-content) + [text](/material/react-tabs/#main-content) + [text](/material/transitions/#main-content) + [text](/material/pickers/#main-content) + - + [Tree view](/material/react-tree-view/) + [Demo](/x/react-data-grid/demo/) - it('should work with json', () => { - const json = { - importDifference: - 'You can learn about the difference by reading this guide on minimizing bundle size.', - }; - expect(replaceMarkdownLinks(JSON.stringify(json), '/material/api/')).to.equal( - '{"importDifference":"You can learn about the difference by reading this guide on minimizing bundle size."}', - ); - const json2 = { - styleOverrides: - 'The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.', - }; - expect(replaceMarkdownLinks(JSON.stringify(json2), '/material/api/')).to.equal( - '{"styleOverrides":"The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme."}', - ); + [Button](/material/api/button) + [ButtonBase](/material/api/button-base) + [ButtonUnstyled](/base/api/button-unstyled) + [IconButton](/material/api/icon-button) + [LoadingButton](/material/api/loading-button) + [DataGrid](/x/api/data-grid/data-grid) + [DataGridPro](/x/api/data-grid/data-grid-pro) + [System](/system/basics) + `); + if (FEATURE_TOGGLE.enable_system_scope) { + expect(`[Styles](/styles/api/)`).to.equal(`[Styles](/system/styles/api/)`); + } else { + expect(`[Styles](/styles/api/)`).to.equal(`[Styles](/styles/api/)`); + } }); - it('does nothing for old routes', () => { + it('does not change after transformed', () => { expect( replaceMarkdownLinks( ` - + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) `, - '/components/buttons/', ), ).to.equal(` - + [ButtonGroup](/material/react-button-group/) + [Buttons](/material/react-button/) + [text](/material/react-checkbox/#main-content) + [text](/material/react-radio-button#main-content) + [text](/material/react-select/#main-content) + [text](/material/react-switch/#main-content) `); }); }); diff --git a/docs/src/modules/utils/replaceMarkdownLinks.ts b/docs/src/modules/utils/replaceMarkdownLinks.ts index 747b7413382ba4..c2e02a8156a34d 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.ts +++ b/docs/src/modules/utils/replaceMarkdownLinks.ts @@ -1,33 +1,46 @@ export const replaceMaterialLinks = (markdown: string) => { return markdown.replace( - /href=(\\*?)"\/(guides|customization|getting-started|discover-more)\/([^"]*)"/gm, - 'href=$1"/material/$2/$3"', + /\(\/(guides|customization|getting-started|discover-more)\/([^)]*)\)/gm, + '(/material/$1/$2)', ); }; export const replaceComponentLinks = (markdown: string) => { return markdown - .replace(/href=(\\*?)"\/components\/data-grid([^"]*)"/gm, 'href=$1"/x/react-data-grid$2"') - .replace(/href=(\\*?)"\/components\/([^"]+)"/gm, 'href=$1"/material/react-$2"'); + .replace(/\(\/components\/data-grid([^)]*)\)/gm, '(/x/react-data-grid$1)') + .replace( + /\(\/components\/((icons|material-icons|transitions|pickers|about-the-lab)\/?[^)]*)\)/gm, + '(/material/$1)', + ) + .replace(/\(\/components\/(?!tabs|breadcrumbs)([^)]*)\)/gm, '(/material/react-$1)') + .replace(/\(\/material\/(react-[-a-z]+)(x|ch)es(\/|#)([^)]*)\)/gm, '(/material/$1$2$3$4)') + .replace(/\(\/material\/(react-[-a-z]+)(x|ch)es"/gm, '(/material/$1$2)') + .replace( + /\(\/material\/(?!react-tabs|react-breadcrumbs)(react-[-a-z]+)s(\/|#)([^)]*)\)/gm, + '(/material/$1$2$3)', + ) + .replace(/\(\/material\/(?!react-tabs|react-breadcrumbs)(react-[-a-z]+)s"/gm, '(/material/$1)') + .replace(/react-trap-focu/gm, 'react-trap-focus') + .replace(/react-progres/gm, 'react-progress') + .replace(/\(\/components\/(tabs|breadcrumbs)([^)]*)\)/gm, '(/material/react-$1$2)'); }; export const replaceAPILinks = (markdown: string) => { return markdown - .replace(/href=(\\*?)"\/api\/data-grid([^"]*)"/gm, 'href=$1"/x/api/mui-data-grid$2"') + .replace(/\(\/api\/data-grid([^)]*)\)/gm, '(/x/api/data-grid$1)') .replace( - /href=(\\*?)"\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^"]*)"/gm, - 'href=$1"/material/api/mui-lab/$2$3"', + /\(\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^)]*)\)/gm, + '(/material/api/$1$2)', ) - .replace( - /href=(\\*?)"\/api\/([^"-]+-unstyled)([^"]*)"/gm, - 'href=$1"/material/api/mui-base/$2$3"', - ) - .replace(/href=(\\*?)"\/api\/([^"]*)"/gm, 'href=$1"/material/api/mui-material/$2"'); + .replace(/\(\/api\/([^"-]+-unstyled)([^)]*)\)/gm, '(/base/api/$1$2)') + .replace(/\(\/api\/(no-ssr|portal|textarea-autosize)([^)]*)\)/gm, '(/base/api/$1$2)') + .replace(/\(\/api\/([^)]*)\)/gm, '(/material/api/$1)'); +}; + +const replaceStylesLinks = (markdown: string) => { + return markdown.replace(/\(\/styles\/([^)]*)\)/gm, '(/system/styles/$1)'); }; -export default function replaceMarkdownLinks(markdown: string, asPath: string) { - if (asPath.startsWith('/material/') || asPath.startsWith('/x/')) { - return replaceMaterialLinks(replaceAPILinks(replaceComponentLinks(markdown))); - } - return markdown; +export default function replaceMarkdownLinks(markdown: string) { + return replaceStylesLinks(replaceMaterialLinks(replaceAPILinks(replaceComponentLinks(markdown)))); } diff --git a/docs/src/modules/utils/replaceUrl.test.js b/docs/src/modules/utils/replaceUrl.test.js index e72ee08341bc5a..0e21ceb3e20758 100644 --- a/docs/src/modules/utils/replaceUrl.test.js +++ b/docs/src/modules/utils/replaceUrl.test.js @@ -4,6 +4,7 @@ import replaceUrl, { replaceAPILinks, replaceComponentLinks, } from './replaceUrl'; +import FEATURE_TOGGLE from '../../featureToggle'; describe('replaceUrl', () => { it('replace material related pathname', () => { @@ -40,6 +41,161 @@ describe('replaceUrl', () => { expect(replaceComponentLinks(`/components/button-group/`)).to.equal( `/material/react-button-group/`, ); + expect(replaceComponentLinks(`/components/button-group/#main-content`)).to.equal( + `/material/react-button-group/#main-content`, + ); + expect(replaceComponentLinks(`/components/buttons/`)).to.equal(`/material/react-button/`); + expect(replaceComponentLinks(`/components/buttons/#main-content`)).to.equal( + `/material/react-button/#main-content`, + ); + + expect(replaceComponentLinks(`/components/checkboxes/`)).to.equal(`/material/react-checkbox/`); + expect(replaceComponentLinks(`/components/checkboxes/#main-content`)).to.equal( + `/material/react-checkbox/#main-content`, + ); + + expect(replaceComponentLinks(`/components/radio-buttons/`)).to.equal( + `/material/react-radio-button/`, + ); + expect(replaceComponentLinks(`/components/radio-buttons/#main-content`)).to.equal( + `/material/react-radio-button/#main-content`, + ); + + expect(replaceComponentLinks(`/components/selects/`)).to.equal(`/material/react-select/`); + expect(replaceComponentLinks(`/components/selects/#main-content`)).to.equal( + `/material/react-select/#main-content`, + ); + + expect(replaceComponentLinks(`/components/switches/`)).to.equal(`/material/react-switch/`); + expect(replaceComponentLinks(`/components/switches/#main-content`)).to.equal( + `/material/react-switch/#main-content`, + ); + + expect(replaceComponentLinks(`/components/text-fields/`)).to.equal( + `/material/react-text-field/`, + ); + expect(replaceComponentLinks(`/components/text-fields/#main-content`)).to.equal( + `/material/react-text-field/#main-content`, + ); + + expect(replaceComponentLinks(`/components/avatars/`)).to.equal(`/material/react-avatar/`); + expect(replaceComponentLinks(`/components/avatars/#main-content`)).to.equal( + `/material/react-avatar/#main-content`, + ); + + expect(replaceComponentLinks(`/components/badges/`)).to.equal(`/material/react-badge/`); + expect(replaceComponentLinks(`/components/badges/#main-content`)).to.equal( + `/material/react-badge/#main-content`, + ); + + expect(replaceComponentLinks(`/components/chips/`)).to.equal(`/material/react-chip/`); + expect(replaceComponentLinks(`/components/chips/#main-content`)).to.equal( + `/material/react-chip/#main-content`, + ); + + expect(replaceComponentLinks(`/components/dividers/`)).to.equal(`/material/react-divider/`); + expect(replaceComponentLinks(`/components/dividers/#main-content`)).to.equal( + `/material/react-divider/#main-content`, + ); + + expect(replaceComponentLinks(`/components/icons/`)).to.equal(`/material/icons/`); + + expect(replaceComponentLinks(`/components/material-icons/`)).to.equal( + `/material/material-icons/`, + ); + + expect(replaceComponentLinks(`/components/lists/`)).to.equal(`/material/react-list/`); + expect(replaceComponentLinks(`/components/lists/#main-content`)).to.equal( + `/material/react-list/#main-content`, + ); + + expect(replaceComponentLinks(`/components/image-list/`)).to.equal( + `/material/react-image-list/`, + ); + expect(replaceComponentLinks(`/components/image-list/#main-content`)).to.equal( + `/material/react-image-list/#main-content`, + ); + + expect(replaceComponentLinks(`/components/no-ssr/`)).to.equal(`/material/react-no-ssr/`); + expect(replaceComponentLinks(`/components/no-ssr/#main-content`)).to.equal( + `/material/react-no-ssr/#main-content`, + ); + + expect(replaceComponentLinks(`/components/trap-focus/`)).to.equal( + `/material/react-trap-focus/`, + ); + expect(replaceComponentLinks(`/components/trap-focus/#main-content`)).to.equal( + `/material/react-trap-focus/#main-content`, + ); + + expect(replaceComponentLinks(`/components/progress/`)).to.equal(`/material/react-progress/`); + expect(replaceComponentLinks(`/components/progress/#main-content`)).to.equal( + `/material/react-progress/#main-content`, + ); + + expect(replaceComponentLinks(`/components/tables/`)).to.equal(`/material/react-table/`); + expect(replaceComponentLinks(`/components/tables/#main-content`)).to.equal( + `/material/react-table/#main-content`, + ); + + expect(replaceComponentLinks(`/components/tooltips/`)).to.equal(`/material/react-tooltip/`); + expect(replaceComponentLinks(`/components/tooltips/#main-content`)).to.equal( + `/material/react-tooltip/#main-content`, + ); + + expect(replaceComponentLinks(`/components/dialogs/`)).to.equal(`/material/react-dialog/`); + expect(replaceComponentLinks(`/components/dialogs/#main-content`)).to.equal( + `/material/react-dialog/#main-content`, + ); + + expect(replaceComponentLinks(`/components/snackbars/`)).to.equal(`/material/react-snackbar/`); + expect(replaceComponentLinks(`/components/snackbars/#main-content`)).to.equal( + `/material/react-snackbar/#main-content`, + ); + + expect(replaceComponentLinks(`/components/cards/`)).to.equal(`/material/react-card/`); + expect(replaceComponentLinks(`/components/cards/#main-content`)).to.equal( + `/material/react-card/#main-content`, + ); + + expect(replaceComponentLinks(`/components/breadcrumbs/`)).to.equal( + `/material/react-breadcrumbs/`, + ); + expect(replaceComponentLinks(`/components/breadcrumbs/#main-content`)).to.equal( + `/material/react-breadcrumbs/#main-content`, + ); + + expect(replaceComponentLinks(`/components/drawers/`)).to.equal(`/material/react-drawer/`); + expect(replaceComponentLinks(`/components/drawers/#main-content`)).to.equal( + `/material/react-drawer/#main-content`, + ); + + expect(replaceComponentLinks(`/components/links/`)).to.equal(`/material/react-link/`); + expect(replaceComponentLinks(`/components/links/#main-content`)).to.equal( + `/material/react-link/#main-content`, + ); + + expect(replaceComponentLinks(`/components/menus/`)).to.equal(`/material/react-menu/`); + expect(replaceComponentLinks(`/components/menus/#main-content`)).to.equal( + `/material/react-menu/#main-content`, + ); + + expect(replaceComponentLinks(`/components/steppers/`)).to.equal(`/material/react-stepper/`); + expect(replaceComponentLinks(`/components/steppers/#main-content`)).to.equal( + `/material/react-stepper/#main-content`, + ); + + expect(replaceComponentLinks(`/components/tabs/`)).to.equal(`/material/react-tabs/`); + expect(replaceComponentLinks(`/components/tabs/#main-content`)).to.equal( + `/material/react-tabs/#main-content`, + ); + + expect(replaceComponentLinks(`/components/transitions/`)).to.equal(`/material/transitions/`); + expect(replaceComponentLinks(`/components/pickers/`)).to.equal(`/material/pickers/`); + expect(replaceComponentLinks(`/components/about-the-lab/`)).to.equal( + `/material/about-the-lab/`, + ); + expect(replaceComponentLinks(`/components/data-grid/demo/`)).to.equal( `/x/react-data-grid/demo/`, ); @@ -53,44 +209,77 @@ describe('replaceUrl', () => { }); it('replace correct API links', () => { - expect(replaceAPILinks(`/api/button/`)).to.equal(`/material/api/mui-material/button/`); - expect(replaceAPILinks(`/api/button-unstyled/`)).to.equal( - `/material/api/mui-base/button-unstyled/`, - ); - expect(replaceAPILinks(`/api/loading-button/`)).to.equal( - `/material/api/mui-lab/loading-button/`, - ); - expect(replaceAPILinks(`/api/data-grid/data-grid/`)).to.equal( - `/x/api/mui-data-grid/data-grid/`, - ); - expect(replaceAPILinks(`/styles/api/`)).to.equal(`/styles/api/`); + expect(replaceAPILinks(`/api/button/`)).to.equal(`/material/api/button/`); + expect(replaceAPILinks(`/api/no-ssr/`)).to.equal(`/base/api/no-ssr/`); + expect(replaceAPILinks(`/api/portal/`)).to.equal(`/base/api/portal/`); + expect(replaceAPILinks(`/api/textarea-autosize/`)).to.equal(`/base/api/textarea-autosize/`); + expect(replaceAPILinks(`/api/button-unstyled/`)).to.equal(`/base/api/button-unstyled/`); + expect(replaceAPILinks(`/api/loading-button/`)).to.equal(`/material/api/loading-button/`); + expect(replaceAPILinks(`/api/data-grid/data-grid/`)).to.equal(`/x/api/data-grid/data-grid/`); expect(replaceAPILinks(`/system/basic/`)).to.equal(`/system/basic/`); }); it('should do nothing if the APIs have updated', () => { - expect(replaceAPILinks(`/material/api/mui-material/button/`)).to.equal( - `/material/api/mui-material/button/`, - ); - expect(replaceAPILinks(`/material/api/mui-base/button-unstyled/`)).to.equal( - `/material/api/mui-base/button-unstyled/`, - ); - expect(replaceAPILinks(`/material/api/mui-lab/loading-button/`)).to.equal( - `/material/api/mui-lab/loading-button/`, - ); - expect(replaceAPILinks(`/x/api/mui-data-grid/data-grid/`)).to.equal( - `/x/api/mui-data-grid/data-grid/`, + expect(replaceAPILinks(`/material/api/button/`)).to.equal(`/material/api/button/`); + expect(replaceAPILinks(`/base/api/button-unstyled/`)).to.equal(`/base/api/button-unstyled/`); + expect(replaceAPILinks(`/material/api/loading-button/`)).to.equal( + `/material/api/loading-button/`, ); + expect(replaceAPILinks(`/x/api/data-grid/`)).to.equal(`/x/api/data-grid/`); }); it('only replace links for new routes (/material/* & /x/*)', () => { expect(replaceUrl(`/guides/minimizing-bundle-size/`, '/material/react-buttons')).to.equal( `/material/guides/minimizing-bundle-size/`, ); + expect( + replaceUrl(`/components/data-grid/getting-started/#main-content`, '/x/react-data-grid'), + ).to.equal(`/x/react-data-grid/getting-started/#main-content`); + expect( + replaceUrl(`/components/data-grid/components/#main-content`, '/x/react-data-grid'), + ).to.equal(`/x/react-data-grid/components/#main-content`); + expect(replaceUrl(`/api/button-unstyled`, '/base/api/button-unstyled')).to.equal( + `/base/api/button-unstyled`, + ); + if (FEATURE_TOGGLE.enable_system_scope) { + expect(replaceUrl(`/styles/api/`, `/system/basics`)).to.equal(`/system/styles/api/`); + } else { + expect(replaceUrl(`/styles/api/`, `/system/basics`)).to.equal(`/styles/api/`); + } + }); + + it('[i18n] only replace links for new routes (/material/* & /x/*)', () => { + expect(replaceUrl(`/zh/guides/minimizing-bundle-size/`, '/zh/material/react-buttons')).to.equal( + `/zh/material/guides/minimizing-bundle-size/`, + ); + expect( + replaceUrl(`/zh/components/data-grid/getting-started/#main-content`, '/zh/x/react-data-grid'), + ).to.equal(`/zh/x/react-data-grid/getting-started/#main-content`); + expect( + replaceUrl(`/zh/components/data-grid/components/#main-content`, '/zh/x/react-data-grid'), + ).to.equal(`/zh/x/react-data-grid/components/#main-content`); + expect(replaceUrl(`/zh/api/button-unstyled`, '/zh/base/api/button-unstyled')).to.equal( + `/zh/base/api/button-unstyled`, + ); + if (FEATURE_TOGGLE.enable_system_scope) { + expect(replaceUrl(`/zh/styles/api/`, `/system/basics`)).to.equal(`/zh/system/styles/api/`); + } else { + expect(replaceUrl(`/styles/api/`, `/system/basics`)).to.equal(`/styles/api/`); + } }); it('does not replace for old routes', () => { expect(replaceUrl(`/guides/minimizing-bundle-size/`, '/components/buttons')).to.equal( `/guides/minimizing-bundle-size/`, ); + expect( + replaceUrl(`/components/data-grid/getting-started/#main-content`, '/components/buttons'), + ).to.equal(`/components/data-grid/getting-started/#main-content`); + }); + + it('does not replace for x marketing page', () => { + expect(replaceUrl(`/components/data-grid/getting-started/#main-content`, '/x/')).to.equal( + `/components/data-grid/getting-started/#main-content`, + ); }); }); diff --git a/docs/src/modules/utils/replaceUrl.ts b/docs/src/modules/utils/replaceUrl.ts index ca6de245e2ea50..5748707d09f611 100644 --- a/docs/src/modules/utils/replaceUrl.ts +++ b/docs/src/modules/utils/replaceUrl.ts @@ -1,41 +1,78 @@ +import FEATURE_TOGGLE from 'docs/src/featureToggle'; + +function isNewLocation(url: string) { + url = url.replace(/^\/[a-z]{2}\//, '/'); + if (url === '/x' || url === '/x/') { + // skipped if it is the X marketing page + return false; + } + return ( + url.startsWith('/x') || + url.startsWith('/material') || + url.startsWith('/base') || + (FEATURE_TOGGLE.enable_system_scope && url.startsWith('/system')) + ); +} + export const replaceMaterialLinks = (url: string) => { - const routes = 'guides|customization|getting-started|discover-more'; - if (url.startsWith('/material')) { + if (isNewLocation(url)) { return url; } - return url.replace(new RegExp(`(${routes})`), 'material/$1'); + return url.replace( + new RegExp(`(guides|customization|getting-started|discover-more)`), + 'material/$1', + ); }; export const replaceComponentLinks = (url: string) => { - if (url.startsWith('/x') || url.startsWith('/material')) { + if (isNewLocation(url)) { return url; } - return url - .replace(/\/components\/data-grid/, '/x/react-data-grid') - .replace(/\/components\/(.*)/, '/material/react-$1'); + url = url.replace(/\/components\/data-grid/, '/x/react-data-grid'); + if (isNewLocation(url)) { + return url; + } + if (url.match(/components\/(icons|material-icons|transitions|pickers|about-the-lab)/)) { + url = url.replace(/\/components\/(.*)/, '/material/$1'); + } else { + url = url.replace(/\/components\/(.*)/, '/material/react-$1'); + if (!url.match(/\/react-(tabs|breadcrumbs)/)) { + url = url + .replace(/(react-[-a-z]+)(x|ch)es([^a-z-])/, '$1$2$3') + .replace(/(react-[-a-z]+)s([^a-z-])/, '$1$2') + .replace(/(react-[-a-z]+)(x|ch)es$/, '$1$2') + .replace(/(react-[-a-z]+)s$/, '$1') + .replace(/react-trap-focu/, 'react-trap-focus') + .replace(/react-progres/, 'react-progress'); + } + } + return url; }; export const replaceAPILinks = (url: string) => { - if (url.startsWith('/x') || url.startsWith('/material') || !url.startsWith('/api')) { + if (isNewLocation(url) || !url.replace(/^\/[a-zA-Z]{2}\//, '/').startsWith('/api')) { return url; } url = url - .replace(/\/api\/data-grid(.*)/, '/x/api/mui-data-grid$1') + .replace(/\/api\/data-grid(.*)/, '/x/api/data-grid$1') .replace( /\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)(.*)/, - '/material/api/mui-lab/$1$2', + '/material/api/$1$2', ) - .replace(/\/api\/([^/]+-unstyled)(.*)/, '/material/api/mui-base/$1$2'); + .replace(/\/api\/(no-ssr|portal|textarea-autosize)/, '/base/api/$1') + .replace(/\/api\/([^/]+-unstyled)(.*)/, '/base/api/$1$2'); - if (url.startsWith('/x') || url.startsWith('/material')) { + if (isNewLocation(url)) { return url; } - return url.replace(/\/api\/(.*)/, '/material/api/mui-material/$1'); + return url.replace(/\/api\/(.*)/, '/material/api/$1'); }; export default function replaceUrl(url: string, asPath: string) { - if (asPath.startsWith('/material/') || asPath.startsWith('/x/')) { - return replaceMaterialLinks(replaceAPILinks(replaceComponentLinks(url))); + if (isNewLocation(asPath)) { + url = replaceMaterialLinks(replaceAPILinks(replaceComponentLinks(url))); + url = url.replace(/^\/styles\/(.*)/, '/system/styles/$1'); + url = url.replace(/^\/([a-z]{2})\/styles\/(.*)/, '/$1/system/styles/$2'); } return url; } diff --git a/docs/src/pages.ts b/docs/src/pages.ts index 69f3e8c9973516..93b19e319be5d2 100644 --- a/docs/src/pages.ts +++ b/docs/src/pages.ts @@ -5,6 +5,10 @@ export interface MuiPage { children?: MuiPage[]; disableDrawer?: boolean; icon?: string; + /** + * In case the children have pathnames out of pathname value, use this field to scope other pathnames + */ + scopePathnames?: string[]; /** * Pages are considered to be ordered depth-first. * If a page should be excluded from this order, set `order: false`. @@ -355,7 +359,7 @@ const pages: readonly MuiPage[] = [ }, { pathname: '/versions', ordered: false }, { pathname: '/', ordered: false, disableDrawer: true }, - { pathname: 'https://medium.com/material-ui', title: 'Blog', icon: 'BookIcon' }, + { pathname: '/blog', title: 'Blog', icon: 'BookIcon' }, ]; export default pages; diff --git a/docs/src/pages/company/about/about.md b/docs/src/pages/company/about/about.md deleted file mode 100644 index 856353098436d0..00000000000000 --- a/docs/src/pages/company/about/about.md +++ /dev/null @@ -1,23 +0,0 @@ -# About Us - -

    We're on a mission to make building UIs with React fun.

    - -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. -We build open source and commercial tools used by many hundreds of thousands of developers in production. -We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and simpler web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -MUI started back in 2014 to unify React and Material Design. - -Today, MUI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/careers/TEMPLATE.md b/docs/src/pages/company/careers/TEMPLATE.md new file mode 100644 index 00000000000000..b96f4e4159556d --- /dev/null +++ b/docs/src/pages/company/careers/TEMPLATE.md @@ -0,0 +1,68 @@ +# XXXXXX + +

    XXXXXX

    + +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +XXXXXX + +### Why this is interesting + +XXXXXX + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +## About the role + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +XXXXXX + +## About you + +### Skills you should have + +XXXXXX + +### What would be nice if you had, but isn't required + +XXXXXX + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=XXXXXX) diff --git a/docs/src/pages/company/careers/designer.md b/docs/src/pages/company/careers/designer.md new file mode 100644 index 00000000000000..e39fba489984ef --- /dev/null +++ b/docs/src/pages/company/careers/designer.md @@ -0,0 +1,101 @@ +# Designer + +

    Design is critical to our success. We're looking for skills that complement those of our Lead Designer. You'll help to design the tools that enable our audience to build outstanding-looking UIs.

    + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Material-UI started as an open-source project. +Over time, the audience and usage grew considerably, and some of the library's early contributors became full-time maintainers. +A company was incorporated to support this growth, and more recently [was rebranded from Material-UI to MUI](/blog/material-ui-is-now-mui/). +The new brand was fundamental to set the stage for MUI to become larger than Material Design, which was something we were already doing. +Currently, we have five main projects that are not at all related to MD: + +- [MUI Core](/core/): + - [MUI Base](/customization/unstyled-components/): the unstyled version of the components. + - [MUI System](/system/basics/): our most recent take on styling for React components. + - [MUI Joy (working title)](https://github.com/mui-org/material-ui/discussions/29024): a second design system as an alternative to Material Design. +- [MUI X](/x): as mentioned, a growing set of advanced components. + Today, the flagship is the [Data Grid](/components/data-grid/), a game-changing component for presenting large amounts of data, which integrates perfectly with MUI Core. +- MUI Studio: a very recent endeavor aimed at exploring how our users can visually create apps 10x faster with the power of low-code and the flexibility of pro-code. + +We also know, especially due to [our annual developer survey](/blog/2020-developer-survey-results/), that design quality plays a huge part when developers are considering component library options. +Therefore, we need to grow the design team to help us push these initiatives further. + +## About the role + +Some criteria for applying to this role: + +- Location: fully remote (preference for UTC-6 to UTC +3). +- Type of work: full-time (as a contractor or employee, [depending primarily on location](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)). +- Level: [3 or above](https://docs.google.com/spreadsheets/d/18VvbVCNBRWu-QYPncBl5IWTXTOpD68UQsLsymBvfm88/edit#gid=0). +- Start date: immediately. + +We need someone experienced enough to help two different teams with hard problems. +You'll be responsible for ensuring that the MUI Studio and MUI X teams have spot-on design and product work. +Given that each product is at a different stage, at this moment we believe that one person is enough to oversee the design function for both teams. +You'll have the freedom, trust, and help you need to balance and tackle all the work. +You'll also be the second designer of a growing design team, so we'll also need your help to shape this growth. + +### Here are a few initiatives you might work on + +- Help design the first version of MUI Studio, from early strategy to its look and feel. +- Evolve and refine the Data Grid UX for features such as filtering, column pinning, row editing, and more. +- Help set the bar higher for MUI X documentation, from visual design to copywriting. +- Support the design team growth by promoting design/product culture, and hiring new members. + +### You might fit for this role if you + +- See yourself as a generalist designer, tackling problems ranging from strategic thinking to execution. (More insight in the [first draft of our design philosophy](https://mui-org.notion.site/Design-philosophy-bdbef60d6fad4134a43870df3e452ebc), available in our public Handbook). +- Have excellent visual and interaction design skills. +- Consider yourself a great communicator, both written and verbal. + Designers are key players when it comes to creating alignment and shared understanding, whether with internal or external stakeholders. +- Feel comfortable around code and git (we use GitHub). + Developers are MUI's main audience, so it's very important to experience our technology for yourself, to empathize with our users. + You should be capable of tweaking JSX and CSS, ensuring that your designs are implemented with the highest fidelity. + But don't worry, you'll always have the support of your teams' developers. + +Previous experience with design systems would be great, but is not required. + +## Benefits & Compensation + +We offer competitive compensation, aligned with your profile and location. +We're ready to pay top market rates for a designer that can significantly push the mission forward. +Other perks are described on [the careers page](/careers/#perks-amp-benefits/). + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Designer). + +## What happens next? + +We start by screening applications, looking for designers that showcase the desired skills and experience. +If your application stands out, we'll contact you for a get-to-know conversation, where we'll meet each other. + +If that goes well, you'll be invited to up to four additional conversations, those being: + +- A walkthrough on one or two selected projects of your career that you believe demonstrates [comparable experience.](https://articles.uie.com/ux-hiring-lets-talk-about-comparable-experience/) +- A chat with one of the product managers or engineers that you will work closely with. +- A chat with one of MUI's founders. +- A possible follow-up chat if we missed addressing anything relevant in the previous conversations. + +All these conversations will be 1:1 and over video chat. +Please ask as many questions as you wish throughout the whole process, it's a two-way discussion. +If you happen to need additional conversations as well, feel free to ask; we'll be happy to schedule them. +Lastly, please note that we're unable to offer individual feedback during the initial screening process, as we're a small team and don't have the bandwidth to do so. + +We look forward to hearing from you! ☺️ diff --git a/docs/src/pages/company/careers/developer-advocate.md b/docs/src/pages/company/careers/developer-advocate.md index a558180fe46798..3668fd7431056f 100644 --- a/docs/src/pages/company/careers/developer-advocate.md +++ b/docs/src/pages/company/careers/developer-advocate.md @@ -1,32 +1,47 @@ # Developer Advocate -

    You will educate users on the latest features, craft high-quality examples and demos, engage with the community, write documentation, advocate for creating faster and more appealing UIs, and help to promote the advanced components.

    +

    You will educate users on the latest features, craft high-quality examples, and demos, engage with the community, write documentation, advocate for creating faster and more appealing UIs, and help to promote the advanced components.

    ## Details of the Role -- Location: Remote (preference for UTC-5 to UTC+4). -- Type of work: Full-time (contractor or employee [depending on the case](https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Location: Remote (preference for UTC-7 to UTC+2). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) - Start date: Immediately. - We're a remote company, we prefer asynchronous communication over meetings. - We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. -## About us +## About the company -See the [careers](/careers/) and [about us](/about/) pages. +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. -### Why we're hiring +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring Both our open-source community and our premium products are growing fast (x2-3 YoY). We need talented people to keep that going! +We are looking for a dedicated educator and experienced developer to join us as a Developer Advocate to help people get familiar with and use MUI most effectively. + In our [last developer survey](/blog/2020-developer-survey-results/#5-how-can-we-improve-material-ui-for-you), we learned that have a long way to go in helping developers to be successful with our technology. We have underinvested in this area for too long. Your mission will be to be the voice of the developers of the community inside the company. -We are looking for someone that can generate the following outcomes: +We are looking for someone that can contribute to the following outcomes: - Amplify the need of the community so the product direction aims at what people need the most. - Improve the overall developer experience, resulting in better NPS & CSAT scores. -- Create momentum in the community and drive adoption of the library. +- Create momentum in the React community and drive adoption of the library. + +## About the role ### Why this is interesting @@ -35,23 +50,25 @@ You will lay the foundations for a team that could grow over time. Our solution empowers React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use MUI every month. -## About the role - -We are looking for a dedicated educator and experienced developer to join us as a Developer Advocate to help people get familiar with and use MUI most effectively. - ### What you'll do on a day-to-day basis +Depending on the day, you'll: + - You will monitor success metrics, consider how effective initiatives are at achieving goals, and adjust effort accordingly. - You will create and implement plans to build, enable and nurture the community. - You will compose interesting blog posts. You will be writing tutorials and other technical content. - You will participate in and speak at events, and online live streams. - You will build inspiring apps, examples, and improve the documentation where needed. -- You will create technical videos, video tutorials, demos, and additional videos for the MUI YouTube channel. +- You will create technical videos, video tutorials, demos, and additional videos for [our YouTube channel](https://www.youtube.com/channel/UCUdh2wVTrd7hErLo9Rh0HsQ). - You will give feedback to product management, to influence the product roadmaps based on developers' needs. - You will make sure contributions to the documentation are of high quality, sharing best practices with the developers. - You will help other team members grow at engaging with the community. For instance by encouraging and providing critical feedback on new blog posts. - You will rework the pages of the documentation that are confusing, base on feedback. -- You will follow GitHub issues to understand where developers face frustration, and develop strategies to overcome these. This could be suggesting or implementing documentation updates, or proposing or contributing code changes that solve the core issue. +- You will follow GitHub issues to understand where developers face frustration and develop strategies to overcome these. This could be suggesting or implementing documentation updates, or proposing or contributing code changes that solve the core issue. + +For the right candidate: + +- Working with the Leadership to construct and execute on a hiring plan to grow the Developer Experience team. ### Here are a few initiatives you might work on @@ -68,7 +85,7 @@ We are looking for a dedicated educator and experienced developer to join us as ### Skills you should have -- You are fluent in English (both written and spoken). +- You are fluent in English (both written and spoken). You'll be the face of MUI in the world, and make everyone in the company proud of the Developer Experience team. - You are a highly empathic person. - You are passionate about helping other developers solve problems and have an educational mindset. - You have some formal or informal experience in teaching: training, tutoring, mentoring, etc. @@ -82,10 +99,12 @@ We are looking for a dedicated educator and experienced developer to join us as - Experience working with/editing video. - Experience using MUI. -## Compensation +## Benefits & Compensation -Competitive compensation depending on the profile and location. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/careers/#perks-amp-benefits) page. +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. -## Apply +## How to apply? -[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Advocate) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Advocate) diff --git a/docs/src/pages/company/careers/developer-experience-engineer.md b/docs/src/pages/company/careers/developer-experience-engineer.md new file mode 100644 index 00000000000000..090e0bc9a0c1b3 --- /dev/null +++ b/docs/src/pages/company/careers/developer-experience-engineer.md @@ -0,0 +1,102 @@ +# Developer Experience Engineer + +

    You will focus on providing experiences that delight developers using MUI.

    + +## Details of the Role + +- Location: Remote (preference for UTC-7 to UTC+2). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +Developer Experience matters, [a lot](https://future.a16z.com/the-case-for-developer-experience/). +We are looking for somebody to build the best developer experience ever created around a component library, earning the love of developers everywhere. +This is about focusing on the outcome: success, that developers can have a wonderful workflow with our product. + +We are looking for someone that can contribute to the following outcomes: + +- Amplify the need of the community so the product direction aims at what people need the most. +- Improve the overall developer experience, resulting in better NPS & CSAT scores. +- Create momentum in the React community and drive adoption of the library. + +### Why this is interesting + +You have a lot of feedback, more than we can process. It's an opportunity to challenge the state of the art in the React component dev tool space. + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +## About the role + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +- You will collaborate with Developer Advocates, Designers, Product Managers, Engineering Managers, Marketing, and other stakeholders to identify opportunities for improvement. +- Inform the technical approach and architecture of MUI as it relates to developer experiences. +- Help contribute to the MUI community by providing code review, mentorship, and support to MUI employees, community members, and partners. +- Advocate and support improvements to MUI to improve development and integration of tools and plugins, e.g. Storybook, Tailwind CSS. +- Work on issues and improvements critical to the success of MUI users and the broader community. +- Foster a culture of learning through iterative improvements and strong collaboration with UX research. + +For the right candidate: + +- Working with the Leadership to construct and execute on a hiring plan to grow the Developer Experience team. + +## About you + +### Skills you should have + +- **A track record of demonstrating an eye for product and solving real-world user problems.** If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team. +- **Expertise in the modern JavaScript ecosystem**. + MUI is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, webpack, and Babel. +- **Strong written and verbal communication skills**. + As part of the team, you'll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources. +- **Ability to dive into complex problems**. + You should be able to quickly assess, understand, and iterate upon aspects of our codebase. +- **Ready and willing to ask and answer questions**. + If you're comfortable saying you're unsure, asking for help; but equally reaching out to assist others, you'll be an incredible addition to our team. We thrive because of continuous learning. First-time mistakes should be celebrated, not blamed. +- **Past work with front-end infrastructure**. + Perhaps you've created your company's design system, written a Babel plugin, or written complex React components. + It would be great if you could address this in your cover letter! + +### What it would be nice if you had, but isn't required + +- **You've contributed to a design system before**. + You have worked on enterprise components in the past, maybe for internal use in your company. + You have built complex and advanced features while making sure the accessibility was fully functional. +- **You've maintained an active repository before**. + Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams. + Previous experience with highly active repository workflows is a definite plus for this role. +- **You have contributed code to MUI before**. A history of contributing to MUI would be a definite plus. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Experience%20Engineer) diff --git a/docs/src/pages/company/careers/full-stack-engineer.md b/docs/src/pages/company/careers/full-stack-engineer.md index 02de510f8fabd5..1035ab1f32fd92 100644 --- a/docs/src/pages/company/careers/full-stack-engineer.md +++ b/docs/src/pages/company/careers/full-stack-engineer.md @@ -4,26 +4,41 @@ ## Details of the Role -- Location: Remote (preference for UTC-5 to UTC+4). -- Type of work: Full-time (contractor or employee [depending on the case](https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) - Start date: Immediately. - Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). - We're a remote company, we prefer asynchronous communication over meetings. - We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. -## About us +## About the company -See the [careers](/careers/) and [about us](/about/) pages. +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. -### Why we're hiring +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring Both our open-source community and our premium products are growing fast (x2-3 YoY). We need talented people to keep that going! -Our mission is to make building UIs more accessible. +Our mission is to empower as many people as possible to build great UIs, faster. The faster and simpler it is, and the broader the audience that can create custom UIs, the better. We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written. +You will initiate the development of a bold new product vertical. We are looking for an experienced, and ambitious full-stack engineer that is ready to work in an entrepreneurial environment. + +## About the role + ### Why this is interesting Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. @@ -33,12 +48,10 @@ In our [last developer survey](/blog/2020-developer-survey-results/), we learned They are looking for ways to move faster. They are working on a couple of new projects every year, and where the integration between the UI and the data is key. -## About the role - -You will initiate the development of a bold new product vertical. We are looking for an experienced, and ambitious full-stack engineer that is ready to work in an entrepreneurial environment. - ### What you'll do on a day-to-day basis +Depending on the day, you'll: + - **Define the roadmap** and refine the product direction. - **Take ownership of features from idea/mockup to live deployment**. You'll shape user-facing features with everything from database models to UI components. - **Ship. Early and often**. You'll iterate and ship frequently. You'll have a real impact on the end-user experience and you'll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible. @@ -51,7 +64,7 @@ You are curious, you enjoy taking risks, and learning. ### Skills you should have -- **Expertise in the modern JavaScript ecosystem**. MUI is built on the shoulders of giants, making use of technologies such as ES2020+, TypeScript, Node.js, React, Next.js, and Babel. The knowledge of SQL, Docker, and the AWS stack will prove itself valuable. +- **Expertise in the modern JavaScript ecosystem**. MUI is built on the shoulders of giants, making use of technologies such as ES2021+, TypeScript, Node.js, React, Next.js, and Babel. The knowledge of SQL, Docker, and the AWS stack will prove itself valuable. - ​You are autonomous and a faster learner. You are proactive and can start projects without constant direction. - You ship code often that is elegant to use and read, and you take ownership of it. You can be relied upon throughout its lifecycle. - You can put a lot of thoughts into design, product roadmap, and the details of each feature. You won't only take a project and make it "functional." @@ -62,10 +75,12 @@ You are curious, you enjoy taking risks, and learning. - **You've maintained an active repository before.** Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams. -## Compensation +## Benefits & Compensation -Competitive compensation of up to \$140,000 USD/year, depending on the profile and location. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/careers/#perks-amp-benefits) page. +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. -## Apply +## How to apply? -[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Full-stack%20Engineer) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Full-stack%20Engineer%20-%20Studio) diff --git a/docs/src/pages/company/careers/hustler-engineer.md b/docs/src/pages/company/careers/hustler-engineer.md new file mode 100644 index 00000000000000..df0497f34eb437 --- /dev/null +++ b/docs/src/pages/company/careers/hustler-engineer.md @@ -0,0 +1,95 @@ +# Hustler Engineer - Store + +

    You will lead the technical and operational development of MUI Store.

    + +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +The orders on the MUI Store are growing fast (x2-3 YoY). +We need talented people to keep that going! + +The development and operations of the store are currently almost exclusively run by the executive team of the company (e.g. CEO). This team does no longer has enough bandwidth. The store doesn't receive the care it deserves. You will be responsible to step up and carry forward the development of the store on multiple fronts: implementing new features, reviewing new template submissions, defining the product direction, taking care of operational needs, and a lot more. + +### Why this is interesting + +You will get the opportunity to run MUI Store as a small start-up inside the company. + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +## About the role + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +- Implement new features on https://mui.com/store/ to better support customers and contributors. +- Review new items submitted by the contributors to be hosted on the marketplace. +- Fix root problems raised by customers on the support channel. +- Own the operations: manage payouts, create sales reports, etc. + +### Here are a few initiatives you might work on + +Tasks that you might work on once you join: + +- Revamp the fulfillment pipeline for MUI X Pro/Premium. +- Add a search page to scale the hosting to more items from contributors. +- Revamp the design of the store to match the new brand of mui.com. +- Migrate the store from Gatsby to Next.js. Gatsby was introduced at a point in time where it had more downloads than Next.js. Our CEO has extensive experience with Next.js since 2017 but wanted to ensure that MUI was supporting Gatsby well too. + This requirement [is no longer relevant](https://npm-stat.com/charts.html?package=next&package=gatsby&from=2019-12-18&to=2021-12-18), and since the DX of Next.js is significantly better, time to migrate. +- Develop the SEO strategy, create new blog posts. +- Develop the SEA strategy, try retargeting, Google Ads, etc. + +## About you + +We're looking for someone with strong development skills. +More important than specific technical skills though is that you're a strong problem solver who loves to learn new things. Details matter to you. + +### Skills you should have + +- **Expertise in WordPress and the modern JavaScript ecosystem.** +- **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, finding boring solutions, we want you on our team. +- **Strong written and verbal communication skills**. + As part of the team, you'll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources. +- **Ability to dive into complex problems**. + You should be able to quickly assess, understand, and iterate upon aspects of our codebase. +- **Ready and willing to ask and answer questions**. + If you're comfortable saying you're unsure, asking for help; but equally reaching out to assist others, you'll be an incredible addition to our team. We thrive because of continuous learning. First-time mistakes should be celebrated, not blamed. +- **Avoid monolithic deliverables**. + You scope and stage your work into well-defined milestones to ship. + +### What it would be nice if you had, but isn't required + +- **Has or is pursuing a business side project**. You owned a side project generating revenues on the side of your full-time job. You were doing whatever was necessary to solve people's pain. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Hustler%20Engineer%20-%20Store) diff --git a/docs/src/pages/company/careers/people-operation-manager.md b/docs/src/pages/company/careers/people-operation-manager.md new file mode 100644 index 00000000000000..4df6b2456b3e04 --- /dev/null +++ b/docs/src/pages/company/careers/people-operation-manager.md @@ -0,0 +1,88 @@ +# People Operations Manager + +

    Build the HR function from the ground up at a high-growth tech company.

    + +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +At the current growth rate (self bootstrap), we target 25 new hires in 2022. We would reach 40 people. +We need somebody to lead our HR strategy including hiring, onboarding, diversity & inclusion, learning & development, and employee happiness. + +## About the role + +### Why this is interesting + +You'll have the freedom to implement processes and to drive change across the organization. + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +- **Connecting individual performance with company goals**. + - You will help all individuals understand their primary role within the wider organization. + - You will partner with Finance for budgeting/compensation purposes. You will manage compensation, benefits, leave, and other people-related matters. + - You will shape a strategy that aligns and moves MUI towards continued growth, innovation, and improvement. +- **Improve employees experience**. + - You will work on the employee engagement survey results. + - You will reduce the admin burden. + - You will own the Retreat. Bring our remote team together. Being a fully distributed remote team has its challenges. You organize team events, make sure everybody has what they need to be productive, and find creative ways to engage as a team. +- **Help employee development**. You will improve program for evaluating performance and providing feedback. +- **Help develop the remote culture**. + You will continue to train and mentor the team to update information in the handbook, for easy access to all. +- **Legal compliance**. You will stay current on employee legislation and develop internal policies and procedures to support a scaling company; serve as the main point of contact for administrative matters. + +## About you + +You are a [manager of one](https://signalvnoise.com/posts/1430-hire-managers-of-one). +You are curious, you enjoy taking risks, and learning. + +### Skills you should have + +- 4+ years of experience as an HR business partner, preferably with experience at fast-growing technology companies. +- A great listener who enjoys interacting with others and is open to feedback. +- Excellent verbal and written communications skills that will enable you to develop relationships with all members of our team, regardless of tenure or position. +- Experience implementing HR programs such as compensation review process, HR compliance, and employee development/growth. +- Able to handle confidential information with discretion and deal with professionals inside and outside the company. +- Tech-savvy with the ability to learn new tools quickly and find tools to help automate workflows. +- A self-starter looking to grow and willing to own projects from start to finish with limited supervision. + +### What would be nice if you had, but isn't required + +- Basic knowledge of web development. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=People%20Operations%20Manager) diff --git a/docs/src/pages/company/careers/product-manager.md b/docs/src/pages/company/careers/product-manager.md index 18b17e89a990aa..3f27d19c812d68 100644 --- a/docs/src/pages/company/careers/product-manager.md +++ b/docs/src/pages/company/careers/product-manager.md @@ -4,22 +4,33 @@ ## Details of the Role -- Location: Remote (preference for UTC-5 to UTC+4). -- Type of work: Full-time (contractor or employee [depending on the case](https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) - Start date: Immediately. - We're a remote company, we prefer asynchronous communication over meetings. - We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. -## About us +## About the company -See the [careers](/careers/) and [about us](/about/) pages. +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. -### Why we're hiring +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring Both our open-source community and our premium products are growing fast (x2-3 YoY). We need talented people to keep that going! -Our mission is to make building UIs more accessible. +Our mission is to empower as many people as possible to build great UIs, faster. The faster and simpler it is, and the broader the audience that can create custom UIs, the better. We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written: low-code. @@ -32,12 +43,14 @@ In our [last developer survey](/blog/2020-developer-survey-results/), we learned They are looking for ways to move faster. They are working on a couple of new projects every year, and where the integration between the UI and the database is key. -## About the role - You will initiate the exploration of a bold new product vertical. +## About the role + ### What you'll do on a day-to-day basis +Depending on the day, you'll: + - You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem. This involves growing a deep understanding of our technical choices and constraints. - You will drive the growth of the product by owning KPIs. @@ -58,10 +71,12 @@ You will initiate the exploration of a bold new product vertical. - Experience building developer tools. - Experience working with open-source and having interacted with open-source communities. -## Compensation +## Benefits & Compensation -Competitive compensation of up to \$140,000 USD/year, depending on the profile and location. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/careers/#perks-amp-benefits) page. +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. -## Apply +## How to apply? -[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Manager) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Manager) diff --git a/docs/src/pages/company/careers/react-engineer.md b/docs/src/pages/company/careers/react-engineer.md index 4e694796317a33..c2735b891ca69a 100644 --- a/docs/src/pages/company/careers/react-engineer.md +++ b/docs/src/pages/company/careers/react-engineer.md @@ -1,44 +1,54 @@ -# React Engineer +# React Engineer - X -

    We are looking for a React Engineer to support the advanced components team, build new ambitious enterprise features, and grow the open-source adoption.

    +

    You will strengthen the advanced components team, build new ambitious complex features, work on strategic problems, and help grow the adoption.

    ## Details of the Role -- Location: Remote (preference for UTC-5 to UTC+4). -- Type of work: Full-time (contractor or employee [depending on the case](https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) - Start date: Immediately. - Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). - We're a remote company, we prefer asynchronous communication over meetings. - We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. -## About us +## About the company -See the [careers](/careers/) and [about us](/about/) pages. +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. -### Why we're hiring +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. -Both our open-source community and our premium products are growing fast (x2-3 YoY). We need talented engineers to keep that going! +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). -The advanced components team (X) needs help to develop the enterprise features. -We have started with the [data grid](/components/data-grid/#commercial-version). -We need to build new features and introduce new components. +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +The advanced components team (MUI X) needs help. +We have started with the [data grid](/components/data-grid/#commercial-version) component. +We need to build new features on it and introduce new components. The enterprise version is built on the open-source version of the components. We also need help to continue to improve the health of the open-source product: make the advanced components easier to use, make it support more use cases, improve performance, make it more accessible, keeping up with the community, guiding developers to answers, and just generally being a positive presence in the open-source community. -### Why this is interesting +## About the role -Our solution is empowering React developers to build awesome applications. -It should be easy, it shouldn't require any advanced technical skills. -Hundreds of thousands of developers use MUI every month. +### Why this is interesting -Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve. +The advanced components portfolio is still small, with a million interesting and challenging problems to solve. -## About the role +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. ### What you'll do on a day-to-day basis -Depending on the day or the team you join, you'll: +Depending on the day, you'll: - **Help guide architectural decisions**. The future of MUI is discussed and planned in our public RFCs and issues. @@ -82,7 +92,7 @@ We're looking for someone with strong front-end skills. More important than spec ### Skills you should have - **Expertise in the modern JavaScript ecosystem**. - MUI is built on the shoulders of giants, making use of technologies such as ES2020, TypeScript, Node.js, React, Next.js, webpack, and Babel. + MUI is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, webpack, and Babel. - **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team. - **Experience building and shipping production code in a team setting** with a passion for writing tested, performant, and high-quality code. - **Strong written and verbal communication skills**. @@ -107,10 +117,12 @@ We're looking for someone with strong front-end skills. More important than spec Previous experience with highly active repository workflows is a definite plus for this role. - **You have contributed code to MUI before**. A history of contributing to MUI would be a definite plus. -## Compensation +## Benefits & Compensation -Competitive compensation of up to \$140,000 USD/year, depending on the profile and location. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/careers/#perks-amp-benefits) page. +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. -## Apply +## How to apply? -[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Engineer) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Engineer%20-%20X) diff --git a/docs/src/pages/company/careers/support-agent.md b/docs/src/pages/company/careers/support-agent.md new file mode 100644 index 00000000000000..ed9dd05cfc0ab9 --- /dev/null +++ b/docs/src/pages/company/careers/support-agent.md @@ -0,0 +1,72 @@ +# Support Agent - Store + +

    You will provide support for the customers of MUI Store. You will directly impact customers' satisfaction and success.

    + +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +The orders on the MUI Store are growing fast (x2-3 YoY). +We need talented people to keep that going! + +The support on the store is currently almost exclusively done by the executive team of the company (e.g. CSO). This team does no longer has enough bandwidth. You will be responsible to step up and carry forward the support provided to customers of the store on multiple fronts: answering license questions, processing purchase orders, granting refunds, identifying recurring problems, and a lot more. + +## About the role + +### Why this is interesting + +You will be in the tech industry. We offer flexibility in your work day. + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +- Respond to customer inquiries via email in a clear, concise, and comprehensive manner. + You might provide refunds, answer license questions, process purchase-orders, etc. +- Assist in writing and maintaining the FAQs and guides. +- Suggest opportunities to make customers happier for our product team. +- Suggest opportunities to improve the quality and efficiency of our customer service operation. + +## About you + +### Skills you should have + +- 1+ years' experience in a Customer Support role. +- Exceptional writing skills (be clear and concise). +- Experience working remotely. + +### What it would be nice if you had, but isn't required + +- Basic knowledge of web development. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location of up to $20/h. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Support%20Agent%20-%20Store) diff --git a/docs/src/pages/company/careers/support-engineer.md b/docs/src/pages/company/careers/support-engineer.md new file mode 100644 index 00000000000000..44d9468a243ffb --- /dev/null +++ b/docs/src/pages/company/careers/support-engineer.md @@ -0,0 +1,121 @@ +# Support Engineer - X + +

    You will provide support to users for the advanced components team. You will directly impact developers' satisfaction and success.

    + +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +We need a Support Engineer to solve friction points of users. +We face challenges on multiple fronts: + +- As a result of this growth, we (will) have more users questions and feedback coming in than ever before. +- The commercial version of the library is growing, but our community of developers is still small and has a reduced incentive to contribute compared to the community plan. +- Software engineers at MUI are tasked with doing support, however, they could benefit from the help of a dedicated person in the company, for instance to improve the workflows and tooling. +- The MUI X Premium plan will offer a technical advisor service, we need a Support Engineer to help deliver it. + +## About the role + +### Why this is interesting + +You will be a key member of the Developer Experience's team and will directly impact customer satisfaction and success. +You will troubleshoot complex issues related to MUI. +At MUI a Support Engineer is as considered as a Developer, it's a person that enjoys optimizing what already exists more than working on new shiny features. + +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. + +### What you'll do on a day-to-day basis + +You will own the following responsibilities: + +- **Build product knowledge**. You will continually research and learn the current and future best practices of using MUI. +- **Resolve users' issues**. You will solve these issues at two levels: + - On the surface, you will answer developers on GitHub, Zendesk, Twitter, email, Slack. + - At the root, you will create/update the documentation, fix bugs in collaboration with the relevant developer, and more. +- **Provide feedback**. You will work alongside product managers to define and shape the product goals, roadmap, priorities, and strategy based on your frontline knowledge of customer needs. +- **Operations**. + - You will establish key support metrics and identify how best to measure them. + - You will establish workflow to reduce 'time to response' and 'time to fix' that can scale to multiple team members. + - You will identify where internal tooling might be developed or obtained to improve support efficiency. + +For the right candidate: + +- Working with the Leadership to construct and execute on a hiring plan to grow the support team. + +Depending on the day, you'll: + +- **You'll be interacting with the users** on a regular basis, handling inbound support and feature requests (every developer helps with developer requests). +- **Reduce friction**. + A large amount of the work on MUI is reducing friction and making it easier to use. + This might involve careful API design, identifying and fixing top bugs, creating easier to understand error messages, and writing documentation and blog posts about features you ship. +- **Collaborate with the community**. + Many small as well as meaningful fixes and features have been contributed by the community. Your role is to draw the best out of the community — to inspire those across the world to create and contribute through your reviews of their issues and pull requests. +- **Experiment and play**. Great, unexpected features and heisenbug fixes have come from a number of sources — relentlessly methodical processes of elimination, free-flowing team collaboration, inspiration by adjacent libraries and projects, and difficult-to-explain individual strokes of brilliance. Whatever your preferred style is for creating new things that others might not have thought of, you'll find a welcome home on the team. +- **Ship. Early and often**. You'll iterate and ship frequently. + You'll have a real impact on the end-user experience and you'll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible. + +## About you + +We're looking for someone with strong front-end skills. More important than specific technical skills though is that you're a strong problem solver who loves to learn. Details matter to you. + +### Skills you should have + +- **Expertise in the modern JavaScript ecosystem**. + MUI is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, webpack, and Babel. +- **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team. +- **Strong written and verbal communication skills**. + As part of the team, you'll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources. +- **Ability to dive into complex problems**. + You should be able to quickly assess, understand, and iterate upon aspects of our codebase. +- **Ready and willing to ask and answer questions**. + If you're comfortable saying you're unsure, asking for help; but equally reaching out to assist others, you'll be an incredible addition to our team. We thrive because of continuous learning. First-time mistakes should be celebrated, not blamed. +- **Avoid monolithic deliverables**. + You scope and stage your work into well-defined milestones to ship. +- **Past work with front-end infrastructure**. + Perhaps you've created your company's design system, written a Babel plugin, or written complex React components. + It would be great if you could address this in your cover letter! + +### What it would be nice if you had, but isn't required + +- **You've contributed to a design system before**. + You have worked on enterprise components in the past, maybe for internal use in your company. + You have built complex and advanced features while making sure the accessibility was fully functional. +- **You've maintained an active repository before**. + Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams. + Previous experience with highly active repository workflows is a definite plus for this role. +- **You have contributed code to MUI before**. A history of contributing to MUI would be a definite plus. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Support%20Engineer%20-%20X) diff --git a/docs/src/pages/company/careers/technical-product-manager.md b/docs/src/pages/company/careers/technical-product-manager.md index 9d2b05e56f4e95..5048ee0ff273e5 100644 --- a/docs/src/pages/company/careers/technical-product-manager.md +++ b/docs/src/pages/company/careers/technical-product-manager.md @@ -4,17 +4,28 @@ ## Details of the Role -- Location: Remote (preference for UTC-5 to UTC+4). -- Type of work: Full-time (contractor or employee [depending on the case](https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) - Start date: Immediately. - We're a remote company, we prefer asynchronous communication over meetings. - We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. -## About us +## About the company -See the [careers](/careers/) and [about us](/about/) pages. +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. -### Why we're hiring +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring Both our open-source community and our premium products are growing fast (x2-3 YoY). We need talented people to keep that going! @@ -23,19 +34,19 @@ The advanced components team (X) needs help to build its best features. We have started with the [data grid](/components/data-grid/) a year ago, but it's the beginning. Our users are continuously providing feedback on the most important [pains they face](https://github.com/mui-org/material-ui-x/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc). +## About the role + ### Why this is interesting -Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use MUI every month. +Our solution empowers React developers to build awesome applications – hundreds of thousands of developers use MUI every month. We are the second most used UI library in the world, after Bootstrap. Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve. -## About the role - -You will be joining the advanced components team. - ### What you'll do on a day-to-day basis +Depending on the day, you'll: + - You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem. This involves growing a deep understanding of our technical choices and constraints. - If time allows you to, you will assist the engineering team and implement some of the items in the backlog, up to part-time. @@ -58,10 +69,12 @@ You will be joining the advanced components team. - Experience building developer tools. - Experience working with open-source and having interacted with open-source communities. -## Compensation +## Benefits & Compensation -Competitive compensation of up to \$140,000 USD/year, depending on the profile and location. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/careers/#perks-amp-benefits) page. +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. -## Apply +## How to apply? -[Apply for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager) diff --git a/docs/src/pages/components/accordion/accordion-pt.md b/docs/src/pages/components/accordion/accordion-pt.md index ef01d513f28831..be9380a89f6cca 100644 --- a/docs/src/pages/components/accordion/accordion-pt.md +++ b/docs/src/pages/components/accordion/accordion-pt.md @@ -40,7 +40,7 @@ O conteúdo dos acordeões é montado por padrão, mesmo que o acordeão não es ``` -Como acontece com qualquer otimização de desempenho, isso não é uma bala de prata. Certifique-se de identificar gargalos primeiro e, em seguida, experimente essas estratégias de otimização. +Como acontece com qualquer otimização de desempenho, isso não é uma bala de prata. Be sure to identify bottlenecks first and then try out these optimization strategies. ## Acessibilidade diff --git a/docs/src/pages/components/accordion/accordion-zh.md b/docs/src/pages/components/accordion/accordion-zh.md index 4c214b481ae298..384c175001047c 100644 --- a/docs/src/pages/components/accordion/accordion-zh.md +++ b/docs/src/pages/components/accordion/accordion-zh.md @@ -40,7 +40,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ``` -不过对所有情况下的性能优化，这并不是灵丹妙药。 请您务必先确定性能的瓶颈所在，再考虑这些优化策略。 +不过对所有情况下的性能优化，这并不是灵丹妙药。 Be sure to identify bottlenecks first and then try out these optimization strategies. ## 无障碍设计 diff --git a/docs/src/pages/components/accordion/accordion.md b/docs/src/pages/components/accordion/accordion.md index 74878be250d637..7829bb0ac58bfd 100644 --- a/docs/src/pages/components/accordion/accordion.md +++ b/docs/src/pages/components/accordion/accordion.md @@ -1,7 +1,7 @@ --- title: React Accordion component components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' +githubLabel: 'component: accordion' materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html waiAria: https://www.w3.org/TR/wai-aria-practices/#accordion --- diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index b59c031eae76a0..64f862cb2649ac 100644 --- a/docs/src/pages/components/alert/alert.md +++ b/docs/src/pages/components/alert/alert.md @@ -1,7 +1,7 @@ --- title: React Alert component components: Alert, AlertTitle -githubLabel: 'component: Alert' +githubLabel: 'component: alert' waiAria: https://www.w3.org/TR/wai-aria-practices/#alert --- diff --git a/docs/src/pages/components/app-bar/ResponsiveAppBar.js b/docs/src/pages/components/app-bar/ResponsiveAppBar.js index 5edfb52215360e..4a405a9262c0c7 100644 --- a/docs/src/pages/components/app-bar/ResponsiveAppBar.js +++ b/docs/src/pages/components/app-bar/ResponsiveAppBar.js @@ -126,7 +126,7 @@ const ResponsiveAppBar = () => { onClose={handleCloseUserMenu} > {settings.map((setting) => ( - + {setting} ))} diff --git a/docs/src/pages/components/app-bar/ResponsiveAppBar.tsx b/docs/src/pages/components/app-bar/ResponsiveAppBar.tsx index a023734b1e09c9..103bff5e747bf8 100644 --- a/docs/src/pages/components/app-bar/ResponsiveAppBar.tsx +++ b/docs/src/pages/components/app-bar/ResponsiveAppBar.tsx @@ -126,7 +126,7 @@ const ResponsiveAppBar = () => { onClose={handleCloseUserMenu} > {settings.map((setting) => ( - + {setting} ))} diff --git a/docs/src/pages/components/app-bar/app-bar-pt.md b/docs/src/pages/components/app-bar/app-bar-pt.md index b0d2e374d176c1..a64870d7af28e6 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -1,7 +1,7 @@ --- title: Componente Barra de Aplicativos para React components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' +githubLabel: 'component: app bar' materialDesign: https://material.io/components/app-bars-top --- diff --git a/docs/src/pages/components/app-bar/app-bar-zh.md b/docs/src/pages/components/app-bar/app-bar-zh.md index f901e352a210c8..e9f36963ac7da5 100644 --- a/docs/src/pages/components/app-bar/app-bar-zh.md +++ b/docs/src/pages/components/app-bar/app-bar-zh.md @@ -1,7 +1,7 @@ --- title: React App Bar（应用栏）组件 components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' +githubLabel: 'component: app bar' materialDesign: https://material.io/components/app-bars-top --- diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md index a7a166f82cf55f..82a8f808589275 100644 --- a/docs/src/pages/components/app-bar/app-bar.md +++ b/docs/src/pages/components/app-bar/app-bar.md @@ -1,7 +1,7 @@ --- title: App Bar React component components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' +githubLabel: 'component: app bar' materialDesign: https://material.io/components/app-bars-top --- diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js index 9c9ec2d85d0351..4d9029a1e77385 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.js +++ b/docs/src/pages/components/autocomplete/GoogleMaps.js @@ -8,6 +8,10 @@ import Typography from '@mui/material/Typography'; import parse from 'autosuggest-highlight/parse'; import throttle from 'lodash/throttle'; +// This key was created specifically for the demo in mui.com. +// You need to create a new one for your application. +const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE'; + function loadScript(src, position, id) { if (!position) { return; @@ -31,7 +35,7 @@ export default function GoogleMaps() { if (typeof window !== 'undefined' && !loaded.current) { if (!document.querySelector('#google-maps')) { loadScript( - 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBwRp1e12ec1vOTtGiA4fcCt2sCUS78UYc&libraries=places', + `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`, document.querySelector('head'), 'google-maps', ); diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx index 3a695ae42e057e..900033cb7fce18 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx +++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx @@ -8,6 +8,10 @@ import Typography from '@mui/material/Typography'; import parse from 'autosuggest-highlight/parse'; import throttle from 'lodash/throttle'; +// This key was created specifically for the demo in mui.com. +// You need to create a new one for your application. +const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE'; + function loadScript(src: string, position: HTMLElement | null, id: string) { if (!position) { return; @@ -45,7 +49,7 @@ export default function GoogleMaps() { if (typeof window !== 'undefined' && !loaded.current) { if (!document.querySelector('#google-maps')) { loadScript( - 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBwRp1e12ec1vOTtGiA4fcCt2sCUS78UYc&libraries=places', + `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`, document.querySelector('head'), 'google-maps', ); diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 50735b518e3d04..5509feea5b03af 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -148,6 +148,15 @@ export default function Playground() { )} /> + ( + + )} + /> ); } diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx index 1dbe59238e65e8..c2b906f58bb091 100644 --- a/docs/src/pages/components/autocomplete/Playground.tsx +++ b/docs/src/pages/components/autocomplete/Playground.tsx @@ -146,6 +146,15 @@ export default function Playground() { )} /> + ( + + )} + /> ); } diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index 6ee6415533cf55..4e1de13f5d346e 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/docs/src/pages/components/autocomplete/Tags.js @@ -57,6 +57,16 @@ export default function Tags() { /> )} /> + option.title)} + defaultValue={[top100Films[12].title, top100Films[13].title]} + readOnly + renderInput={(params) => ( + + )} + /> ); } diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx index a55faa1adaafcd..3b3f7784ce79eb 100644 --- a/docs/src/pages/components/autocomplete/Tags.tsx +++ b/docs/src/pages/components/autocomplete/Tags.tsx @@ -57,6 +57,16 @@ export default function Tags() { /> )} /> + option.title)} + defaultValue={[top100Films[12].title, top100Films[13].title]} + readOnly + renderInput={(params) => ( + + )} + /> ); } diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md index f08705f20397eb..833201adc0c5ba 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Autocompletar components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' +githubLabel: 'component: autocomplete' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' --- diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index 783b24ade3e5eb..8d6cd8e81687a1 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -1,7 +1,7 @@ --- title: React Autocomplete（自动补全）组件 components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' +githubLabel: 'component: autocomplete' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' --- diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index caebbe6f523d76..c2cc2b80a6c35a 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -1,7 +1,7 @@ --- title: React Autocomplete component components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' +githubLabel: 'component: autocomplete' waiAria: https://www.w3.org/TR/wai-aria-practices/#combobox --- @@ -89,7 +89,7 @@ If you intend to use this mode for a [combo box](#combo-box) like experience (an - `selectOnFocus` to help the user clear the selected value. - `clearOnBlur` to help the user enter a new value. - `handleHomeEndKeys` to move focus inside the popup with the Home and End keys. -- A last option, for instance `Add "YOUR SEARCH"`. +- A last option, for instance: `Add "YOUR SEARCH"`. {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} @@ -101,7 +101,7 @@ You could also display a dialog when the user wants to add a new value. You can group the options with the `groupBy` prop. If you do so, make sure that the options are also sorted with the same dimension that they are grouped by, -otherwise you will notice duplicate headers. +otherwise, you will notice duplicate headers. {{"demo": "pages/components/autocomplete/Grouped.js"}} @@ -164,12 +164,11 @@ overriding the `filterOptions` prop: ### Google Maps place A customized UI for Google Maps Places Autocomplete. +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/overview) and [Google Places](https://developers.google.com/maps/documentation/places/web-service/overview) API. {{"demo": "pages/components/autocomplete/GoogleMaps.js"}} -For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. - -> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. +> ⚠️ Before you can start using the Google Maps JavaScript API and Places API, you must sign up and create a billing account. ## Multiple values @@ -179,7 +178,7 @@ Also known as tags, the user is allowed to enter more than one value. ### Fixed options -In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. +In the event that you need to lock certain tags so that they can't be removed, you can set the chips disabled. {{"demo": "pages/components/autocomplete/FixedTags.js"}} @@ -211,7 +210,7 @@ Pay specific attention to the `ref` and `inputProps` keys. ### GitHub's picker -This demo reproduces the GitHub's label picker: +This demo reproduces GitHub's label picker: {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -225,7 +224,7 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko ## Custom filter -The component exposes a factory to create a filter method that can provided to the `filterOptions` prop. +The component exposes a factory to create a filter method that can be provided to the `filterOptions` prop. You can use it to change the default option filter behavior. ```js diff --git a/docs/src/pages/components/avatars/avatars-pt.md b/docs/src/pages/components/avatars/avatars-pt.md index ccbbb7eb881615..070d1c134a7a6c 100644 --- a/docs/src/pages/components/avatars/avatars-pt.md +++ b/docs/src/pages/components/avatars/avatars-pt.md @@ -1,7 +1,7 @@ --- title: Componente para Avatares components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' +githubLabel: 'component: avatar' --- # Avatar diff --git a/docs/src/pages/components/avatars/avatars-zh.md b/docs/src/pages/components/avatars/avatars-zh.md index ce15e26afe0f23..4d21fd85f442b1 100644 --- a/docs/src/pages/components/avatars/avatars-zh.md +++ b/docs/src/pages/components/avatars/avatars-zh.md @@ -1,7 +1,7 @@ --- title: React Avatar（头像）组件 components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' +githubLabel: 'component: avatar' --- # Avatar 头像组件 @@ -22,7 +22,7 @@ githubLabel: 'component: Avatar' {{"demo": "pages/components/avatars/LetterAvatars.js"}} -您可以为头像使用不同的背景颜色。 下面的演示根据人的姓名生成颜色。 +你可以为头像添加不同的背景颜色 下面的例子演示了如何通过人物的姓名来展示头像 {{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} @@ -38,7 +38,7 @@ githubLabel: 'component: Avatar' {{"demo": "pages/components/avatars/IconAvatars.js"}} -## 变体 +## 其他的方式 如果你需要矩形或圆角的头像组件，请使用 `variant`属性。 diff --git a/docs/src/pages/components/avatars/avatars.md b/docs/src/pages/components/avatars/avatars.md index 8a6ec44a3cb4b3..0a9bfb38654d2a 100644 --- a/docs/src/pages/components/avatars/avatars.md +++ b/docs/src/pages/components/avatars/avatars.md @@ -1,7 +1,7 @@ --- title: React Avatar component components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' +githubLabel: 'component: avatar' --- # Avatar diff --git a/docs/src/pages/components/backdrop/backdrop-pt.md b/docs/src/pages/components/backdrop/backdrop-pt.md index d47de0450543a0..c4270d687cd835 100644 --- a/docs/src/pages/components/backdrop/backdrop-pt.md +++ b/docs/src/pages/components/backdrop/backdrop-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Pano de Fundo components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' +githubLabel: 'component: backdrop' --- # Backdrop diff --git a/docs/src/pages/components/backdrop/backdrop.md b/docs/src/pages/components/backdrop/backdrop.md index 2c2d98817b56b3..13fbf288e6ba23 100644 --- a/docs/src/pages/components/backdrop/backdrop.md +++ b/docs/src/pages/components/backdrop/backdrop.md @@ -1,7 +1,7 @@ --- title: Backdrop React Component components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' +githubLabel: 'component: backdrop' --- # Backdrop diff --git a/docs/src/pages/components/badges/badges-pt.md b/docs/src/pages/components/badges/badges-pt.md index 6f2ea55d56b869..781e2bf536b919 100644 --- a/docs/src/pages/components/badges/badges-pt.md +++ b/docs/src/pages/components/badges/badges-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para emblemas components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' +githubLabel: 'component: badge' --- # Emblema diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md index c5349664ac9f87..56cba07cf0b700 100644 --- a/docs/src/pages/components/badges/badges-zh.md +++ b/docs/src/pages/components/badges/badges-zh.md @@ -1,7 +1,7 @@ --- title: React Badge（徽章）组件 components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' +githubLabel: 'component: badge' --- # Badge 徽章 diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md index 6dcaf1f9d7ea96..766fc046026f7a 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -1,7 +1,7 @@ --- title: React Badge component components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' +githubLabel: 'component: badge' --- # Badge diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md index c7190b79cc5c76..67a02d4a33da8c 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Navegação inferior components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' +githubLabel: 'component: bottom navigation' materialDesign: https://material.io/components/bottom-navigation --- diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md index 93569caf7e3481..69e34d085ea181 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md @@ -1,7 +1,7 @@ --- title: React Bottom Navigation（底部导航栏）组件 components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' +githubLabel: 'component: bottom navigation' materialDesign: https://material.io/components/bottom-navigation --- diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation.md b/docs/src/pages/components/bottom-navigation/bottom-navigation.md index 2cc126a53cff56..ebd0ad0bd782d9 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation.md @@ -1,7 +1,7 @@ --- title: Bottom Navigation React component components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' +githubLabel: 'component: bottom navigation' materialDesign: https://material.io/components/bottom-navigation --- diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md index cd995f85ce0d0e..a56d6f5e605601 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md @@ -1,13 +1,13 @@ --- title: Componente React para Navegação estrutural components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' +githubLabel: 'component: breadcrumbs' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' --- # Navegação estrutural -

    Navegação estrutural permite aos usuários fazer seleções em um intervalo de caminhos.

    +

    Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

    {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md index 1d6021ae1b3fa2..c056bb1c5f713d 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md @@ -1,13 +1,13 @@ --- title: React Breadcrumbs（面包屑导航）组件 components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' +githubLabel: 'component: breadcrumbs' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' --- # Breadcrumbs 面包屑导航 -

    面包屑导航允许用户在一系列的值中进行选择。

    +

    Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

    {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs.md b/docs/src/pages/components/breadcrumbs/breadcrumbs.md index d76bd30f2542d3..5bc1a16186c0c8 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs.md @@ -1,7 +1,7 @@ --- title: React Breadcrumbs component components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' +githubLabel: 'component: breadcrumbs' waiAria: https://www.w3.org/TR/wai-aria-practices/#breadcrumb --- diff --git a/docs/src/pages/components/buttons/UnstyledButtonCustom.js b/docs/src/pages/components/buttons/UnstyledButtonCustom.js index 2e3d15f6e323c2..3044a6a7a3893a 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonCustom.js +++ b/docs/src/pages/components/buttons/UnstyledButtonCustom.js @@ -21,23 +21,24 @@ ButtonRoot.propTypes = { children: PropTypes.node, }; +const blue = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 800: '#004C99', + 900: '#003A75', +}; + const CustomButtonRoot = styled(ButtonRoot)( ({ theme }) => ` overflow: visible; cursor: pointer; - --main-color: ${ - theme.palette.mode === 'light' ? 'rgb(25,118,210)' : 'rgb(144,202,249)' - }; - --hover-color: ${ - theme.palette.mode === 'light' - ? 'rgba(25,118,210,0.04)' - : 'rgba(144,202,249,0.08)' - }; - --active-color: ${ - theme.palette.mode === 'light' - ? 'rgba(25,118,210,0.12)' - : 'rgba(144,202,249,0.24)' - }; + --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[100]}; + --hover-color: ${theme.palette.mode === 'light' ? blue[50] : blue[900]}; + --active-color: ${theme.palette.mode === 'light' ? blue[100] : blue[800]}; & polygon { fill: transparent; @@ -47,7 +48,7 @@ const CustomButtonRoot = styled(ButtonRoot)( & .bg { stroke: var(--main-color); - stroke-width: 0.5; + stroke-width: 1; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1)); fill: transparent; } @@ -73,7 +74,8 @@ const CustomButtonRoot = styled(ButtonRoot)( &:focus, &.${buttonUnstyledClasses.focusVisible} { - outline: none; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${buttonUnstyledClasses.active} { @@ -87,9 +89,10 @@ const CustomButtonRoot = styled(ButtonRoot)( pointer-events: none; & .content { - font-family: Helvetica, Inter, Arial, sans-serif; - font-size: 14px; - font-weight: 200; + font-size: 0.875rem; + font-family: IBM Plex Sans, sans-serif; + font-weight: 500; + line-height: 1.5; height: 100%; display: flex; align-items: center; diff --git a/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx b/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx index 5c127927de175b..de5113dd3bc9f7 100644 --- a/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx +++ b/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx @@ -22,23 +22,24 @@ const ButtonRoot = React.forwardRef(function ButtonRoot( ); }); +const blue = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#99CCF3', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 800: '#004C99', + 900: '#003A75', +}; + const CustomButtonRoot = styled(ButtonRoot)( ({ theme }: { theme: Theme }) => ` overflow: visible; cursor: pointer; - --main-color: ${ - theme.palette.mode === 'light' ? 'rgb(25,118,210)' : 'rgb(144,202,249)' - }; - --hover-color: ${ - theme.palette.mode === 'light' - ? 'rgba(25,118,210,0.04)' - : 'rgba(144,202,249,0.08)' - }; - --active-color: ${ - theme.palette.mode === 'light' - ? 'rgba(25,118,210,0.12)' - : 'rgba(144,202,249,0.24)' - }; + --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[100]}; + --hover-color: ${theme.palette.mode === 'light' ? blue[50] : blue[900]}; + --active-color: ${theme.palette.mode === 'light' ? blue[100] : blue[800]}; & polygon { fill: transparent; @@ -48,7 +49,7 @@ const CustomButtonRoot = styled(ButtonRoot)( & .bg { stroke: var(--main-color); - stroke-width: 0.5; + stroke-width: 1; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1)); fill: transparent; } @@ -74,7 +75,8 @@ const CustomButtonRoot = styled(ButtonRoot)( &:focus, &.${buttonUnstyledClasses.focusVisible} { - outline: none; + outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } &.${buttonUnstyledClasses.active} { @@ -88,9 +90,10 @@ const CustomButtonRoot = styled(ButtonRoot)( pointer-events: none; & .content { - font-family: Helvetica, Inter, Arial, sans-serif; - font-size: 14px; - font-weight: 200; + font-size: 0.875rem; + font-family: IBM Plex Sans, sans-serif; + font-weight: 500; + line-height: 1.5; height: 100%; display: flex; align-items: center; diff --git a/docs/src/pages/components/buttons/UseButton.js b/docs/src/pages/components/buttons/UseButton.js index 00de302128b76b..0f61cdb38d7411 100644 --- a/docs/src/pages/components/buttons/UseButton.js +++ b/docs/src/pages/components/buttons/UseButton.js @@ -5,25 +5,30 @@ import Stack from '@mui/material/Stack'; import { useButton } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('button')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.active { - background-color: #004386; + background-color: ${blue[700]}; } &.focusVisible { @@ -34,7 +39,6 @@ const CustomButtonRoot = styled('button')` &.disabled { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/buttons/UseButton.tsx b/docs/src/pages/components/buttons/UseButton.tsx index 04b5bfa09e7b25..4c47a24862af62 100644 --- a/docs/src/pages/components/buttons/UseButton.tsx +++ b/docs/src/pages/components/buttons/UseButton.tsx @@ -4,25 +4,30 @@ import Stack from '@mui/material/Stack'; import { ButtonUnstyledProps, useButton } from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; +const blue = { + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + const CustomButtonRoot = styled('button')` - background-color: #007fff; - padding: 15px 20px; - border-radius: 10px; - color: #fff; - font-weight: 600; - font-family: Helvetica, Arial, sans-serif; - font-size: 14px; - transition: all 200ms ease; + font-family: IBM Plex Sans, sans-serif; + font-weight: bold; + font-size: 0.875rem; + background-color: ${blue[500]}; + padding: 12px 24px; + border-radius: 8px; + color: white; + transition: all 150ms ease; cursor: pointer; - box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0); border: none; &:hover { - background-color: #0059b2; + background-color: ${blue[600]}; } &.active { - background-color: #004386; + background-color: ${blue[700]}; } &.focusVisible { @@ -33,7 +38,6 @@ const CustomButtonRoot = styled('button')` &.disabled { opacity: 0.5; cursor: not-allowed; - box-shadow: 0 0 0 0 rgba(0, 127, 255, 0); } `; diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index aa8f877d19d734..1cc16f29cea1e2 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -2,7 +2,7 @@ title: Componente React para Botão components: Button, IconButton, ButtonBase materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' +githubLabel: 'component: button' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' --- diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index 654477cea9a993..1ad538abf9e108 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -2,7 +2,7 @@ title: React Button（按钮）组件 components: Button, IconButton, ButtonBase, LoadingButton materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' +githubLabel: 'component: button' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' --- diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index ec584a8193947a..d13dd4d720c374 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -2,7 +2,7 @@ title: React Button component components: Button, IconButton, ButtonBase, LoadingButton, ButtonUnstyled materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' +githubLabel: 'component: button' waiAria: https://www.w3.org/TR/wai-aria-practices/#button --- diff --git a/docs/src/pages/components/cards/cards-pt.md b/docs/src/pages/components/cards/cards-pt.md index fa5c189bc9905f..01bf77fd83269f 100644 --- a/docs/src/pages/components/cards/cards-pt.md +++ b/docs/src/pages/components/cards/cards-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Cartão components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' +githubLabel: 'component: card' materialDesign: https://material.io/components/cards --- diff --git a/docs/src/pages/components/cards/cards-zh.md b/docs/src/pages/components/cards/cards-zh.md index 574c87ceb9848e..77c087ca2b5b44 100644 --- a/docs/src/pages/components/cards/cards-zh.md +++ b/docs/src/pages/components/cards/cards-zh.md @@ -1,7 +1,7 @@ --- title: React Card（卡片）组件 components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' +githubLabel: 'component: card' materialDesign: https://material.io/components/cards --- diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md index 265be563eee089..6946200b4be333 100644 --- a/docs/src/pages/components/cards/cards.md +++ b/docs/src/pages/components/cards/cards.md @@ -1,7 +1,7 @@ --- title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' +githubLabel: 'component: card' materialDesign: https://material.io/components/cards --- diff --git a/docs/src/pages/components/checkboxes/checkboxes-pt.md b/docs/src/pages/components/checkboxes/checkboxes-pt.md index 84f01a56de7283..203ccb02860439 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-pt.md +++ b/docs/src/pages/components/checkboxes/checkboxes-pt.md @@ -2,7 +2,7 @@ title: Componente React para Caixa de seleção components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel materialDesign: 'https://material.io/components/selection-controls#checkboxes' -githubLabel: 'component: Checkbox' +githubLabel: 'component: checkbox' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#checkbox' --- diff --git a/docs/src/pages/components/checkboxes/checkboxes-zh.md b/docs/src/pages/components/checkboxes/checkboxes-zh.md index 1c61cf8ec7e1a4..7eeceab40d0eb7 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-zh.md +++ b/docs/src/pages/components/checkboxes/checkboxes-zh.md @@ -2,7 +2,7 @@ title: React Checkbox（选择框）组件 components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel materialDesign: 'https://material.io/components/selection-controls#checkboxes' -githubLabel: 'component: Checkbox' +githubLabel: 'component: checkbox' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#checkbox' --- diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md index 0db569a4374070..e2532da8b5fdbd 100644 --- a/docs/src/pages/components/checkboxes/checkboxes.md +++ b/docs/src/pages/components/checkboxes/checkboxes.md @@ -2,7 +2,7 @@ title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel materialDesign: https://material.io/components/selection-controls#checkboxes -githubLabel: 'component: Checkbox' +githubLabel: 'component: checkbox' waiAria: https://www.w3.org/TR/wai-aria-practices/#checkbox --- diff --git a/docs/src/pages/components/chips/chips-pt.md b/docs/src/pages/components/chips/chips-pt.md index 319af54faebe47..cb6a2bb5b42f7f 100644 --- a/docs/src/pages/components/chips/chips-pt.md +++ b/docs/src/pages/components/chips/chips-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Chip components: Chip -githubLabel: 'component: Chip' +githubLabel: 'component: chip' materialDesign: https://material.io/components/chips --- diff --git a/docs/src/pages/components/chips/chips-zh.md b/docs/src/pages/components/chips/chips-zh.md index 7c71e4ad26f1ac..ff31e9f45f20bb 100644 --- a/docs/src/pages/components/chips/chips-zh.md +++ b/docs/src/pages/components/chips/chips-zh.md @@ -1,7 +1,7 @@ --- title: React Chip（纸片）组件 components: Chip -githubLabel: 'component: Chip' +githubLabel: 'component: chip' materialDesign: https://material.io/components/chips --- diff --git a/docs/src/pages/components/chips/chips.md b/docs/src/pages/components/chips/chips.md index 912680098b14cf..ed15cfeb47141f 100644 --- a/docs/src/pages/components/chips/chips.md +++ b/docs/src/pages/components/chips/chips.md @@ -1,7 +1,7 @@ --- title: React Chip component components: Chip -githubLabel: 'component: Chip' +githubLabel: 'component: chip' materialDesign: https://material.io/components/chips --- diff --git a/docs/src/pages/components/date-picker/date-picker-pt.md b/docs/src/pages/components/date-picker/date-picker-pt.md index 204daa9f677c14..3df71b155dcdb0 100644 --- a/docs/src/pages/components/date-picker/date-picker-pt.md +++ b/docs/src/pages/components/date-picker/date-picker-pt.md @@ -1,8 +1,8 @@ --- title: Componente React Seletor de data components: CalendarPicker, CalendarPickerSkeleton, DatePicker, DesktopDatePicker, MobileDatePicker, MonthPicker, PickersDay, StaticDatePicker, YearPicker -githubLabel: 'component: DatePicker' -packageName: '@material-ui/lab' +githubLabel: 'component: date picker' +packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-picker/date-picker-zh.md b/docs/src/pages/components/date-picker/date-picker-zh.md index 6fcc0fb6c4afac..865e4b8703274b 100644 --- a/docs/src/pages/components/date-picker/date-picker-zh.md +++ b/docs/src/pages/components/date-picker/date-picker-zh.md @@ -1,8 +1,8 @@ --- title: React Date Picker（日期选择器）组件 components: CalendarPicker, CalendarPickerSkeleton, DatePicker, DesktopDatePicker, MobileDatePicker, MonthPicker, PickersDay, StaticDatePicker, YearPicker -githubLabel: 'component: DatePicker' -packageName: '@material-ui/lab' +githubLabel: 'component: date picker' +packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-picker/date-picker.md b/docs/src/pages/components/date-picker/date-picker.md index c581cce6763394..1e0afaa3ada85f 100644 --- a/docs/src/pages/components/date-picker/date-picker.md +++ b/docs/src/pages/components/date-picker/date-picker.md @@ -1,7 +1,7 @@ --- title: React Date Picker component components: CalendarPicker, CalendarPickerSkeleton, DatePicker, DesktopDatePicker, MobileDatePicker, MonthPicker, PickersDay, StaticDatePicker, YearPicker -githubLabel: 'component: DatePicker' +githubLabel: 'component: date picker' packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-range-picker/date-range-picker-pt.md b/docs/src/pages/components/date-range-picker/date-range-picker-pt.md index d0a278424b798b..9927ff7fc0c425 100644 --- a/docs/src/pages/components/date-range-picker/date-range-picker-pt.md +++ b/docs/src/pages/components/date-range-picker/date-range-picker-pt.md @@ -1,16 +1,16 @@ --- title: Componente React Seletor intervalo de data components: DateRangePicker, DateRangePickerDay, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker -githubLabel: 'component: DateRangePicker' -packageName: '@material-ui/lab' +githubLabel: 'component: date range picker' +packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- -# Seletor de intervalo de data [⚡️](https://material-ui.com/store/items/material-ui-pro/) +# Date Range Picker [⚡️](https://mui.com/store/items/material-ui-pro/)

    Seletores de data permitem ao usuário selecionar um intervalo de datas.

    -> ⚠️ Pro component

    The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

    Esta extensão paga incluirá mais componentes avançados (um data grid rico, seletor de intervalo de data, arrastar & soltar na visualização em árvore, etc.). [Acesso antecipado](https://material-ui.com/store/items/material-ui-pro/) começa com um preço acessível. +> ⚠️ Pro component

    The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

    Esta extensão paga incluirá mais componentes avançados (um data grid rico, seletor de intervalo de data, arrastar & soltar na visualização em árvore, etc.). [Early access](https://mui.com/store/items/material-ui-pro/) starts at an affordable price. Os seletores de intervalo de datas permitem que o usuário selecione um intervalo de datas. diff --git a/docs/src/pages/components/date-range-picker/date-range-picker-zh.md b/docs/src/pages/components/date-range-picker/date-range-picker-zh.md index 5211bb5a76dc78..baf18260b93b65 100644 --- a/docs/src/pages/components/date-range-picker/date-range-picker-zh.md +++ b/docs/src/pages/components/date-range-picker/date-range-picker-zh.md @@ -1,16 +1,21 @@ --- title: React Date Range Picker（日期范围选择器）组件 components: DateRangePicker, DateRangePickerDay, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker +<<<<<<< HEAD githubLabel: 'component: DateRangePicker' packageName: '@material-ui/lab' +======= +githubLabel: 'component: date range picker' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/date-pickers --- -# Date Range Picker [⚡️](https://material-ui.com/store/items/material-ui-pro/) 日期范围选择器 +# Date Range Picker [⚡️](https://mui.com/store/items/material-ui-pro/)

    日期选择器让用户选择一系列的日期。

    -> ⚠️ Pro component

    The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

    该付费扩展将包括更高级的组件（大数据栅格，时间范围选择器，可拖动的树形视图 & 拖放组件等等）。

    该付费扩展将包括更高级的组件（大数据栅格，时间范围选择器，可拖动的树形视图 & 拖放组件等等）。 你现在可以以实惠的价格 [提前使用](https://material-ui.com/store/items/material-ui-pro/)。 +> ⚠️ Pro component

    The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

    该付费扩展将包括更高级的组件（大数据栅格，时间范围选择器，可拖动的树形视图 & 拖放组件等等）。

    该付费扩展将包括更高级的组件（大数据栅格，时间范围选择器，可拖动的树形视图 & 拖放组件等等）。 [Early access](https://mui.com/store/items/material-ui-pro/) starts at an affordable price. 日期范围选择器让用户选择一个日期范围。 diff --git a/docs/src/pages/components/date-range-picker/date-range-picker.md b/docs/src/pages/components/date-range-picker/date-range-picker.md index 8f51f4f08b2b07..5bfc254ee94a93 100644 --- a/docs/src/pages/components/date-range-picker/date-range-picker.md +++ b/docs/src/pages/components/date-range-picker/date-range-picker.md @@ -1,7 +1,7 @@ --- title: React Date Range Picker component components: DateRangePicker, DateRangePickerDay, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker -githubLabel: 'component: DateRangePicker' +githubLabel: 'component: date range picker' packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-time-picker/date-time-picker-pt.md b/docs/src/pages/components/date-time-picker/date-time-picker-pt.md index 4762bc36146bf1..e50d6c83d2a0cb 100644 --- a/docs/src/pages/components/date-time-picker/date-time-picker-pt.md +++ b/docs/src/pages/components/date-time-picker/date-time-picker-pt.md @@ -1,8 +1,13 @@ --- title: Componente React Seletor de data e hora components: DateTimePicker,DesktopDateTimePicker,MobileDateTimePicker,StaticDateTimePicker +<<<<<<< HEAD githubLabel: 'component: DateTimePicker' packageName: '@material-ui/lab' +======= +githubLabel: 'component: date time picker' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-time-picker/date-time-picker-zh.md b/docs/src/pages/components/date-time-picker/date-time-picker-zh.md index 22cce99302e6ce..798ad5e81118f3 100644 --- a/docs/src/pages/components/date-time-picker/date-time-picker-zh.md +++ b/docs/src/pages/components/date-time-picker/date-time-picker-zh.md @@ -1,8 +1,13 @@ --- title: React Date Time Picker（日期时间选择器） 组件 components: DateTimePicker,DesktopDateTimePicker,MobileDateTimePicker,StaticDateTimePicker +<<<<<<< HEAD githubLabel: 'component: DateTimePicker' packageName: '@material-ui/lab' +======= +githubLabel: 'component: date time picker' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/date-time-picker/date-time-picker.md b/docs/src/pages/components/date-time-picker/date-time-picker.md index 135a26f6dd4599..12d6e74d718501 100644 --- a/docs/src/pages/components/date-time-picker/date-time-picker.md +++ b/docs/src/pages/components/date-time-picker/date-time-picker.md @@ -1,7 +1,7 @@ --- title: React Date Time Picker component components: DateTimePicker,DesktopDateTimePicker,MobileDateTimePicker,StaticDateTimePicker -githubLabel: 'component: DateTimePicker' +githubLabel: 'component: date time picker' packageName: '@mui/lab' materialDesign: https://material.io/components/date-pickers --- diff --git a/docs/src/pages/components/dialogs/dialogs-pt.md b/docs/src/pages/components/dialogs/dialogs-pt.md index 322ae3186c351a..067ace667cc631 100644 --- a/docs/src/pages/components/dialogs/dialogs-pt.md +++ b/docs/src/pages/components/dialogs/dialogs-pt.md @@ -1,7 +1,7 @@ --- title: Componente Diálogo para React components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide -githubLabel: 'component: Dialog' +githubLabel: 'component: dialog' materialDesign: https://material.io/components/dialogs waiAria: 'https://www.w3.org/TR/wai-aria-practices/#dialog_modal' --- diff --git a/docs/src/pages/components/dialogs/dialogs-zh.md b/docs/src/pages/components/dialogs/dialogs-zh.md index 7fc25d286be398..f79bd18f62f5a6 100644 --- a/docs/src/pages/components/dialogs/dialogs-zh.md +++ b/docs/src/pages/components/dialogs/dialogs-zh.md @@ -1,7 +1,7 @@ --- title: React Dialog（对话框）组件 components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide -githubLabel: 'component: Dialog' +githubLabel: 'component: dialog' materialDesign: https://material.io/components/dialogs waiAria: 'https://www.w3.org/TR/wai-aria-practices/#dialog_modal' --- diff --git a/docs/src/pages/components/dialogs/dialogs.md b/docs/src/pages/components/dialogs/dialogs.md index 2c1fd42ef5535a..179b35cb39e0ba 100644 --- a/docs/src/pages/components/dialogs/dialogs.md +++ b/docs/src/pages/components/dialogs/dialogs.md @@ -1,7 +1,7 @@ --- title: React Dialog component components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide -githubLabel: 'component: Dialog' +githubLabel: 'component: dialog' materialDesign: https://material.io/components/dialogs waiAria: https://www.w3.org/TR/wai-aria-practices/#dialog_modal --- diff --git a/docs/src/pages/components/dividers/dividers-pt.md b/docs/src/pages/components/dividers/dividers-pt.md index 486695007b518d..a225ac9ce9d03b 100644 --- a/docs/src/pages/components/dividers/dividers-pt.md +++ b/docs/src/pages/components/dividers/dividers-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Divisor components: Divider -githubLabel: 'component: Divider' +githubLabel: 'component: divider' materialDesign: https://material.io/components/dividers --- diff --git a/docs/src/pages/components/dividers/dividers-zh.md b/docs/src/pages/components/dividers/dividers-zh.md index c43c4140623cb8..2d87f7bf604412 100644 --- a/docs/src/pages/components/dividers/dividers-zh.md +++ b/docs/src/pages/components/dividers/dividers-zh.md @@ -1,7 +1,7 @@ --- title: React Divider（分隔线）组件 components: Divider -githubLabel: 'component: Divider' +githubLabel: 'component: divider' materialDesign: https://material.io/components/dividers --- diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md index f914c0e27e4095..447d3910db28ab 100644 --- a/docs/src/pages/components/dividers/dividers.md +++ b/docs/src/pages/components/dividers/dividers.md @@ -1,7 +1,7 @@ --- title: React Divider component components: Divider -githubLabel: 'component: Divider' +githubLabel: 'component: divider' materialDesign: https://material.io/components/dividers --- diff --git a/docs/src/pages/components/drawers/drawers-pt.md b/docs/src/pages/components/drawers/drawers-pt.md index a5685d361aee70..462942e37262eb 100644 --- a/docs/src/pages/components/drawers/drawers-pt.md +++ b/docs/src/pages/components/drawers/drawers-pt.md @@ -1,7 +1,7 @@ --- title: Componente Drawer para React components: Drawer, SwipeableDrawer -githubLabel: 'component: Drawer' +githubLabel: 'component: drawer' materialDesign: https://material.io/components/navigation-drawer --- diff --git a/docs/src/pages/components/drawers/drawers-zh.md b/docs/src/pages/components/drawers/drawers-zh.md index ad2c4c2fc22438..c7f6c4f3db38fd 100644 --- a/docs/src/pages/components/drawers/drawers-zh.md +++ b/docs/src/pages/components/drawers/drawers-zh.md @@ -1,7 +1,7 @@ --- title: React Drawer（抽屉）组件 components: Drawer, SwipeableDrawer -githubLabel: 'component: Drawer' +githubLabel: 'component: drawer' materialDesign: https://material.io/components/navigation-drawer --- diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md index 6a6ce78874152f..43bfe99c3fda9d 100644 --- a/docs/src/pages/components/drawers/drawers.md +++ b/docs/src/pages/components/drawers/drawers.md @@ -1,7 +1,7 @@ --- title: React Drawer component components: Drawer, SwipeableDrawer -githubLabel: 'component: Drawer' +githubLabel: 'component: drawer' materialDesign: https://material.io/components/navigation-drawer --- diff --git a/docs/src/pages/components/grid/grid-pt.md b/docs/src/pages/components/grid/grid-pt.md index 7c277849da060d..c1374f93938bbb 100644 --- a/docs/src/pages/components/grid/grid-pt.md +++ b/docs/src/pages/components/grid/grid-pt.md @@ -24,7 +24,7 @@ O sistema de grade é implementado com o componente `Grid`: - Larguras de itens são definidas em porcentagens, desse modo são sempre fluidas e dimensionadas de acordo os seus elementos pai. - Itens têm preenchimento para criar o espaçamento entre itens individuais. - Existem cinco pontos de quebra (breakpoints) na grade: xs, sm, md, lg e xl. -- Valores inteiros podem ser dados para cada ponto de quebra, indicando quantas das 12 colunas disponíveis são ocupadas pelo componente quando a largura da área de exibição satisfaz as [restrições de ponto de quebra](/customization/breakpoints/#default-breakpoints). +- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/customization/breakpoints/#default-breakpoints). Se você é **novo ou não está familiarizado com o flexbox**, nós recomendamos você a ler este [guia do Flexbox CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). diff --git a/docs/src/pages/components/grid/grid-zh.md b/docs/src/pages/components/grid/grid-zh.md index fb2d7184442bcf..6ea14339ed3a55 100644 --- a/docs/src/pages/components/grid/grid-zh.md +++ b/docs/src/pages/components/grid/grid-zh.md @@ -24,7 +24,7 @@ materialDesign: https://material.io/design/layout/understanding-layout.html - 每项的宽度是按百分比设置的，所以它们的大小总是相对于它们的父元素流动。 - 子项目（items）使用内边距来保持和其他块（items）的间距。 - 其中五个断点可供使用：xs，sm，md，lg 和 xl。 -- 你可以为每个断点提供整数值，表示当视口宽度满足 [断点约束](/customization/breakpoints/#default-breakpoints) 时，12 个可用列中有多少列被组件占用。 +- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/customization/breakpoints/#default-breakpoints). 若你对 **flexbox 不太熟悉**，我们建议你阅读 [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 手册。 diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md index a185410b870625..ed9f6957612a85 100644 --- a/docs/src/pages/components/grid/grid.md +++ b/docs/src/pages/components/grid/grid.md @@ -25,7 +25,7 @@ The grid system is implemented with the `Grid` component: - Item widths are set in percentages, so they're always fluid and sized relative to their parent element. - Items have padding to create the spacing between individual items. - There are five grid breakpoints: xs, sm, md, lg, and xl. -- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint contraints](/customization/breakpoints/#default-breakpoints). +- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/customization/breakpoints/#default-breakpoints). If you are **new to or unfamiliar with flexbox**, we encourage you to read this [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) guide. @@ -145,7 +145,7 @@ You can change the default number of columns (12) with the `columns` prop. The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors. For instance, to apply a background color, you need to apply `display: flex;` to the parent. -### white-space: nowrap; +### white-space: nowrap The initial setting on flex items is `min-width: auto`. It's causing a positioning conflict when the children is using `white-space: nowrap;`. diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md index c3fa90f5feb127..8e04a44204268f 100644 --- a/docs/src/pages/components/icons/icons-pt.md +++ b/docs/src/pages/components/icons/icons-pt.md @@ -93,7 +93,7 @@ tem o seguinte atributo assim que montado: Ele pode ser usado para encapsular um caminho SVG com um componente SvgIcon. Este componente estende o elemento nativo ``: - Ele vem internamente com a acessibilidade. -- Os elementos SVG devem ser dimensionados para uma visualização de 24x24px, de modo que o ícone resultante possa ser usado como está, ou incluído como filho para outros componentes de Material-UI que usam ícones. (Isso pode ser customizado com o atributo `viewBox`). +- Os elementos SVG devem ser dimensionados para uma visualização de 24x24px, de modo que o ícone resultante possa ser usado como está, ou incluído como filho para outros componentes de Material-UI que usam ícones. (This can be customized with the `viewBox` attribute, to inherit `viewBox` value from original image `inheritViewBox` attribute can be used). - Por padrão, o componente herda a cor atual. Opcionalmente, você pode aplicar uma das cores do tema usando a propriedade `color`. ```jsx diff --git a/docs/src/pages/components/icons/icons-zh.md b/docs/src/pages/components/icons/icons-zh.md index adf351a3941330..c522e4ce86dec3 100644 --- a/docs/src/pages/components/icons/icons-zh.md +++ b/docs/src/pages/components/icons/icons-zh.md @@ -93,7 +93,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; 如果你需要使用自定义的 SVG 图标（而它在 [Material Icons](/components/material-icons/) 中不存在），那么你可以使用 `SvgIcon` 封装。 此组件是原生 `` 元素的拓展版： - 它具备一些内置的无障碍设计。 -- SVG 元素应该在 24x24px 的视口中进行缩放，这样所渲染的图标就可以按原样使用，或者作为其他使用图标的 Material-UI 组件的子元素。 （使用 `viewBox` 属性，您可以随意自定义）。 +- SVG 元素应该在 24x24px 的视口中进行缩放，这样所渲染的图标就可以按原样使用，或者作为其他使用图标的 Material-UI 组件的子元素。 (This can be customized with the `viewBox` attribute, to inherit `viewBox` value from original image `inheritViewBox` attribute can be used). - 默认情况下，此组件会继承当前的颜色。 当然，通过 `color` 这个属性，你可以让图标使用主题里的颜色。 ```jsx diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md index 14fe4d7e3406ee..208926f87f5475 100644 --- a/docs/src/pages/components/icons/icons.md +++ b/docs/src/pages/components/icons/icons.md @@ -97,7 +97,9 @@ If you need a custom SVG icon (not available in the [Material Icons](/components This component extends the native `` element: - It comes with built-in accessibility. -- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons. (This can be customized with the `viewBox` attribute). +- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons. + This can be customized with the `viewBox` attribute. + To inherit the `viewBox` value from the original image, the `inheritViewBox` attribute can be used. - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop. ```jsx @@ -133,7 +135,7 @@ You can use the `SvgIcon` wrapper even if your icons are saved in the `.svg` for // --- import StarIcon from './star.svg'; - + ``` It's also possible to use it with "url-loader" or "file-loader". This is the approach used by Create React App. @@ -148,7 +150,7 @@ It's also possible to use it with "url-loader" or "file-loader". This is the app // --- import { ReactComponent as StarIcon } from './star.svg'; - + ``` ### createSvgIcon diff --git a/docs/src/pages/components/image-list/image-list-pt.md b/docs/src/pages/components/image-list/image-list-pt.md index 2d41843df06c62..78b31c36d8b977 100644 --- a/docs/src/pages/components/image-list/image-list-pt.md +++ b/docs/src/pages/components/image-list/image-list-pt.md @@ -2,7 +2,7 @@ title: Componente React para Lista de Imagem components: ImageList, ImageListItem, ImageListItemBar materialDesign: https://material.io/components/image-lists -githubLabel: 'component: ImageList' +githubLabel: 'component: image list' --- # Lista de imagem diff --git a/docs/src/pages/components/image-list/image-list-zh.md b/docs/src/pages/components/image-list/image-list-zh.md index 07b327a45d28b2..59337941ed5cf4 100644 --- a/docs/src/pages/components/image-list/image-list-zh.md +++ b/docs/src/pages/components/image-list/image-list-zh.md @@ -2,7 +2,7 @@ title: React Image list（图像列表）组件 components: ImageList, ImageListItem, ImageListItemBar materialDesign: https://material.io/components/image-lists -githubLabel: 'component: ImageList' +githubLabel: 'component: image list' --- # Image list 图像列表 diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md index 0a4ac495de4253..8fdba214a399ea 100644 --- a/docs/src/pages/components/image-list/image-list.md +++ b/docs/src/pages/components/image-list/image-list.md @@ -2,7 +2,7 @@ title: Image list React component components: ImageList, ImageListItem, ImageListItemBar materialDesign: https://material.io/components/image-lists -githubLabel: 'component: ImageList' +githubLabel: 'component: image list' --- # Image list diff --git a/docs/src/pages/components/links/links-pt.md b/docs/src/pages/components/links/links-pt.md index 62f444fbc2978a..66aaf9f66542eb 100644 --- a/docs/src/pages/components/links/links-pt.md +++ b/docs/src/pages/components/links/links-pt.md @@ -1,6 +1,6 @@ --- components: Link -githubLabel: 'component: Link' +githubLabel: 'component: link' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#link' --- diff --git a/docs/src/pages/components/links/links-zh.md b/docs/src/pages/components/links/links-zh.md index 566dafd12beb2c..5d2e48ec907c84 100644 --- a/docs/src/pages/components/links/links-zh.md +++ b/docs/src/pages/components/links/links-zh.md @@ -1,6 +1,6 @@ --- components: Link -githubLabel: 'component: Link' +githubLabel: 'component: link' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#link' --- diff --git a/docs/src/pages/components/links/links.md b/docs/src/pages/components/links/links.md index 9b03f6a603a507..4a2f6f9aa2b067 100644 --- a/docs/src/pages/components/links/links.md +++ b/docs/src/pages/components/links/links.md @@ -1,6 +1,6 @@ --- components: Link -githubLabel: 'component: Link' +githubLabel: 'component: link' waiAria: https://www.w3.org/TR/wai-aria-practices/#link --- diff --git a/docs/src/pages/components/lists/lists-pt.md b/docs/src/pages/components/lists/lists-pt.md index 9d2de614f3d439..c89637a91c4a5e 100644 --- a/docs/src/pages/components/lists/lists-pt.md +++ b/docs/src/pages/components/lists/lists-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Lista components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader -githubLabel: 'component: List' +githubLabel: 'component: list' materialDesign: https://material.io/components/lists --- diff --git a/docs/src/pages/components/lists/lists-zh.md b/docs/src/pages/components/lists/lists-zh.md index 4f21b9432af8ca..ec99366d0728ec 100644 --- a/docs/src/pages/components/lists/lists-zh.md +++ b/docs/src/pages/components/lists/lists-zh.md @@ -1,7 +1,7 @@ --- title: React List（列表）组件 components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader -githubLabel: 'component: List' +githubLabel: 'component: list' materialDesign: https://material.io/components/lists --- diff --git a/docs/src/pages/components/lists/lists.md b/docs/src/pages/components/lists/lists.md index f4c084dab6e356..c952501ee0ce62 100644 --- a/docs/src/pages/components/lists/lists.md +++ b/docs/src/pages/components/lists/lists.md @@ -1,7 +1,7 @@ --- title: React List component components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader -githubLabel: 'component: List' +githubLabel: 'component: list' materialDesign: https://material.io/components/lists --- diff --git a/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.js b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.js new file mode 100644 index 00000000000000..e430258d2a990a --- /dev/null +++ b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.js @@ -0,0 +1,39 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import Masonry from '@mui/lab/Masonry'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Typography, +} from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import { styled } from '@mui/material/styles'; +import * as React from 'react'; + +const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; + +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, + border: '1px solid black', +})); + +export default function MasonryWithVariableHeightItems() { + return ( + + + {heights.map((height, index) => ( + + + }> + Accordion {index + 1} + + Contents + + + ))} + + + ); +} diff --git a/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx new file mode 100644 index 00000000000000..e430258d2a990a --- /dev/null +++ b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx @@ -0,0 +1,39 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import Masonry from '@mui/lab/Masonry'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Typography, +} from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import { styled } from '@mui/material/styles'; +import * as React from 'react'; + +const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; + +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + color: theme.palette.text.secondary, + border: '1px solid black', +})); + +export default function MasonryWithVariableHeightItems() { + return ( + + + {heights.map((height, index) => ( + + + }> + Accordion {index + 1} + + Contents + + + ))} + + + ); +} diff --git a/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx.preview b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx.preview new file mode 100644 index 00000000000000..b6d62d78dda74a --- /dev/null +++ b/docs/src/pages/components/masonry/MasonryWithVariableHeightItems.tsx.preview @@ -0,0 +1,12 @@ + + {heights.map((height, index) => ( + + + }> + Accordion {index + 1} + + Contents + + + ))} + \ No newline at end of file diff --git a/docs/src/pages/components/masonry/masonry.md b/docs/src/pages/components/masonry/masonry.md index ee7f53af4397d3..d268bfa8fac3ed 100644 --- a/docs/src/pages/components/masonry/masonry.md +++ b/docs/src/pages/components/masonry/masonry.md @@ -1,16 +1,16 @@ --- title: React Masonry component components: Masonry -githubLabel: 'component: Masonry' +githubLabel: 'component: masonry' --- # Masonry -

    Masonry lays out contents of different sizes as blocks of the same width and variable height with configurable gaps.

    +

    Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.

    -Masonry maintains a list of content blocks with a consistent width but variable height. +Masonry maintains a list of content blocks with a consistent width but different height. The contents are ordered by row. -If a row is already filled with the specified number of columns, the next item starts another row, and it is added to the shortest column. +If a row is already filled with the specified number of columns, the next item starts another row, and it is added to the shortest column in order to optimize the use of space. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -27,6 +27,13 @@ If you'd like to order images by column, check out [ImageList](/components/image {{"demo": "pages/components/masonry/ImageMasonry.js", "bg": true}} +## Items with variable height + +This example demonstrates the use of `Masonry` for items with variable height. +Items can move to other columns in order to abide by the rule that items are always added to the shortest column and hence optimize the use of space. + +{{"demo": "pages/components/masonry/MasonryWithVariableHeightItems.js", "bg": true}} + ## Columns This example demonstrates the use of the `columns` to configure the number of columns of a `Masonry`. diff --git a/docs/src/pages/components/menus/menus-pt.md b/docs/src/pages/components/menus/menus-pt.md index caf384ca8fd99a..89d7aed343ecc0 100644 --- a/docs/src/pages/components/menus/menus-pt.md +++ b/docs/src/pages/components/menus/menus-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Menu components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper -githubLabel: 'component: Menu' +githubLabel: 'component: menu' materialDesign: https://material.io/components/menus waiAria: 'https://www.w3.org/TR/wai-aria-practices/#menubutton' --- diff --git a/docs/src/pages/components/menus/menus-zh.md b/docs/src/pages/components/menus/menus-zh.md index ee3aa04ffc1e71..5823a913eb7bd5 100644 --- a/docs/src/pages/components/menus/menus-zh.md +++ b/docs/src/pages/components/menus/menus-zh.md @@ -1,7 +1,7 @@ --- title: React Menu（菜单）组件 components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper -githubLabel: 'component: Menu' +githubLabel: 'component: menu' materialDesign: https://material.io/components/menus waiAria: 'https://www.w3.org/TR/wai-aria-practices/#menubutton' --- diff --git a/docs/src/pages/components/menus/menus.md b/docs/src/pages/components/menus/menus.md index e5f1f8e6ce1bcb..a734de0f30d0a8 100644 --- a/docs/src/pages/components/menus/menus.md +++ b/docs/src/pages/components/menus/menus.md @@ -1,7 +1,7 @@ --- title: React Menu component components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper -githubLabel: 'component: Menu' +githubLabel: 'component: menu' materialDesign: https://material.io/components/menus waiAria: https://www.w3.org/TR/wai-aria-practices/#menubutton --- diff --git a/docs/src/pages/components/modal/modal-pt.md b/docs/src/pages/components/modal/modal-pt.md index 8942223c3cd0bf..b953b42acb991c 100644 --- a/docs/src/pages/components/modal/modal-pt.md +++ b/docs/src/pages/components/modal/modal-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Modal components: Modal, ModalUnstyled -githubLabel: 'component: Modal' +githubLabel: 'component: modal' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#dialog_modal' --- diff --git a/docs/src/pages/components/modal/modal-zh.md b/docs/src/pages/components/modal/modal-zh.md index fe833f8284f326..212be5bcf9c0d1 100644 --- a/docs/src/pages/components/modal/modal-zh.md +++ b/docs/src/pages/components/modal/modal-zh.md @@ -1,7 +1,7 @@ --- title: React Modal（模态框）组件 components: Modal, ModalUnstyled -githubLabel: 'component: Modal' +githubLabel: 'component: modal' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#dialog_modal' --- diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md index 2e6768c298770b..ca1adc60c68703 100644 --- a/docs/src/pages/components/modal/modal.md +++ b/docs/src/pages/components/modal/modal.md @@ -1,7 +1,7 @@ --- title: React Modal component components: Modal, ModalUnstyled -githubLabel: 'component: Modal' +githubLabel: 'component: modal' waiAria: https://www.w3.org/TR/wai-aria-practices/#dialog_modal --- diff --git a/docs/src/pages/components/pagination/pagination-pt.md b/docs/src/pages/components/pagination/pagination-pt.md index 174d3a45845d9d..6f0b239f97f9b3 100644 --- a/docs/src/pages/components/pagination/pagination-pt.md +++ b/docs/src/pages/components/pagination/pagination-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Paginação components: Pagination, PaginationItem -githubLabel: 'component: Pagination' +githubLabel: 'component: pagination' --- # Paginação diff --git a/docs/src/pages/components/pagination/pagination-zh.md b/docs/src/pages/components/pagination/pagination-zh.md index 4e05d64e3201d4..868dfdaa0919b7 100644 --- a/docs/src/pages/components/pagination/pagination-zh.md +++ b/docs/src/pages/components/pagination/pagination-zh.md @@ -1,7 +1,7 @@ --- title: React Pagination（分页）组件 components: Pagination, PaginationItem -githubLabel: 'component: Pagination' +githubLabel: 'component: pagination' --- # Pagination 分页 diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md index 7393ba914d23d5..3d855eb05ee45d 100644 --- a/docs/src/pages/components/pagination/pagination.md +++ b/docs/src/pages/components/pagination/pagination.md @@ -1,7 +1,7 @@ --- title: React Pagination component components: Pagination, PaginationItem -githubLabel: 'component: Pagination' +githubLabel: 'component: pagination' --- # Pagination diff --git a/docs/src/pages/components/pickers/pickers-pt.md b/docs/src/pages/components/pickers/pickers-pt.md index 545fbfff7d7eab..0b9c50cd65f1ac 100644 --- a/docs/src/pages/components/pickers/pickers-pt.md +++ b/docs/src/pages/components/pickers/pickers-pt.md @@ -1,7 +1,12 @@ --- title: Componente React para Data e Hora +<<<<<<< HEAD components: TextField githubLabel: 'component: DatePicker' +======= +components: DatePicker,DateTimePicker,TimePicker,TextField +githubLabel: 'component: date picker' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/date-pickers waiAria: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html packageName: '@material-ui/lab' diff --git a/docs/src/pages/components/pickers/pickers-zh.md b/docs/src/pages/components/pickers/pickers-zh.md index 90f1c06820162a..8ed4e4274a2d38 100644 --- a/docs/src/pages/components/pickers/pickers-zh.md +++ b/docs/src/pages/components/pickers/pickers-zh.md @@ -1,7 +1,12 @@ --- title: React Date Picker（日期选择器）和 Time Picker（时间选择器）组件 +<<<<<<< HEAD components: TextField githubLabel: 'component: DatePicker' +======= +components: DatePicker,DateTimePicker,TimePicker,TextField +githubLabel: 'component: date picker' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/date-pickers waiAria: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html packageName: '@material-ui/lab' diff --git a/docs/src/pages/components/pickers/pickers.md b/docs/src/pages/components/pickers/pickers.md index 8e17e851208600..4cd2dd2c45b59c 100644 --- a/docs/src/pages/components/pickers/pickers.md +++ b/docs/src/pages/components/pickers/pickers.md @@ -1,7 +1,7 @@ --- title: Date picker, Time picker React components components: DatePicker,DateTimePicker,TimePicker,TextField -githubLabel: 'component: DatePicker' +githubLabel: 'component: date picker' materialDesign: https://material.io/components/date-pickers waiAria: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html packageName: '@mui/lab' diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js index dbd63bf1a6d9ec..a09e5872d367ee 100644 --- a/docs/src/pages/components/popper/ScrollPlayground.js +++ b/docs/src/pages/components/popper/ScrollPlayground.js @@ -318,7 +318,7 @@ export default function ScrollPlayground() { label="Disable portal" /> - (the children stay within it's parent DOM hierarchy) + (the children stay within their parent DOM hierarchy) diff --git a/docs/src/pages/components/popper/popper.md b/docs/src/pages/components/popper/popper.md index dd8e041a7c47a3..921d4860163bea 100644 --- a/docs/src/pages/components/popper/popper.md +++ b/docs/src/pages/components/popper/popper.md @@ -10,7 +10,7 @@ githubLabel: 'component: Popper' Some important features of the `Popper` component: -- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/popperjs/popper-core)) for perfect positioning. +- 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/)) for perfect positioning. - 💄 It's an alternative API to react-popper. It aims for simplicity. - 📦 [8 kB gzipped](/size-snapshot). - The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. diff --git a/docs/src/pages/components/progress/progress.md b/docs/src/pages/components/progress/progress.md index c0a923df5f2fc3..4e40cfc467f391 100644 --- a/docs/src/pages/components/progress/progress.md +++ b/docs/src/pages/components/progress/progress.md @@ -1,7 +1,7 @@ --- title: Circular, Linear progress React components components: CircularProgress, LinearProgress -githubLabel: 'component: CircularProgress' +githubLabel: 'component: progress' materialDesign: https://material.io/components/progress-indicators --- diff --git a/docs/src/pages/components/radio-buttons/ControlledRadioButtonsGroup.js b/docs/src/pages/components/radio-buttons/ControlledRadioButtonsGroup.js index 8192d057e09096..95193ced07aa54 100644 --- a/docs/src/pages/components/radio-buttons/ControlledRadioButtonsGroup.js +++ b/docs/src/pages/components/radio-buttons/ControlledRadioButtonsGroup.js @@ -13,10 +13,10 @@ export default function ControlledRadioButtonsGroup() { }; return ( - - Gender + + Gender - Gender + + Gender - Gender + + Gender - Gender - + + Gender + } label="Female" /> } label="Male" /> } label="Other" /> diff --git a/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx b/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx index 78ceb37fa337f4..038befed877519 100644 --- a/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx +++ b/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx @@ -68,9 +68,13 @@ function BpRadio(props: RadioProps) { export default function CustomizedRadios() { return ( - - Gender - + + Gender + } label="Female" /> } label="Male" /> } label="Other" /> diff --git a/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx.preview b/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx.preview deleted file mode 100644 index 38752397b1955b..00000000000000 --- a/docs/src/pages/components/radio-buttons/CustomizedRadios.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - } - label="(Disabled option)" - /> - - \ No newline at end of file diff --git a/docs/src/pages/components/radio-buttons/ErrorRadios.js b/docs/src/pages/components/radio-buttons/ErrorRadios.js index c2431c117fedfa..71858f3c3a68fc 100644 --- a/docs/src/pages/components/radio-buttons/ErrorRadios.js +++ b/docs/src/pages/components/radio-buttons/ErrorRadios.js @@ -35,15 +35,10 @@ export default function ErrorRadios() { return (
    - - Pop quiz: MUI is... + + Pop quiz: MUI is... - - Pop quiz: MUI is... + + Pop quiz: MUI is... - labelPlacement - + + labelPlacement + } diff --git a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.tsx b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.tsx index dd644e0b320007..2bb73c4545fbd2 100644 --- a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.tsx +++ b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.tsx @@ -7,9 +7,14 @@ import FormLabel from '@mui/material/FormLabel'; export default function FormControlLabelPlacement() { return ( - - labelPlacement - + + labelPlacement + } diff --git a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js index 0676af51aad829..a7231f5bed6678 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js +++ b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js @@ -7,10 +7,10 @@ import FormLabel from '@mui/material/FormLabel'; export default function RadioButtonsGroup() { return ( - - Gender + + Gender diff --git a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx index 0676af51aad829..a7231f5bed6678 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx +++ b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx @@ -7,10 +7,10 @@ import FormLabel from '@mui/material/FormLabel'; export default function RadioButtonsGroup() { return ( - - Gender + + Gender diff --git a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx.preview b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx.preview index 4ef167eb94e64f..957b704f328985 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx.preview +++ b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx.preview @@ -1,7 +1,7 @@ - - Gender + + Gender diff --git a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.js b/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.js index bcf6d103735b74..7e1611d087d801 100644 --- a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.js +++ b/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.js @@ -7,9 +7,13 @@ import FormLabel from '@mui/material/FormLabel'; export default function RowRadioButtonsGroup() { return ( - - Gender - + + Gender + } label="Female" /> } label="Male" /> } label="Other" /> diff --git a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx b/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx index bcf6d103735b74..7e1611d087d801 100644 --- a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx +++ b/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx @@ -7,9 +7,13 @@ import FormLabel from '@mui/material/FormLabel'; export default function RowRadioButtonsGroup() { return ( - - Gender - + + Gender + } label="Female" /> } label="Male" /> } label="Other" /> diff --git a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx.preview b/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx.preview deleted file mode 100644 index 888a95beb35c5d..00000000000000 --- a/docs/src/pages/components/radio-buttons/RowRadioButtonsGroup.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - } - label="other" - /> - - \ No newline at end of file diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md index 7af4f941483bec..1e25d418f190e6 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Botões de opção components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel -githubLabel: 'component: Radio' +githubLabel: 'component: radio' materialDesign: 'https://material.io/components/selection-controls#radio-buttons' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#radiobutton' --- diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index 359038286f9794..aecbee5409edd4 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -1,7 +1,7 @@ --- title: React Radio buttons（单选按钮）组件 components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel -githubLabel: 'component: Radio' +githubLabel: 'component: radio' materialDesign: 'https://material.io/components/selection-controls#radio-buttons' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#radiobutton' --- diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md index 88ec8eb5489312..5628352d55febf 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons.md @@ -1,7 +1,7 @@ --- title: Radio buttons React component components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel -githubLabel: 'component: Radio' +githubLabel: 'component: radio' materialDesign: https://material.io/components/selection-controls#radio-buttons waiAria: https://www.w3.org/TR/wai-aria-practices/#radiobutton --- @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/TR/wai-aria-practices/#radiobutton

    Radio buttons allow the user to select one option from a set.

    Use radio buttons when the user needs to see all available options. -If available options can be collapsed, consider using a dropdown menu because it uses less space. +If available options can be collapsed, consider using a [Select component](/components/selects/) because it uses less space. Radio buttons should have the most commonly used option selected by default. diff --git a/docs/src/pages/components/rating/rating-pt.md b/docs/src/pages/components/rating/rating-pt.md index d03c6dc561bbe1..86651b4f73e298 100644 --- a/docs/src/pages/components/rating/rating-pt.md +++ b/docs/src/pages/components/rating/rating-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Avaliação components: Rating -githubLabel: 'component: Rating' +githubLabel: 'component: rating' waiAria: 'https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating' --- @@ -52,7 +52,7 @@ The rating is implemented with a radio group, set `highlightSelectedOnly` to res A acessibilidade neste componente conta com: - Um grupo de botões de opção com seus campos visualmente ocultos. Ele contém seis botões de opção, um para cada estrela e outro para 0 estrelas, que é marcado por padrão. Certifique-se de fornecer um valor para a propriedade `name` que é exclusivo para o formulário pai. -- Rótulos para os botões de opção que contém o texto atual (“1 Estrela”, “2 Estrelas”, …). Certifique-se de fornecer uma função adequada para a propriedade `getLabelText` quando a página estiver em um idioma diferente de inglês. Você pode usar as [localidades incluídas](https://material-ui.com/guides/localization/), ou fornecer suas próprias. +- Labels for the radio buttons containing actual text ("1 Star", "2 Stars", …). Certifique-se de fornecer uma função adequada para a propriedade `getLabelText` quando a página estiver em um idioma diferente de inglês. Você pode usar as [localidades incluídas](https://material-ui.com/guides/localization/), ou fornecer suas próprias. - Uma aparência visualmente distinta para os ícones de avaliação. Por padrão, o componente de avaliação usa uma diferença de cor e forma (ícones preenchidos e vazios) para indicar o valor. No caso de você usar cor como a única forma de indicar o valor, a informação também deve ser apresentada como texto, como nesta demonstração. Isto é importante para corresponder a [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) do WCAG2.1. {{"demo": "pages/components/rating/TextRating.js"}} diff --git a/docs/src/pages/components/rating/rating-zh.md b/docs/src/pages/components/rating/rating-zh.md index 457347f0cc1378..8b66d771ae4703 100644 --- a/docs/src/pages/components/rating/rating-zh.md +++ b/docs/src/pages/components/rating/rating-zh.md @@ -1,7 +1,7 @@ --- title: React Rating（评分）组件 components: Rating -githubLabel: 'component: Rating' +githubLabel: 'component: rating' waiAria: 'https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating' --- @@ -52,7 +52,7 @@ waiAria: 'https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating' 这个组件的可访问性依赖于： - 一个单选框组，其字段在视觉上是隐藏的。 它包含六个单选按钮，一组用于每颗星星的选择，另一组代表默认选中的 0 颗星。 请确保为 `name` 属性提供一个对父表单唯一的值。 -- 包含实际文字的单选按钮的标签（“一颗星”，“两颗星”，...）。 当页面的语言不是英语时，请确保为 `getLabelText` 属性提供一个合适的函数。 你可以使用这上面 [所提供的本地化语言选项](https://material-ui.com/guides/localization/)，或者单独提供你自己的语言包。 +- Labels for the radio buttons containing actual text ("1 Star", "2 Stars", …). 当页面的语言不是英语时，请确保为 `getLabelText` 属性提供一个合适的函数。 你可以使用这上面 [所提供的本地化语言选项](https://material-ui.com/guides/localization/)，或者单独提供你自己的语言包。 - 为评分图标提供了一个视觉上独特的外观。 默认情况下，评分组件通过颜色和形状的差异（填充和空图标）来表示所指定的值。 如果你使用颜色作为唯一的方式来表示数值，那么数值信息也应该像下面这个示例一样以文本的形式来显示。 这对于符合 WCAG2.1 的 [成功标准 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) 非常重要。 {{"demo": "pages/components/rating/TextRating.js"}} diff --git a/docs/src/pages/components/rating/rating.md b/docs/src/pages/components/rating/rating.md index c2c466b03d5156..cca929ce3ebb8f 100644 --- a/docs/src/pages/components/rating/rating.md +++ b/docs/src/pages/components/rating/rating.md @@ -1,7 +1,7 @@ --- title: React Rating component components: Rating -githubLabel: 'component: Rating' +githubLabel: 'component: rating' waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating --- diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.js b/docs/src/pages/components/selects/UnstyledSelectControlled.js new file mode 100644 index 00000000000000..4a81c962ec6d06 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.js @@ -0,0 +1,129 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +CustomSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +export default function UnstyledSelectsMultiple() { + const [value, setValue] = React.useState(10); + return ( +
    + + Ten + Twenty + Thirty + + +

    Selected value: {value}

    +
    + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx new file mode 100644 index 00000000000000..77a97c27758f12 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx @@ -0,0 +1,118 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props: SelectUnstyledProps) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +export default function UnstyledSelectsMultiple() { + const [value, setValue] = React.useState(10); + return ( +
    + + Ten + Twenty + Thirty + + +

    Selected value: {value}

    +
    + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview new file mode 100644 index 00000000000000..320b97c61c39e0 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectControlled.tsx.preview @@ -0,0 +1,7 @@ + + Ten + Twenty + Thirty + + +

    Selected value: {value}

    \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js new file mode 100644 index 00000000000000..14de6667a80d97 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.js @@ -0,0 +1,136 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +CustomSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +function renderValue(option) { + if (option == null) { + return Select an option...; + } + + return ( + + {option.label} ({option.value}) + + ); +} + +export default function UnstyledSelectCustomRenderValue() { + return ( + + Ten + Twenty + Thirty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx new file mode 100644 index 00000000000000..f7d140b88485ca --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx @@ -0,0 +1,126 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, + SelectOption, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props: SelectUnstyledProps) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +function renderValue(option: SelectOption | null) { + if (option == null) { + return Select an option...; + } + + return ( + + {option.label} ({option.value}) + + ); +} + +export default function UnstyledSelectCustomRenderValue() { + return ( + + Ten + Twenty + Thirty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx.preview new file mode 100644 index 00000000000000..cd9bd85a491b05 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectCustomRenderValue.tsx.preview @@ -0,0 +1,5 @@ + + Ten + Twenty + Thirty + \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.js b/docs/src/pages/components/selects/UnstyledSelectGrouping.js new file mode 100644 index 00000000000000..6df0e1caa58a00 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.js @@ -0,0 +1,177 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledGroupRoot = styled('li')` + list-style: none; +`; + +const StyledGroupHeader = styled('span')` + display: block; + padding: 10px 10px 4px 10px; + font-size: 0.75em; + text-transform: uppercase; +`; + +const StyledGroupOptions = styled('ul')` + list-style: none; + margin-left: 0; + padding: 0; + + > li { + padding-left: 20px; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +CustomSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(props, ref) { + const components = { + Root: StyledGroupRoot, + Label: StyledGroupHeader, + List: StyledGroupOptions, + ...props.components, + }; + + return ; +}); + +CustomOptionGroup.propTypes = { + /** + * The components used for each slot inside the OptionGroupUnstyled. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Label: PropTypes.elementType, + List: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +export default function UnstyledSelectGrouping() { + return ( + + + Frodo + Sam + Merry + Pippin + + + Galadriel + Legolas + + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx new file mode 100644 index 00000000000000..3941e1e4e3cffb --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx @@ -0,0 +1,158 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import OptionGroupUnstyled, { + OptionGroupUnstyledProps, +} from '@mui/base/OptionGroupUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption: typeof OptionUnstyled = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledGroupRoot = styled('li')` + list-style: none; +`; + +const StyledGroupHeader = styled('span')` + display: block; + padding: 10px 10px 4px 10px; + font-size: 0.75em; + text-transform: uppercase; +`; + +const StyledGroupOptions = styled('ul')` + list-style: none; + margin-left: 0; + padding: 0; + + > li { + padding-left: 20px; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props: SelectUnstyledProps) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +const CustomOptionGroup = React.forwardRef(function CustomOptionGroup( + props: OptionGroupUnstyledProps, + ref: React.ForwardedRef, +) { + const components: OptionGroupUnstyledProps['components'] = { + Root: StyledGroupRoot, + Label: StyledGroupHeader, + List: StyledGroupOptions, + ...props.components, + }; + + return ; +}); + +export default function UnstyledSelectGrouping() { + return ( + + + Frodo + Sam + Merry + Pippin + + + Galadriel + Legolas + + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx.preview new file mode 100644 index 00000000000000..f5a1372a09834b --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectGrouping.tsx.preview @@ -0,0 +1,12 @@ + + + Frodo + Sam + Merry + Pippin + + + Galadriel + Legolas + + \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.js b/docs/src/pages/components/selects/UnstyledSelectMultiple.js new file mode 100644 index 00000000000000..34062011453907 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.js @@ -0,0 +1,127 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import MultiSelectUnstyled from '@mui/base/MultiSelectUnstyled'; +import { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(props, ref) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}); + +CustomMultiSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +export default function UnstyledSelectsMultiple() { + return ( + + Ten + Twenty + Thirty + Forty + Fifty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx new file mode 100644 index 00000000000000..84b134d5c81f17 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx @@ -0,0 +1,118 @@ +import * as React from 'react'; +import MultiSelectUnstyled, { + MultiSelectUnstyledProps, +} from '@mui/base/MultiSelectUnstyled'; +import { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomMultiSelect = React.forwardRef(function CustomMultiSelect( + props: MultiSelectUnstyledProps, + ref: React.ForwardedRef, +) { + const components: MultiSelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}); + +export default function UnstyledSelectsMultiple() { + return ( + + Ten + Twenty + Thirty + Forty + Fifty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx.preview new file mode 100644 index 00000000000000..ae87fa1220c3d2 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectMultiple.tsx.preview @@ -0,0 +1,7 @@ + + Ten + Twenty + Thirty + Forty + Fifty + \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.js b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js new file mode 100644 index 00000000000000..aac4c55e6ad7bf --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.js @@ -0,0 +1,140 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +CustomSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +const characters = [ + { name: 'Frodo', race: 'Hobbit' }, + { name: 'Sam', race: 'Hobbit' }, + { name: 'Merry', race: 'Hobbit' }, + { name: 'Gandalf', race: 'Maia' }, + { name: 'Gimli', race: 'Dwarf' }, +]; + +export default function UnstyledSelectObjectValues() { + const [character, setCharacter] = React.useState(characters[0]); + return ( +
    + + {characters.map((c) => ( + + {c.name} + + ))} + + +

    Selected character:

    + 
    {JSON.stringify(character, null, 2)}
    +
    + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx new file mode 100644 index 00000000000000..c246ae9befb4e3 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx @@ -0,0 +1,134 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +function CustomSelect(props: SelectUnstyledProps) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +} + +interface Character { + name: string; + race: string; +} + +const characters: Character[] = [ + { name: 'Frodo', race: 'Hobbit' }, + { name: 'Sam', race: 'Hobbit' }, + { name: 'Merry', race: 'Hobbit' }, + { name: 'Gandalf', race: 'Maia' }, + { name: 'Gimli', race: 'Dwarf' }, +]; + +export default function UnstyledSelectObjectValues() { + const [character, setCharacter] = React.useState(characters[0]); + return ( +
    + + {characters.map((c) => ( + + {c.name} + + ))} + + +

    Selected character:

    + 
    {JSON.stringify(character, null, 2)}
    +
    + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview new file mode 100644 index 00000000000000..13b0bbf0ae77c3 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx.preview @@ -0,0 +1,10 @@ + + {characters.map((c) => ( + + {c.name} + + ))} + + +

    Selected character:

    +
    {JSON.stringify(character, null, 2)}
    \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.js b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js new file mode 100644 index 00000000000000..dca3802a524759 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.js @@ -0,0 +1,568 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import { styled } from '@mui/system'; +import { PopperUnstyled } from '@mui/base'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 480px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } + + & img { + margin-right: 10px; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 480px; + border: 1px solid #ccc; + border-top: none; + color: #000; + max-height: 400px; + overflow: auto; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } + + & img { + margin-right: 10px; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}); + +CustomSelect.propTypes = { + /** + * The components used for each slot inside the Select. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Listbox: PropTypes.elementType, + Popper: PropTypes.elementType, + Root: PropTypes.elementType, + }), +}; + +export default function UnstyledSelectRichOptions() { + return ( + + {countries.map((c) => ( + + {`Flag + {c.label} ({c.code}) +{c.phone} + + ))} + + ); +} + +const countries = [ + { code: 'AD', label: 'Andorra', phone: '376' }, + { + code: 'AE', + label: 'United Arab Emirates', + phone: '971', + }, + { code: 'AF', label: 'Afghanistan', phone: '93' }, + { + code: 'AG', + label: 'Antigua and Barbuda', + phone: '1-268', + }, + { code: 'AI', label: 'Anguilla', phone: '1-264' }, + { code: 'AL', label: 'Albania', phone: '355' }, + { code: 'AM', label: 'Armenia', phone: '374' }, + { code: 'AO', label: 'Angola', phone: '244' }, + { code: 'AQ', label: 'Antarctica', phone: '672' }, + { code: 'AR', label: 'Argentina', phone: '54' }, + { code: 'AS', label: 'American Samoa', phone: '1-684' }, + { code: 'AT', label: 'Austria', phone: '43' }, + { + code: 'AU', + label: 'Australia', + phone: '61', + suggested: true, + }, + { code: 'AW', label: 'Aruba', phone: '297' }, + { code: 'AX', label: 'Alland Islands', phone: '358' }, + { code: 'AZ', label: 'Azerbaijan', phone: '994' }, + { + code: 'BA', + label: 'Bosnia and Herzegovina', + phone: '387', + }, + { code: 'BB', label: 'Barbados', phone: '1-246' }, + { code: 'BD', label: 'Bangladesh', phone: '880' }, + { code: 'BE', label: 'Belgium', phone: '32' }, + { code: 'BF', label: 'Burkina Faso', phone: '226' }, + { code: 'BG', label: 'Bulgaria', phone: '359' }, + { code: 'BH', label: 'Bahrain', phone: '973' }, + { code: 'BI', label: 'Burundi', phone: '257' }, + { code: 'BJ', label: 'Benin', phone: '229' }, + { code: 'BL', label: 'Saint Barthelemy', phone: '590' }, + { code: 'BM', label: 'Bermuda', phone: '1-441' }, + { code: 'BN', label: 'Brunei Darussalam', phone: '673' }, + { code: 'BO', label: 'Bolivia', phone: '591' }, + { code: 'BR', label: 'Brazil', phone: '55' }, + { code: 'BS', label: 'Bahamas', phone: '1-242' }, + { code: 'BT', label: 'Bhutan', phone: '975' }, + { code: 'BV', label: 'Bouvet Island', phone: '47' }, + { code: 'BW', label: 'Botswana', phone: '267' }, + { code: 'BY', label: 'Belarus', phone: '375' }, + { code: 'BZ', label: 'Belize', phone: '501' }, + { + code: 'CA', + label: 'Canada', + phone: '1', + suggested: true, + }, + { + code: 'CC', + label: 'Cocos (Keeling) Islands', + phone: '61', + }, + { + code: 'CD', + label: 'Congo, Democratic Republic of the', + phone: '243', + }, + { + code: 'CF', + label: 'Central African Republic', + phone: '236', + }, + { + code: 'CG', + label: 'Congo, Republic of the', + phone: '242', + }, + { code: 'CH', label: 'Switzerland', phone: '41' }, + { code: 'CI', label: "Cote d'Ivoire", phone: '225' }, + { code: 'CK', label: 'Cook Islands', phone: '682' }, + { code: 'CL', label: 'Chile', phone: '56' }, + { code: 'CM', label: 'Cameroon', phone: '237' }, + { code: 'CN', label: 'China', phone: '86' }, + { code: 'CO', label: 'Colombia', phone: '57' }, + { code: 'CR', label: 'Costa Rica', phone: '506' }, + { code: 'CU', label: 'Cuba', phone: '53' }, + { code: 'CV', label: 'Cape Verde', phone: '238' }, + { code: 'CW', label: 'Curacao', phone: '599' }, + { code: 'CX', label: 'Christmas Island', phone: '61' }, + { code: 'CY', label: 'Cyprus', phone: '357' }, + { code: 'CZ', label: 'Czech Republic', phone: '420' }, + { + code: 'DE', + label: 'Germany', + phone: '49', + suggested: true, + }, + { code: 'DJ', label: 'Djibouti', phone: '253' }, + { code: 'DK', label: 'Denmark', phone: '45' }, + { code: 'DM', label: 'Dominica', phone: '1-767' }, + { + code: 'DO', + label: 'Dominican Republic', + phone: '1-809', + }, + { code: 'DZ', label: 'Algeria', phone: '213' }, + { code: 'EC', label: 'Ecuador', phone: '593' }, + { code: 'EE', label: 'Estonia', phone: '372' }, + { code: 'EG', label: 'Egypt', phone: '20' }, + { code: 'EH', label: 'Western Sahara', phone: '212' }, + { code: 'ER', label: 'Eritrea', phone: '291' }, + { code: 'ES', label: 'Spain', phone: '34' }, + { code: 'ET', label: 'Ethiopia', phone: '251' }, + { code: 'FI', label: 'Finland', phone: '358' }, + { code: 'FJ', label: 'Fiji', phone: '679' }, + { + code: 'FK', + label: 'Falkland Islands (Malvinas)', + phone: '500', + }, + { + code: 'FM', + label: 'Micronesia, Federated States of', + phone: '691', + }, + { code: 'FO', label: 'Faroe Islands', phone: '298' }, + { + code: 'FR', + label: 'France', + phone: '33', + suggested: true, + }, + { code: 'GA', label: 'Gabon', phone: '241' }, + { code: 'GB', label: 'United Kingdom', phone: '44' }, + { code: 'GD', label: 'Grenada', phone: '1-473' }, + { code: 'GE', label: 'Georgia', phone: '995' }, + { code: 'GF', label: 'French Guiana', phone: '594' }, + { code: 'GG', label: 'Guernsey', phone: '44' }, + { code: 'GH', label: 'Ghana', phone: '233' }, + { code: 'GI', label: 'Gibraltar', phone: '350' }, + { code: 'GL', label: 'Greenland', phone: '299' }, + { code: 'GM', label: 'Gambia', phone: '220' }, + { code: 'GN', label: 'Guinea', phone: '224' }, + { code: 'GP', label: 'Guadeloupe', phone: '590' }, + { code: 'GQ', label: 'Equatorial Guinea', phone: '240' }, + { code: 'GR', label: 'Greece', phone: '30' }, + { + code: 'GS', + label: 'South Georgia and the South Sandwich Islands', + phone: '500', + }, + { code: 'GT', label: 'Guatemala', phone: '502' }, + { code: 'GU', label: 'Guam', phone: '1-671' }, + { code: 'GW', label: 'Guinea-Bissau', phone: '245' }, + { code: 'GY', label: 'Guyana', phone: '592' }, + { code: 'HK', label: 'Hong Kong', phone: '852' }, + { + code: 'HM', + label: 'Heard Island and McDonald Islands', + phone: '672', + }, + { code: 'HN', label: 'Honduras', phone: '504' }, + { code: 'HR', label: 'Croatia', phone: '385' }, + { code: 'HT', label: 'Haiti', phone: '509' }, + { code: 'HU', label: 'Hungary', phone: '36' }, + { code: 'ID', label: 'Indonesia', phone: '62' }, + { code: 'IE', label: 'Ireland', phone: '353' }, + { code: 'IL', label: 'Israel', phone: '972' }, + { code: 'IM', label: 'Isle of Man', phone: '44' }, + { code: 'IN', label: 'India', phone: '91' }, + { + code: 'IO', + label: 'British Indian Ocean Territory', + phone: '246', + }, + { code: 'IQ', label: 'Iraq', phone: '964' }, + { + code: 'IR', + label: 'Iran, Islamic Republic of', + phone: '98', + }, + { code: 'IS', label: 'Iceland', phone: '354' }, + { code: 'IT', label: 'Italy', phone: '39' }, + { code: 'JE', label: 'Jersey', phone: '44' }, + { code: 'JM', label: 'Jamaica', phone: '1-876' }, + { code: 'JO', label: 'Jordan', phone: '962' }, + { + code: 'JP', + label: 'Japan', + phone: '81', + suggested: true, + }, + { code: 'KE', label: 'Kenya', phone: '254' }, + { code: 'KG', label: 'Kyrgyzstan', phone: '996' }, + { code: 'KH', label: 'Cambodia', phone: '855' }, + { code: 'KI', label: 'Kiribati', phone: '686' }, + { code: 'KM', label: 'Comoros', phone: '269' }, + { + code: 'KN', + label: 'Saint Kitts and Nevis', + phone: '1-869', + }, + { + code: 'KP', + label: "Korea, Democratic People's Republic of", + phone: '850', + }, + { code: 'KR', label: 'Korea, Republic of', phone: '82' }, + { code: 'KW', label: 'Kuwait', phone: '965' }, + { code: 'KY', label: 'Cayman Islands', phone: '1-345' }, + { code: 'KZ', label: 'Kazakhstan', phone: '7' }, + { + code: 'LA', + label: "Lao People's Democratic Republic", + phone: '856', + }, + { code: 'LB', label: 'Lebanon', phone: '961' }, + { code: 'LC', label: 'Saint Lucia', phone: '1-758' }, + { code: 'LI', label: 'Liechtenstein', phone: '423' }, + { code: 'LK', label: 'Sri Lanka', phone: '94' }, + { code: 'LR', label: 'Liberia', phone: '231' }, + { code: 'LS', label: 'Lesotho', phone: '266' }, + { code: 'LT', label: 'Lithuania', phone: '370' }, + { code: 'LU', label: 'Luxembourg', phone: '352' }, + { code: 'LV', label: 'Latvia', phone: '371' }, + { code: 'LY', label: 'Libya', phone: '218' }, + { code: 'MA', label: 'Morocco', phone: '212' }, + { code: 'MC', label: 'Monaco', phone: '377' }, + { + code: 'MD', + label: 'Moldova, Republic of', + phone: '373', + }, + { code: 'ME', label: 'Montenegro', phone: '382' }, + { + code: 'MF', + label: 'Saint Martin (French part)', + phone: '590', + }, + { code: 'MG', label: 'Madagascar', phone: '261' }, + { code: 'MH', label: 'Marshall Islands', phone: '692' }, + { + code: 'MK', + label: 'Macedonia, the Former Yugoslav Republic of', + phone: '389', + }, + { code: 'ML', label: 'Mali', phone: '223' }, + { code: 'MM', label: 'Myanmar', phone: '95' }, + { code: 'MN', label: 'Mongolia', phone: '976' }, + { code: 'MO', label: 'Macao', phone: '853' }, + { + code: 'MP', + label: 'Northern Mariana Islands', + phone: '1-670', + }, + { code: 'MQ', label: 'Martinique', phone: '596' }, + { code: 'MR', label: 'Mauritania', phone: '222' }, + { code: 'MS', label: 'Montserrat', phone: '1-664' }, + { code: 'MT', label: 'Malta', phone: '356' }, + { code: 'MU', label: 'Mauritius', phone: '230' }, + { code: 'MV', label: 'Maldives', phone: '960' }, + { code: 'MW', label: 'Malawi', phone: '265' }, + { code: 'MX', label: 'Mexico', phone: '52' }, + { code: 'MY', label: 'Malaysia', phone: '60' }, + { code: 'MZ', label: 'Mozambique', phone: '258' }, + { code: 'NA', label: 'Namibia', phone: '264' }, + { code: 'NC', label: 'New Caledonia', phone: '687' }, + { code: 'NE', label: 'Niger', phone: '227' }, + { code: 'NF', label: 'Norfolk Island', phone: '672' }, + { code: 'NG', label: 'Nigeria', phone: '234' }, + { code: 'NI', label: 'Nicaragua', phone: '505' }, + { code: 'NL', label: 'Netherlands', phone: '31' }, + { code: 'NO', label: 'Norway', phone: '47' }, + { code: 'NP', label: 'Nepal', phone: '977' }, + { code: 'NR', label: 'Nauru', phone: '674' }, + { code: 'NU', label: 'Niue', phone: '683' }, + { code: 'NZ', label: 'New Zealand', phone: '64' }, + { code: 'OM', label: 'Oman', phone: '968' }, + { code: 'PA', label: 'Panama', phone: '507' }, + { code: 'PE', label: 'Peru', phone: '51' }, + { code: 'PF', label: 'French Polynesia', phone: '689' }, + { code: 'PG', label: 'Papua New Guinea', phone: '675' }, + { code: 'PH', label: 'Philippines', phone: '63' }, + { code: 'PK', label: 'Pakistan', phone: '92' }, + { code: 'PL', label: 'Poland', phone: '48' }, + { + code: 'PM', + label: 'Saint Pierre and Miquelon', + phone: '508', + }, + { code: 'PN', label: 'Pitcairn', phone: '870' }, + { code: 'PR', label: 'Puerto Rico', phone: '1' }, + { + code: 'PS', + label: 'Palestine, State of', + phone: '970', + }, + { code: 'PT', label: 'Portugal', phone: '351' }, + { code: 'PW', label: 'Palau', phone: '680' }, + { code: 'PY', label: 'Paraguay', phone: '595' }, + { code: 'QA', label: 'Qatar', phone: '974' }, + { code: 'RE', label: 'Reunion', phone: '262' }, + { code: 'RO', label: 'Romania', phone: '40' }, + { code: 'RS', label: 'Serbia', phone: '381' }, + { code: 'RU', label: 'Russian Federation', phone: '7' }, + { code: 'RW', label: 'Rwanda', phone: '250' }, + { code: 'SA', label: 'Saudi Arabia', phone: '966' }, + { code: 'SB', label: 'Solomon Islands', phone: '677' }, + { code: 'SC', label: 'Seychelles', phone: '248' }, + { code: 'SD', label: 'Sudan', phone: '249' }, + { code: 'SE', label: 'Sweden', phone: '46' }, + { code: 'SG', label: 'Singapore', phone: '65' }, + { code: 'SH', label: 'Saint Helena', phone: '290' }, + { code: 'SI', label: 'Slovenia', phone: '386' }, + { + code: 'SJ', + label: 'Svalbard and Jan Mayen', + phone: '47', + }, + { code: 'SK', label: 'Slovakia', phone: '421' }, + { code: 'SL', label: 'Sierra Leone', phone: '232' }, + { code: 'SM', label: 'San Marino', phone: '378' }, + { code: 'SN', label: 'Senegal', phone: '221' }, + { code: 'SO', label: 'Somalia', phone: '252' }, + { code: 'SR', label: 'Suriname', phone: '597' }, + { code: 'SS', label: 'South Sudan', phone: '211' }, + { + code: 'ST', + label: 'Sao Tome and Principe', + phone: '239', + }, + { code: 'SV', label: 'El Salvador', phone: '503' }, + { + code: 'SX', + label: 'Sint Maarten (Dutch part)', + phone: '1-721', + }, + { + code: 'SY', + label: 'Syrian Arab Republic', + phone: '963', + }, + { code: 'SZ', label: 'Swaziland', phone: '268' }, + { + code: 'TC', + label: 'Turks and Caicos Islands', + phone: '1-649', + }, + { code: 'TD', label: 'Chad', phone: '235' }, + { + code: 'TF', + label: 'French Southern Territories', + phone: '262', + }, + { code: 'TG', label: 'Togo', phone: '228' }, + { code: 'TH', label: 'Thailand', phone: '66' }, + { code: 'TJ', label: 'Tajikistan', phone: '992' }, + { code: 'TK', label: 'Tokelau', phone: '690' }, + { code: 'TL', label: 'Timor-Leste', phone: '670' }, + { code: 'TM', label: 'Turkmenistan', phone: '993' }, + { code: 'TN', label: 'Tunisia', phone: '216' }, + { code: 'TO', label: 'Tonga', phone: '676' }, + { code: 'TR', label: 'Turkey', phone: '90' }, + { + code: 'TT', + label: 'Trinidad and Tobago', + phone: '1-868', + }, + { code: 'TV', label: 'Tuvalu', phone: '688' }, + { + code: 'TW', + label: 'Taiwan, Province of China', + phone: '886', + }, + { + code: 'TZ', + label: 'United Republic of Tanzania', + phone: '255', + }, + { code: 'UA', label: 'Ukraine', phone: '380' }, + { code: 'UG', label: 'Uganda', phone: '256' }, + { + code: 'US', + label: 'United States', + phone: '1', + suggested: true, + }, + { code: 'UY', label: 'Uruguay', phone: '598' }, + { code: 'UZ', label: 'Uzbekistan', phone: '998' }, + { + code: 'VA', + label: 'Holy See (Vatican City State)', + phone: '379', + }, + { + code: 'VC', + label: 'Saint Vincent and the Grenadines', + phone: '1-784', + }, + { code: 'VE', label: 'Venezuela', phone: '58' }, + { + code: 'VG', + label: 'British Virgin Islands', + phone: '1-284', + }, + { + code: 'VI', + label: 'US Virgin Islands', + phone: '1-340', + }, + { code: 'VN', label: 'Vietnam', phone: '84' }, + { code: 'VU', label: 'Vanuatu', phone: '678' }, + { code: 'WF', label: 'Wallis and Futuna', phone: '681' }, + { code: 'WS', label: 'Samoa', phone: '685' }, + { code: 'XK', label: 'Kosovo', phone: '383' }, + { code: 'YE', label: 'Yemen', phone: '967' }, + { code: 'YT', label: 'Mayotte', phone: '262' }, + { code: 'ZA', label: 'South Africa', phone: '27' }, + { code: 'ZM', label: 'Zambia', phone: '260' }, + { code: 'ZW', label: 'Zimbabwe', phone: '263' }, +]; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx new file mode 100644 index 00000000000000..02d8e3341a3c59 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx @@ -0,0 +1,560 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import { styled } from '@mui/system'; +import { PopperUnstyled } from '@mui/base'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 480px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } + + & img { + margin-right: 10px; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 480px; + border: 1px solid #ccc; + border-top: none; + color: #000; + max-height: 400px; + overflow: auto; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } + + & img { + margin-right: 10px; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomSelect = React.forwardRef(function CustomSelect( + props: SelectUnstyledProps, + ref: React.ForwardedRef, +) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}); + +export default function UnstyledSelectRichOptions() { + return ( + + {countries.map((c) => ( + + {`Flag + {c.label} ({c.code}) +{c.phone} + + ))} + + ); +} + +const countries = [ + { code: 'AD', label: 'Andorra', phone: '376' }, + { + code: 'AE', + label: 'United Arab Emirates', + phone: '971', + }, + { code: 'AF', label: 'Afghanistan', phone: '93' }, + { + code: 'AG', + label: 'Antigua and Barbuda', + phone: '1-268', + }, + { code: 'AI', label: 'Anguilla', phone: '1-264' }, + { code: 'AL', label: 'Albania', phone: '355' }, + { code: 'AM', label: 'Armenia', phone: '374' }, + { code: 'AO', label: 'Angola', phone: '244' }, + { code: 'AQ', label: 'Antarctica', phone: '672' }, + { code: 'AR', label: 'Argentina', phone: '54' }, + { code: 'AS', label: 'American Samoa', phone: '1-684' }, + { code: 'AT', label: 'Austria', phone: '43' }, + { + code: 'AU', + label: 'Australia', + phone: '61', + suggested: true, + }, + { code: 'AW', label: 'Aruba', phone: '297' }, + { code: 'AX', label: 'Alland Islands', phone: '358' }, + { code: 'AZ', label: 'Azerbaijan', phone: '994' }, + { + code: 'BA', + label: 'Bosnia and Herzegovina', + phone: '387', + }, + { code: 'BB', label: 'Barbados', phone: '1-246' }, + { code: 'BD', label: 'Bangladesh', phone: '880' }, + { code: 'BE', label: 'Belgium', phone: '32' }, + { code: 'BF', label: 'Burkina Faso', phone: '226' }, + { code: 'BG', label: 'Bulgaria', phone: '359' }, + { code: 'BH', label: 'Bahrain', phone: '973' }, + { code: 'BI', label: 'Burundi', phone: '257' }, + { code: 'BJ', label: 'Benin', phone: '229' }, + { code: 'BL', label: 'Saint Barthelemy', phone: '590' }, + { code: 'BM', label: 'Bermuda', phone: '1-441' }, + { code: 'BN', label: 'Brunei Darussalam', phone: '673' }, + { code: 'BO', label: 'Bolivia', phone: '591' }, + { code: 'BR', label: 'Brazil', phone: '55' }, + { code: 'BS', label: 'Bahamas', phone: '1-242' }, + { code: 'BT', label: 'Bhutan', phone: '975' }, + { code: 'BV', label: 'Bouvet Island', phone: '47' }, + { code: 'BW', label: 'Botswana', phone: '267' }, + { code: 'BY', label: 'Belarus', phone: '375' }, + { code: 'BZ', label: 'Belize', phone: '501' }, + { + code: 'CA', + label: 'Canada', + phone: '1', + suggested: true, + }, + { + code: 'CC', + label: 'Cocos (Keeling) Islands', + phone: '61', + }, + { + code: 'CD', + label: 'Congo, Democratic Republic of the', + phone: '243', + }, + { + code: 'CF', + label: 'Central African Republic', + phone: '236', + }, + { + code: 'CG', + label: 'Congo, Republic of the', + phone: '242', + }, + { code: 'CH', label: 'Switzerland', phone: '41' }, + { code: 'CI', label: "Cote d'Ivoire", phone: '225' }, + { code: 'CK', label: 'Cook Islands', phone: '682' }, + { code: 'CL', label: 'Chile', phone: '56' }, + { code: 'CM', label: 'Cameroon', phone: '237' }, + { code: 'CN', label: 'China', phone: '86' }, + { code: 'CO', label: 'Colombia', phone: '57' }, + { code: 'CR', label: 'Costa Rica', phone: '506' }, + { code: 'CU', label: 'Cuba', phone: '53' }, + { code: 'CV', label: 'Cape Verde', phone: '238' }, + { code: 'CW', label: 'Curacao', phone: '599' }, + { code: 'CX', label: 'Christmas Island', phone: '61' }, + { code: 'CY', label: 'Cyprus', phone: '357' }, + { code: 'CZ', label: 'Czech Republic', phone: '420' }, + { + code: 'DE', + label: 'Germany', + phone: '49', + suggested: true, + }, + { code: 'DJ', label: 'Djibouti', phone: '253' }, + { code: 'DK', label: 'Denmark', phone: '45' }, + { code: 'DM', label: 'Dominica', phone: '1-767' }, + { + code: 'DO', + label: 'Dominican Republic', + phone: '1-809', + }, + { code: 'DZ', label: 'Algeria', phone: '213' }, + { code: 'EC', label: 'Ecuador', phone: '593' }, + { code: 'EE', label: 'Estonia', phone: '372' }, + { code: 'EG', label: 'Egypt', phone: '20' }, + { code: 'EH', label: 'Western Sahara', phone: '212' }, + { code: 'ER', label: 'Eritrea', phone: '291' }, + { code: 'ES', label: 'Spain', phone: '34' }, + { code: 'ET', label: 'Ethiopia', phone: '251' }, + { code: 'FI', label: 'Finland', phone: '358' }, + { code: 'FJ', label: 'Fiji', phone: '679' }, + { + code: 'FK', + label: 'Falkland Islands (Malvinas)', + phone: '500', + }, + { + code: 'FM', + label: 'Micronesia, Federated States of', + phone: '691', + }, + { code: 'FO', label: 'Faroe Islands', phone: '298' }, + { + code: 'FR', + label: 'France', + phone: '33', + suggested: true, + }, + { code: 'GA', label: 'Gabon', phone: '241' }, + { code: 'GB', label: 'United Kingdom', phone: '44' }, + { code: 'GD', label: 'Grenada', phone: '1-473' }, + { code: 'GE', label: 'Georgia', phone: '995' }, + { code: 'GF', label: 'French Guiana', phone: '594' }, + { code: 'GG', label: 'Guernsey', phone: '44' }, + { code: 'GH', label: 'Ghana', phone: '233' }, + { code: 'GI', label: 'Gibraltar', phone: '350' }, + { code: 'GL', label: 'Greenland', phone: '299' }, + { code: 'GM', label: 'Gambia', phone: '220' }, + { code: 'GN', label: 'Guinea', phone: '224' }, + { code: 'GP', label: 'Guadeloupe', phone: '590' }, + { code: 'GQ', label: 'Equatorial Guinea', phone: '240' }, + { code: 'GR', label: 'Greece', phone: '30' }, + { + code: 'GS', + label: 'South Georgia and the South Sandwich Islands', + phone: '500', + }, + { code: 'GT', label: 'Guatemala', phone: '502' }, + { code: 'GU', label: 'Guam', phone: '1-671' }, + { code: 'GW', label: 'Guinea-Bissau', phone: '245' }, + { code: 'GY', label: 'Guyana', phone: '592' }, + { code: 'HK', label: 'Hong Kong', phone: '852' }, + { + code: 'HM', + label: 'Heard Island and McDonald Islands', + phone: '672', + }, + { code: 'HN', label: 'Honduras', phone: '504' }, + { code: 'HR', label: 'Croatia', phone: '385' }, + { code: 'HT', label: 'Haiti', phone: '509' }, + { code: 'HU', label: 'Hungary', phone: '36' }, + { code: 'ID', label: 'Indonesia', phone: '62' }, + { code: 'IE', label: 'Ireland', phone: '353' }, + { code: 'IL', label: 'Israel', phone: '972' }, + { code: 'IM', label: 'Isle of Man', phone: '44' }, + { code: 'IN', label: 'India', phone: '91' }, + { + code: 'IO', + label: 'British Indian Ocean Territory', + phone: '246', + }, + { code: 'IQ', label: 'Iraq', phone: '964' }, + { + code: 'IR', + label: 'Iran, Islamic Republic of', + phone: '98', + }, + { code: 'IS', label: 'Iceland', phone: '354' }, + { code: 'IT', label: 'Italy', phone: '39' }, + { code: 'JE', label: 'Jersey', phone: '44' }, + { code: 'JM', label: 'Jamaica', phone: '1-876' }, + { code: 'JO', label: 'Jordan', phone: '962' }, + { + code: 'JP', + label: 'Japan', + phone: '81', + suggested: true, + }, + { code: 'KE', label: 'Kenya', phone: '254' }, + { code: 'KG', label: 'Kyrgyzstan', phone: '996' }, + { code: 'KH', label: 'Cambodia', phone: '855' }, + { code: 'KI', label: 'Kiribati', phone: '686' }, + { code: 'KM', label: 'Comoros', phone: '269' }, + { + code: 'KN', + label: 'Saint Kitts and Nevis', + phone: '1-869', + }, + { + code: 'KP', + label: "Korea, Democratic People's Republic of", + phone: '850', + }, + { code: 'KR', label: 'Korea, Republic of', phone: '82' }, + { code: 'KW', label: 'Kuwait', phone: '965' }, + { code: 'KY', label: 'Cayman Islands', phone: '1-345' }, + { code: 'KZ', label: 'Kazakhstan', phone: '7' }, + { + code: 'LA', + label: "Lao People's Democratic Republic", + phone: '856', + }, + { code: 'LB', label: 'Lebanon', phone: '961' }, + { code: 'LC', label: 'Saint Lucia', phone: '1-758' }, + { code: 'LI', label: 'Liechtenstein', phone: '423' }, + { code: 'LK', label: 'Sri Lanka', phone: '94' }, + { code: 'LR', label: 'Liberia', phone: '231' }, + { code: 'LS', label: 'Lesotho', phone: '266' }, + { code: 'LT', label: 'Lithuania', phone: '370' }, + { code: 'LU', label: 'Luxembourg', phone: '352' }, + { code: 'LV', label: 'Latvia', phone: '371' }, + { code: 'LY', label: 'Libya', phone: '218' }, + { code: 'MA', label: 'Morocco', phone: '212' }, + { code: 'MC', label: 'Monaco', phone: '377' }, + { + code: 'MD', + label: 'Moldova, Republic of', + phone: '373', + }, + { code: 'ME', label: 'Montenegro', phone: '382' }, + { + code: 'MF', + label: 'Saint Martin (French part)', + phone: '590', + }, + { code: 'MG', label: 'Madagascar', phone: '261' }, + { code: 'MH', label: 'Marshall Islands', phone: '692' }, + { + code: 'MK', + label: 'Macedonia, the Former Yugoslav Republic of', + phone: '389', + }, + { code: 'ML', label: 'Mali', phone: '223' }, + { code: 'MM', label: 'Myanmar', phone: '95' }, + { code: 'MN', label: 'Mongolia', phone: '976' }, + { code: 'MO', label: 'Macao', phone: '853' }, + { + code: 'MP', + label: 'Northern Mariana Islands', + phone: '1-670', + }, + { code: 'MQ', label: 'Martinique', phone: '596' }, + { code: 'MR', label: 'Mauritania', phone: '222' }, + { code: 'MS', label: 'Montserrat', phone: '1-664' }, + { code: 'MT', label: 'Malta', phone: '356' }, + { code: 'MU', label: 'Mauritius', phone: '230' }, + { code: 'MV', label: 'Maldives', phone: '960' }, + { code: 'MW', label: 'Malawi', phone: '265' }, + { code: 'MX', label: 'Mexico', phone: '52' }, + { code: 'MY', label: 'Malaysia', phone: '60' }, + { code: 'MZ', label: 'Mozambique', phone: '258' }, + { code: 'NA', label: 'Namibia', phone: '264' }, + { code: 'NC', label: 'New Caledonia', phone: '687' }, + { code: 'NE', label: 'Niger', phone: '227' }, + { code: 'NF', label: 'Norfolk Island', phone: '672' }, + { code: 'NG', label: 'Nigeria', phone: '234' }, + { code: 'NI', label: 'Nicaragua', phone: '505' }, + { code: 'NL', label: 'Netherlands', phone: '31' }, + { code: 'NO', label: 'Norway', phone: '47' }, + { code: 'NP', label: 'Nepal', phone: '977' }, + { code: 'NR', label: 'Nauru', phone: '674' }, + { code: 'NU', label: 'Niue', phone: '683' }, + { code: 'NZ', label: 'New Zealand', phone: '64' }, + { code: 'OM', label: 'Oman', phone: '968' }, + { code: 'PA', label: 'Panama', phone: '507' }, + { code: 'PE', label: 'Peru', phone: '51' }, + { code: 'PF', label: 'French Polynesia', phone: '689' }, + { code: 'PG', label: 'Papua New Guinea', phone: '675' }, + { code: 'PH', label: 'Philippines', phone: '63' }, + { code: 'PK', label: 'Pakistan', phone: '92' }, + { code: 'PL', label: 'Poland', phone: '48' }, + { + code: 'PM', + label: 'Saint Pierre and Miquelon', + phone: '508', + }, + { code: 'PN', label: 'Pitcairn', phone: '870' }, + { code: 'PR', label: 'Puerto Rico', phone: '1' }, + { + code: 'PS', + label: 'Palestine, State of', + phone: '970', + }, + { code: 'PT', label: 'Portugal', phone: '351' }, + { code: 'PW', label: 'Palau', phone: '680' }, + { code: 'PY', label: 'Paraguay', phone: '595' }, + { code: 'QA', label: 'Qatar', phone: '974' }, + { code: 'RE', label: 'Reunion', phone: '262' }, + { code: 'RO', label: 'Romania', phone: '40' }, + { code: 'RS', label: 'Serbia', phone: '381' }, + { code: 'RU', label: 'Russian Federation', phone: '7' }, + { code: 'RW', label: 'Rwanda', phone: '250' }, + { code: 'SA', label: 'Saudi Arabia', phone: '966' }, + { code: 'SB', label: 'Solomon Islands', phone: '677' }, + { code: 'SC', label: 'Seychelles', phone: '248' }, + { code: 'SD', label: 'Sudan', phone: '249' }, + { code: 'SE', label: 'Sweden', phone: '46' }, + { code: 'SG', label: 'Singapore', phone: '65' }, + { code: 'SH', label: 'Saint Helena', phone: '290' }, + { code: 'SI', label: 'Slovenia', phone: '386' }, + { + code: 'SJ', + label: 'Svalbard and Jan Mayen', + phone: '47', + }, + { code: 'SK', label: 'Slovakia', phone: '421' }, + { code: 'SL', label: 'Sierra Leone', phone: '232' }, + { code: 'SM', label: 'San Marino', phone: '378' }, + { code: 'SN', label: 'Senegal', phone: '221' }, + { code: 'SO', label: 'Somalia', phone: '252' }, + { code: 'SR', label: 'Suriname', phone: '597' }, + { code: 'SS', label: 'South Sudan', phone: '211' }, + { + code: 'ST', + label: 'Sao Tome and Principe', + phone: '239', + }, + { code: 'SV', label: 'El Salvador', phone: '503' }, + { + code: 'SX', + label: 'Sint Maarten (Dutch part)', + phone: '1-721', + }, + { + code: 'SY', + label: 'Syrian Arab Republic', + phone: '963', + }, + { code: 'SZ', label: 'Swaziland', phone: '268' }, + { + code: 'TC', + label: 'Turks and Caicos Islands', + phone: '1-649', + }, + { code: 'TD', label: 'Chad', phone: '235' }, + { + code: 'TF', + label: 'French Southern Territories', + phone: '262', + }, + { code: 'TG', label: 'Togo', phone: '228' }, + { code: 'TH', label: 'Thailand', phone: '66' }, + { code: 'TJ', label: 'Tajikistan', phone: '992' }, + { code: 'TK', label: 'Tokelau', phone: '690' }, + { code: 'TL', label: 'Timor-Leste', phone: '670' }, + { code: 'TM', label: 'Turkmenistan', phone: '993' }, + { code: 'TN', label: 'Tunisia', phone: '216' }, + { code: 'TO', label: 'Tonga', phone: '676' }, + { code: 'TR', label: 'Turkey', phone: '90' }, + { + code: 'TT', + label: 'Trinidad and Tobago', + phone: '1-868', + }, + { code: 'TV', label: 'Tuvalu', phone: '688' }, + { + code: 'TW', + label: 'Taiwan, Province of China', + phone: '886', + }, + { + code: 'TZ', + label: 'United Republic of Tanzania', + phone: '255', + }, + { code: 'UA', label: 'Ukraine', phone: '380' }, + { code: 'UG', label: 'Uganda', phone: '256' }, + { + code: 'US', + label: 'United States', + phone: '1', + suggested: true, + }, + { code: 'UY', label: 'Uruguay', phone: '598' }, + { code: 'UZ', label: 'Uzbekistan', phone: '998' }, + { + code: 'VA', + label: 'Holy See (Vatican City State)', + phone: '379', + }, + { + code: 'VC', + label: 'Saint Vincent and the Grenadines', + phone: '1-784', + }, + { code: 'VE', label: 'Venezuela', phone: '58' }, + { + code: 'VG', + label: 'British Virgin Islands', + phone: '1-284', + }, + { + code: 'VI', + label: 'US Virgin Islands', + phone: '1-340', + }, + { code: 'VN', label: 'Vietnam', phone: '84' }, + { code: 'VU', label: 'Vanuatu', phone: '678' }, + { code: 'WF', label: 'Wallis and Futuna', phone: '681' }, + { code: 'WS', label: 'Samoa', phone: '685' }, + { code: 'XK', label: 'Kosovo', phone: '383' }, + { code: 'YE', label: 'Yemen', phone: '967' }, + { code: 'YT', label: 'Mayotte', phone: '262' }, + { code: 'ZA', label: 'South Africa', phone: '27' }, + { code: 'ZM', label: 'Zambia', phone: '260' }, + { code: 'ZW', label: 'Zimbabwe', phone: '263' }, +]; diff --git a/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx.preview new file mode 100644 index 00000000000000..ec1c23c1a6d76d --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectRichOptions.tsx.preview @@ -0,0 +1,14 @@ + + {countries.map((c) => ( + + {`Flag + {c.label} ({c.code}) +{c.phone} + + ))} + \ No newline at end of file diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.js b/docs/src/pages/components/selects/UnstyledSelectSimple.js new file mode 100644 index 00000000000000..35dd64bdf590e5 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.js @@ -0,0 +1,110 @@ +import * as React from 'react'; +import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const components = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}); + +export default function UnstyledSelectSimple() { + return ( + + Ten + Twenty + Thirty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx new file mode 100644 index 00000000000000..4168de092201e5 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx @@ -0,0 +1,118 @@ +import * as React from 'react'; +import SelectUnstyled, { + SelectUnstyledProps, + selectUnstyledClasses, +} from '@mui/base/SelectUnstyled'; +import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'; +import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { styled } from '@mui/system'; + +const StyledButton = styled('button')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + min-height: calc(1.5em + 22px); + min-width: 200px; + background: #fff; + border: 1px solid #ccc; + border-radius: 0.75em; + margin: 0.5em; + padding: 10px; + text-align: left; + line-height: 1.5; + color: #000; + + &.${selectUnstyledClasses.focusVisible} { + outline: 4px solid rgba(100, 100, 100, 0.3); + } + + &.${selectUnstyledClasses.expanded} { + border-radius: 0.75em 0.75em 0 0; + + &::after { + content: '▴'; + } + } + + &::after { + content: '▾'; + float: right; + } +`; + +const StyledListbox = styled('ul')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 0; + margin: 0; + background-color: #fff; + min-width: 200px; + border: 1px solid #ccc; + border-top: none; + color: #000; +`; + +const StyledOption = styled(OptionUnstyled)` + list-style: none; + padding: 4px 10px; + margin: 0; + border-bottom: 1px solid #ddd; + cursor: default; + + &:last-of-type { + border-bottom: none; + } + + &.${optionUnstyledClasses.disabled} { + color: #888; + } + + &.${optionUnstyledClasses.selected} { + background-color: rgba(25, 118, 210, 0.08); + } + + &.${optionUnstyledClasses.highlighted} { + background-color: #16d; + color: #fff; + } + + &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} { + background-color: #05e; + color: #fff; + } + + &:hover:not(.${optionUnstyledClasses.disabled}) { + background-color: #39e; + } +`; + +const StyledPopper = styled(PopperUnstyled)` + z-index: 1; +`; + +const CustomSelect = React.forwardRef(function CustomSelect( + props: SelectUnstyledProps, + ref: React.ForwardedRef, +) { + const components: SelectUnstyledProps['components'] = { + Root: StyledButton, + Listbox: StyledListbox, + Popper: StyledPopper, + ...props.components, + }; + + return ; +}) as ( + props: SelectUnstyledProps & React.RefAttributes, +) => JSX.Element; + +export default function UnstyledSelectSimple() { + return ( + + Ten + Twenty + Thirty + + ); +} diff --git a/docs/src/pages/components/selects/UnstyledSelectSimple.tsx.preview b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx.preview new file mode 100644 index 00000000000000..d2b6f081a69b69 --- /dev/null +++ b/docs/src/pages/components/selects/UnstyledSelectSimple.tsx.preview @@ -0,0 +1,5 @@ + + Ten + Twenty + Thirty + \ No newline at end of file diff --git a/docs/src/pages/components/selects/UseSelect.js b/docs/src/pages/components/selects/UseSelect.js new file mode 100644 index 00000000000000..b6949b99e992fa --- /dev/null +++ b/docs/src/pages/components/selects/UseSelect.js @@ -0,0 +1,127 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { useSelect } from '@mui/base'; +import { styled } from '@mui/system'; + +const Root = styled('div')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + position: relative; + display: inline-block; + vertical-align: baseline; + color: #000; +`; + +const Toggle = styled('div')` + min-width: 150px; + min-height: calc(1.5em + 10px); + padding: 5px; + background-color: var(--color, #333); + box-shadow: 0 5px 13px -3px var(--color, #333); + display: inline-flex; + align-items: center; + justify-content: center; + color: #fff; + cursor: default; + transition: background-color 0.2s ease, box-shadow 0.2s ease; + + & .placeholder { + opacity: 0.8; + } +`; + +const Listbox = styled('ul')` + background: #eee; + list-style: none; + padding: 0; + margin: 10px 0 0 0; + position: absolute; + height: auto; + transition: opacity 0.1s ease; + width: 100%; + box-shadow: 0 5px 13px -3px #333; + + &.hidden { + opacity: 0; + visibility: hidden; + transition: opacity 0.4s 0.5s ease, visibility 0.4s 0.5s step-end; + } + + & > li { + padding: 5px; + + &:hover { + background: #ccc; + } + + &[aria-selected='true'] { + background: #ccc; + } + } +`; + +function CustomSelect({ options, placeholder }) { + const listboxRef = React.useRef(null); + const [listboxVisible, setListboxVisible] = React.useState(false); + + const { getButtonProps, getListboxProps, getOptionProps, value } = useSelect({ + listboxRef, + options, + }); + + React.useEffect(() => { + if (listboxVisible) { + listboxRef.current?.focus(); + } + }, [listboxVisible]); + + return ( + setListboxVisible(true)} + onMouseOut={() => setListboxVisible(false)} + onFocus={() => setListboxVisible(true)} + onBlur={() => setListboxVisible(false)} + > + + {value ?? {placeholder ?? ' '}} + + + {options.map((option) => ( +
  • + {option.label} +
    • + ))} +     +     + ); +} + +CustomSelect.propTypes = { + options: PropTypes.arrayOf( + PropTypes.shape({ + disabled: PropTypes.bool, + label: PropTypes.node, + value: PropTypes.string.isRequired, + }), + ).isRequired, + placeholder: PropTypes.string, +}; + +const options = [ + { + label: 'Red', + value: '#D32F2F', + }, + { + label: 'Green', + value: '#4CAF50', + }, + { + label: 'Blue', + value: '#2196F3', + }, +]; + +export default function UseSelect() { + return ; +} diff --git a/docs/src/pages/components/selects/UseSelect.tsx b/docs/src/pages/components/selects/UseSelect.tsx new file mode 100644 index 00000000000000..0ceaef16a6f8e4 --- /dev/null +++ b/docs/src/pages/components/selects/UseSelect.tsx @@ -0,0 +1,120 @@ +import * as React from 'react'; +import { useSelect, SelectOption } from '@mui/base'; +import { styled } from '@mui/system'; + +const Root = styled('div')` + font-family: IBM Plex Sans, sans-serif; + font-size: 0.875rem; + position: relative; + display: inline-block; + vertical-align: baseline; + color: #000; +`; + +const Toggle = styled('div')` + min-width: 150px; + min-height: calc(1.5em + 10px); + padding: 5px; + background-color: var(--color, #333); + box-shadow: 0 5px 13px -3px var(--color, #333); + display: inline-flex; + align-items: center; + justify-content: center; + color: #fff; + cursor: default; + transition: background-color 0.2s ease, box-shadow 0.2s ease; + + & .placeholder { + opacity: 0.8; + } +`; + +const Listbox = styled('ul')` + background: #eee; + list-style: none; + padding: 0; + margin: 10px 0 0 0; + position: absolute; + height: auto; + transition: opacity 0.1s ease; + width: 100%; + box-shadow: 0 5px 13px -3px #333; + + &.hidden { + opacity: 0; + visibility: hidden; + transition: opacity 0.4s 0.5s ease, visibility 0.4s 0.5s step-end; + } + + & > li { + padding: 5px; + + &:hover { + background: #ccc; + } + + &[aria-selected='true'] { + background: #ccc; + } + } +`; + +interface Props { + options: SelectOption[]; + placeholder?: string; +} + +function CustomSelect({ options, placeholder }: Props) { + const listboxRef = React.useRef(null); + const [listboxVisible, setListboxVisible] = React.useState(false); + + const { getButtonProps, getListboxProps, getOptionProps, value } = useSelect({ + listboxRef, + options, + }); + + React.useEffect(() => { + if (listboxVisible) { + listboxRef.current?.focus(); + } + }, [listboxVisible]); + + return ( + setListboxVisible(true)} + onMouseOut={() => setListboxVisible(false)} + onFocus={() => setListboxVisible(true)} + onBlur={() => setListboxVisible(false)} + > + + {value ?? {placeholder ?? ' '}} + + + {options.map((option) => ( +
  • + {option.label} +
    • + ))} +     +     + ); +} + +const options = [ + { + label: 'Red', + value: '#D32F2F', + }, + { + label: 'Green', + value: '#4CAF50', + }, + { + label: 'Blue', + value: '#2196F3', + }, +]; + +export default function UseSelect() { + return ; +} diff --git a/docs/src/pages/components/selects/UseSelect.tsx.preview b/docs/src/pages/components/selects/UseSelect.tsx.preview new file mode 100644 index 00000000000000..f9beace90368f3 --- /dev/null +++ b/docs/src/pages/components/selects/UseSelect.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-pt.md b/docs/src/pages/components/selects/selects-pt.md index 783e921d9321f6..238641e6703897 100644 --- a/docs/src/pages/components/selects/selects-pt.md +++ b/docs/src/pages/components/selects/selects-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Seleção components: Select, NativeSelect -githubLabel: 'component: Select' +githubLabel: 'component: select' --- # Seleção @@ -62,7 +62,7 @@ O primeiro passo é estilizar o componente `InputBase`. Uma vez estilizado, voc {{"demo": "pages/components/selects/CustomizedSelects.js"}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/select/). +🎨 Se você está procurando inspiração, você pode verificar [os exemplos de customização de MUI Treasury](https://mui-treasury.com/styles/select/). ## Seleção Aberta Controlada diff --git a/docs/src/pages/components/selects/selects-zh.md b/docs/src/pages/components/selects/selects-zh.md index cdf5d17d16a10a..41535f4f283af1 100644 --- a/docs/src/pages/components/selects/selects-zh.md +++ b/docs/src/pages/components/selects/selects-zh.md @@ -1,7 +1,7 @@ --- title: React Select（选择器）组件 components: Select, NativeSelect -githubLabel: 'component: Select' +githubLabel: 'component: select' --- # Select 选择属性 diff --git a/docs/src/pages/components/selects/selects.md b/docs/src/pages/components/selects/selects.md index e380db15f059ae..140693c6dd4a05 100644 --- a/docs/src/pages/components/selects/selects.md +++ b/docs/src/pages/components/selects/selects.md @@ -1,7 +1,7 @@ --- title: React Select component -components: Select, NativeSelect -githubLabel: 'component: Select' +components: Select, NativeSelect, SelectUnstyled, MultiSelectUnstyled, OptionUnstyled, OptionGroupUnstyled +githubLabel: 'component: select' --- # Select @@ -99,7 +99,9 @@ Like with the single selection, you can pull out the new value by accessing `eve {{"demo": "pages/components/selects/MultipleSelectNative.js"}} -## Controlled open select +## Controlling the open state + +You can control the open state of the select with the `open` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultOpen` prop. {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} @@ -147,3 +149,84 @@ For a [native select](#native-select), you should mention a label by giving the ``` + +## Unstyled + +The Select also comes with an unstyled version. +It's ideal for doing heavy customizations and minimizing bundle size. + +### Unstyled component + +```jsx +import SelectUnstyled from '@mui/base/SelectUnstyled'; +``` + +#### Basic usage + +{{"demo": "pages/components/selects/UnstyledSelectSimple.js"}} + +The `SelectUnstyled` is a component that accepts generic props. +Due to Typescript limitations, this may cause unexpected behavior when wrapping the component in `forwardRef` (or other higher-order components). +In such cases, the generic argument will be defaulted to `unknown` and type suggestions will be incomplete. +To avoid this, manually cast the resulting component to the correct type (as shown above). + +The rest of the demos below will not use `forwardRef` for brevity. + +#### Controlled select + +The SelectUnstyled can be used as either uncontrolled (as shown in the demo above) or controlled component. + +{{"demo": "pages/components/selects/UnstyledSelectControlled.js"}} + +#### Usage with object values + +The unstyled select may be used with non-string values. + +{{"demo": "pages/components/selects/UnstyledSelectObjectValues.js"}} + +#### Customizing the selected value appearance + +It is possible to customize the selected value display by providing a function to the `renderValue` prop. +The element returned by this function will be rendered inside the select's button. + +{{"demo": "pages/components/selects/UnstyledSelectCustomRenderValue.js"}} + +#### Customizing the options' appearance + +Options don't have to be plain strings. +You can include custom elements to be rendered inside the listbox. + +{{"demo": "pages/components/selects/UnstyledSelectRichOptions.js"}} + +#### Grouping + +Options can be grouped, similarly to the how the native `select` element works. +Unlike the native `select`, however, the groups can be nested. + +Place the `Option` components inside `OptionGroup` to achieve this. + +{{"demo": "pages/components/selects/UnstyledSelectGrouping.js"}} + +#### Multiselect + +To be able to select multiple options at once, use the `MultiSelectUnstyled` component. + +```js +import { MultiSelectUnstyled } from '@mui/base/SelectUnstyled'; +``` + +{{"demo": "pages/components/selects/UnstyledSelectMultiple.js"}} + +### useSelect hook + +```js +import { useSelect } from '@mui/base/SelectUnstyled'; +``` + +If you need to use Select's functionality in another component, you can use the `useSelect` hook. +It enables maximal customizability at the cost of being low-level. + +The following example shows a select that opens when hovered over or focused. +It can be controlled by a mouse/touch or a keyboard. + +{{"demo": "pages/components/selects/UseSelect.js"}} diff --git a/docs/src/pages/components/skeleton/skeleton-pt.md b/docs/src/pages/components/skeleton/skeleton-pt.md index 2a23f635f883eb..55369249bd6d57 100644 --- a/docs/src/pages/components/skeleton/skeleton-pt.md +++ b/docs/src/pages/components/skeleton/skeleton-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Skeleton components: Skeleton -githubLabel: 'component: Skeleton' +githubLabel: 'component: skeleton' --- # Skeleton diff --git a/docs/src/pages/components/skeleton/skeleton-zh.md b/docs/src/pages/components/skeleton/skeleton-zh.md index cd37ef01c366a0..eb6af18ea4a02f 100644 --- a/docs/src/pages/components/skeleton/skeleton-zh.md +++ b/docs/src/pages/components/skeleton/skeleton-zh.md @@ -1,7 +1,7 @@ --- title: React Skeleton（骨架屏）组件 components: Skeleton -githubLabel: 'component: Skeleton' +githubLabel: 'component: skeleton' --- # Skeleton 骨架屏 diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index 1465c809b1b110..b10133a91d55c8 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -1,7 +1,7 @@ --- title: React Skeleton component components: Skeleton -githubLabel: 'component: Skeleton' +githubLabel: 'component: skeleton' --- # Skeleton diff --git a/docs/src/pages/components/slider/slider-pt.md b/docs/src/pages/components/slider/slider-pt.md index a93c9fe977c11f..8e4b352c7e2cba 100644 --- a/docs/src/pages/components/slider/slider-pt.md +++ b/docs/src/pages/components/slider/slider-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Slider components: Slider, SliderUnstyled -githubLabel: 'component: Slider' +githubLabel: 'component: slider' materialDesign: https://material.io/components/sliders waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' --- diff --git a/docs/src/pages/components/slider/slider-zh.md b/docs/src/pages/components/slider/slider-zh.md index 521b0cbc5bec95..7f0e73c3490bbf 100644 --- a/docs/src/pages/components/slider/slider-zh.md +++ b/docs/src/pages/components/slider/slider-zh.md @@ -1,7 +1,7 @@ --- title: React Slider（滑块）组件 components: Slider, SliderUnstyled -githubLabel: 'component: Slider' +githubLabel: 'component: slider' materialDesign: https://material.io/components/sliders waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' --- diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md index ee37f44d117b4c..b25687129b2f46 100644 --- a/docs/src/pages/components/slider/slider.md +++ b/docs/src/pages/components/slider/slider.md @@ -1,7 +1,7 @@ --- title: React Slider component components: Slider, SliderUnstyled -githubLabel: 'component: Slider' +githubLabel: 'component: slider' materialDesign: https://material.io/components/sliders waiAria: https://www.w3.org/TR/wai-aria-practices/#slider --- diff --git a/docs/src/pages/components/snackbars/snackbars-pt.md b/docs/src/pages/components/snackbars/snackbars-pt.md index 515fa2bc990358..86a73ec04405b2 100644 --- a/docs/src/pages/components/snackbars/snackbars-pt.md +++ b/docs/src/pages/components/snackbars/snackbars-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Snackbar components: Snackbar, SnackbarContent -githubLabel: 'component: Snackbar' +githubLabel: 'component: snackbar' materialDesign: https://material.io/components/snackbars waiAria: 'https://www.w3.org/TR/wai-aria-1.1/#alert' --- diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md index 00ea459d42465c..2f8561378576cf 100644 --- a/docs/src/pages/components/snackbars/snackbars-zh.md +++ b/docs/src/pages/components/snackbars/snackbars-zh.md @@ -1,7 +1,7 @@ --- title: React Snackbar（消息条）组件 components: Snackbar, SnackbarContent -githubLabel: 'component: Snackbar' +githubLabel: 'component: snackbar' materialDesign: https://material.io/components/snackbars waiAria: 'https://www.w3.org/TR/wai-aria-1.1/#alert' --- diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md index b57aacb7d4ca50..da1b700d80993f 100644 --- a/docs/src/pages/components/snackbars/snackbars.md +++ b/docs/src/pages/components/snackbars/snackbars.md @@ -1,7 +1,7 @@ --- title: React Snackbar component components: Snackbar, SnackbarContent -githubLabel: 'component: Snackbar' +githubLabel: 'component: snackbar' materialDesign: https://material.io/components/snackbars waiAria: https://www.w3.org/TR/wai-aria-1.1/#alert --- @@ -17,9 +17,7 @@ They may contain a text action, but no icons. You can use them to display notifi {{"component": "modules/components/ComponentLinkHeader.js"}} -#### Frequency - -Only one snackbar may be displayed at a time. +**Frequency**: Only one snackbar may be displayed at a time. ## Simple snackbars diff --git a/docs/src/pages/components/speed-dial/speed-dial-pt.md b/docs/src/pages/components/speed-dial/speed-dial-pt.md index 5ef81a7a6bcaba..d290b196dc590f 100644 --- a/docs/src/pages/components/speed-dial/speed-dial-pt.md +++ b/docs/src/pages/components/speed-dial/speed-dial-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Acesso Rápido components: SpeedDial, SpeedDialAction, SpeedDialIcon -githubLabel: 'component: SpeedDial' +githubLabel: 'component: speed dial' materialDesign: 'https://material.io/components/buttons-floating-action-button#types-of-transitions' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#menubutton' --- diff --git a/docs/src/pages/components/speed-dial/speed-dial-zh.md b/docs/src/pages/components/speed-dial/speed-dial-zh.md index 9dfe7d47b7bf6c..791d35d955342d 100644 --- a/docs/src/pages/components/speed-dial/speed-dial-zh.md +++ b/docs/src/pages/components/speed-dial/speed-dial-zh.md @@ -1,7 +1,7 @@ --- title: React Speed Dial（快速拨号）组件 components: SpeedDial, SpeedDialAction, SpeedDialIcon -githubLabel: 'component: SpeedDial' +githubLabel: 'component: speed dial' materialDesign: 'https://material.io/components/buttons-floating-action-button#types-of-transitions' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#menubutton' --- diff --git a/docs/src/pages/components/speed-dial/speed-dial.md b/docs/src/pages/components/speed-dial/speed-dial.md index d0a1d63c19f732..24dd2193ea229e 100644 --- a/docs/src/pages/components/speed-dial/speed-dial.md +++ b/docs/src/pages/components/speed-dial/speed-dial.md @@ -1,7 +1,7 @@ --- title: React Speed Dial component components: SpeedDial, SpeedDialAction, SpeedDialIcon -githubLabel: 'component: SpeedDial' +githubLabel: 'component: speed dial' materialDesign: https://material.io/components/buttons-floating-action-button#types-of-transitions waiAria: https://www.w3.org/TR/wai-aria-practices/#menubutton --- diff --git a/docs/src/pages/components/steppers/steppers-pt.md b/docs/src/pages/components/steppers/steppers-pt.md index 503de84bb7b9a3..1686ff925ed791 100644 --- a/docs/src/pages/components/steppers/steppers-pt.md +++ b/docs/src/pages/components/steppers/steppers-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Assistente components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper -githubLabel: 'component: Stepper' +githubLabel: 'component: stepper' materialDesign: https://material.io/archive/guidelines/components/steppers.html --- diff --git a/docs/src/pages/components/steppers/steppers-zh.md b/docs/src/pages/components/steppers/steppers-zh.md index ad74024c4c1fe7..87c916958ba3af 100644 --- a/docs/src/pages/components/steppers/steppers-zh.md +++ b/docs/src/pages/components/steppers/steppers-zh.md @@ -1,7 +1,7 @@ --- title: React Stepper（步骤条）组件 components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper -githubLabel: 'component: Stepper' +githubLabel: 'component: stepper' materialDesign: https://material.io/archive/guidelines/components/steppers.html --- diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md index b32d38acc61e68..fa9432e80235ce 100644 --- a/docs/src/pages/components/steppers/steppers.md +++ b/docs/src/pages/components/steppers/steppers.md @@ -1,7 +1,7 @@ --- title: React Stepper component components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper -githubLabel: 'component: Stepper' +githubLabel: 'component: stepper' materialDesign: https://material.io/archive/guidelines/components/steppers.html --- diff --git a/docs/src/pages/components/switches/switches-pt.md b/docs/src/pages/components/switches/switches-pt.md index 70fb2f40bde3ff..75771b50e78d56 100644 --- a/docs/src/pages/components/switches/switches-pt.md +++ b/docs/src/pages/components/switches/switches-pt.md @@ -1,7 +1,12 @@ --- title: Componente React Interruptor +<<<<<<< HEAD components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel githubLabel: 'component: Switch' +======= +components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel, SwitchUnstyled +githubLabel: 'component: switch' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: 'https://material.io/components/selection-controls#switches' --- diff --git a/docs/src/pages/components/switches/switches-zh.md b/docs/src/pages/components/switches/switches-zh.md index ca3cb04ee46044..dda8cd163a4a4c 100644 --- a/docs/src/pages/components/switches/switches-zh.md +++ b/docs/src/pages/components/switches/switches-zh.md @@ -1,7 +1,12 @@ --- title: React Switch（开关）组件 +<<<<<<< HEAD components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel githubLabel: 'component: Switch' +======= +components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel, SwitchUnstyled +githubLabel: 'component: switch' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: 'https://material.io/components/selection-controls#switches' --- diff --git a/docs/src/pages/components/switches/switches.md b/docs/src/pages/components/switches/switches.md index c3acf0d54e92b8..fa26cb928052b4 100644 --- a/docs/src/pages/components/switches/switches.md +++ b/docs/src/pages/components/switches/switches.md @@ -1,7 +1,7 @@ --- title: React Switch component components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel, SwitchUnstyled -githubLabel: 'component: Switch' +githubLabel: 'component: switch' materialDesign: https://material.io/components/selection-controls#switches --- diff --git a/docs/src/pages/components/tables/DataTable.js b/docs/src/pages/components/tables/DataTable.js index ea9a337e43ed7b..79e22c9ddb4ffd 100644 --- a/docs/src/pages/components/tables/DataTable.js +++ b/docs/src/pages/components/tables/DataTable.js @@ -18,9 +18,7 @@ const columns = [ sortable: false, width: 160, valueGetter: (params) => - `${params.getValue(params.id, 'firstName') || ''} ${ - params.getValue(params.id, 'lastName') || '' - }`, + `${params.row.firstName || ''} ${params.row.lastName || ''}`, }, ]; diff --git a/docs/src/pages/components/tables/DataTable.tsx b/docs/src/pages/components/tables/DataTable.tsx index 987475e4c261e4..c7b92c0b8dd8d9 100644 --- a/docs/src/pages/components/tables/DataTable.tsx +++ b/docs/src/pages/components/tables/DataTable.tsx @@ -18,9 +18,7 @@ const columns: GridColDef[] = [ sortable: false, width: 160, valueGetter: (params: GridValueGetterParams) => - `${params.getValue(params.id, 'firstName') || ''} ${ - params.getValue(params.id, 'lastName') || '' - }`, + `${params.row.firstName || ''} ${params.row.lastName || ''}`, }, ]; diff --git a/docs/src/pages/components/tables/tables-pt.md b/docs/src/pages/components/tables/tables-pt.md index 70531b4c95d945..027d77736b05e3 100644 --- a/docs/src/pages/components/tables/tables-pt.md +++ b/docs/src/pages/components/tables/tables-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Tabela components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TablePaginationUnstyled -githubLabel: 'component: Table' +githubLabel: 'component: table' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#table' materialDesign: https://material.io/components/data-tables --- diff --git a/docs/src/pages/components/tables/tables-zh.md b/docs/src/pages/components/tables/tables-zh.md index d427666e2a7a21..20b5055b2b7e5b 100644 --- a/docs/src/pages/components/tables/tables-zh.md +++ b/docs/src/pages/components/tables/tables-zh.md @@ -1,7 +1,7 @@ --- title: React Table（表格）组件 components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TablePaginationUnstyled -githubLabel: 'component: Table' +githubLabel: 'component: table' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#table' materialDesign: https://material.io/components/data-tables --- diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md index af6fe32d2f6f25..cb8bfb2a0c6727 100644 --- a/docs/src/pages/components/tables/tables.md +++ b/docs/src/pages/components/tables/tables.md @@ -1,7 +1,7 @@ --- title: React Table component components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TablePaginationUnstyled -githubLabel: 'component: Table' +githubLabel: 'component: table' waiAria: https://www.w3.org/TR/wai-aria-practices/#table materialDesign: https://material.io/components/data-tables --- @@ -126,7 +126,7 @@ If you would like to use an unstyled Table, you can use the primitive elements a {{"demo": "pages/components/tables/TableUnstyled.js"}} -#### Customized look and feel +### Customized look and feel {{"demo": "pages/components/tables/TableCustomized.js"}} diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.js b/docs/src/pages/components/tabs/UnstyledTabsCustomized.js index e85a02b712ef41..4f7b16d4420c98 100644 --- a/docs/src/pages/components/tabs/UnstyledTabsCustomized.js +++ b/docs/src/pages/components/tabs/UnstyledTabsCustomized.js @@ -38,10 +38,11 @@ const Tab = styled(TabUnstyled)` background-color: ${blue[400]}; } - &.${buttonUnstyledClasses.focusVisible} { + &:focus { color: #fff; - outline: none; - background-color: ${blue[200]}; + border-radius: 3px; + outline: 2px solid ${blue[200]}; + outline-offset: 2px; } &.${tabUnstyledClasses.selected} { diff --git a/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx b/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx index e85a02b712ef41..4f7b16d4420c98 100644 --- a/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx +++ b/docs/src/pages/components/tabs/UnstyledTabsCustomized.tsx @@ -38,10 +38,11 @@ const Tab = styled(TabUnstyled)` background-color: ${blue[400]}; } - &.${buttonUnstyledClasses.focusVisible} { + &:focus { color: #fff; - outline: none; - background-color: ${blue[200]}; + border-radius: 3px; + outline: 2px solid ${blue[200]}; + outline-offset: 2px; } &.${tabUnstyledClasses.selected} { diff --git a/docs/src/pages/components/tabs/tabs-pt.md b/docs/src/pages/components/tabs/tabs-pt.md index e50898e178c11e..c7cbbe67b6887a 100644 --- a/docs/src/pages/components/tabs/tabs-pt.md +++ b/docs/src/pages/components/tabs/tabs-pt.md @@ -1,7 +1,7 @@ --- title: Componente React Abas components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled -githubLabel: 'component: Tabs' +githubLabel: 'component: tabs' materialDesign: https://material.io/components/tabs waiAria: 'https://www.w3.org/TR/wai-aria-practices/#tabpanel' --- diff --git a/docs/src/pages/components/tabs/tabs-zh.md b/docs/src/pages/components/tabs/tabs-zh.md index c1ac4b3c9d6bd0..1ae0fe18545142 100644 --- a/docs/src/pages/components/tabs/tabs-zh.md +++ b/docs/src/pages/components/tabs/tabs-zh.md @@ -1,7 +1,7 @@ --- title: React Tabs（选项卡）组件 components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled -githubLabel: 'component: Tabs' +githubLabel: 'component: tabs' materialDesign: https://material.io/components/tabs waiAria: 'https://www.w3.org/TR/wai-aria-practices/#tabpanel' --- diff --git a/docs/src/pages/components/tabs/tabs.md b/docs/src/pages/components/tabs/tabs.md index 8953f4001c7892..a92adec92a96a3 100644 --- a/docs/src/pages/components/tabs/tabs.md +++ b/docs/src/pages/components/tabs/tabs.md @@ -1,7 +1,7 @@ --- title: React Tabs component components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled -githubLabel: 'component: Tabs' +githubLabel: 'component: tabs' materialDesign: https://material.io/components/tabs waiAria: https://www.w3.org/TR/wai-aria-practices/#tabpanel --- diff --git a/docs/src/pages/components/text-fields/UnstyledInput.js b/docs/src/pages/components/text-fields/UnstyledInput.js index 0ed4a604e863c5..c5bde13b81ecba 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.js +++ b/docs/src/pages/components/text-fields/UnstyledInput.js @@ -35,12 +35,13 @@ const StyledInputElement = styled('input')( transition: all 150ms ease; &:hover { - background: ${theme.palette.mode === 'dark' ? null : grey[100]}; - border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } `, ); diff --git a/docs/src/pages/components/text-fields/UnstyledInput.tsx b/docs/src/pages/components/text-fields/UnstyledInput.tsx index 5e965cd11fd8d1..eca21555424606 100644 --- a/docs/src/pages/components/text-fields/UnstyledInput.tsx +++ b/docs/src/pages/components/text-fields/UnstyledInput.tsx @@ -35,12 +35,13 @@ const StyledInputElement = styled('input')( transition: all 150ms ease; &:hover { - background: ${theme.palette.mode === 'dark' ? null : grey[100]}; - border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; + background: ${theme.palette.mode === 'dark' ? '' : grey[100]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } `, ); diff --git a/docs/src/pages/components/text-fields/UseInput.js b/docs/src/pages/components/text-fields/UseInput.js index 0815bfc88397e4..1e65998f7fab0f 100644 --- a/docs/src/pages/components/text-fields/UseInput.js +++ b/docs/src/pages/components/text-fields/UseInput.js @@ -32,15 +32,16 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 150ms ease; + transition: all 200ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? null : grey[100]}; - border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } `, ); diff --git a/docs/src/pages/components/text-fields/UseInput.tsx b/docs/src/pages/components/text-fields/UseInput.tsx index a176f3afeba9c5..56715b18d50e56 100644 --- a/docs/src/pages/components/text-fields/UseInput.tsx +++ b/docs/src/pages/components/text-fields/UseInput.tsx @@ -32,15 +32,16 @@ const StyledInputElement = styled('input')( border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]}; border-radius: 8px; padding: 12px 12px; - transition: all 150ms ease; + transition: all 200ms ease; &:hover { background: ${theme.palette.mode === 'dark' ? null : grey[100]}; - border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]}; + border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } &:focus { outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]}; + outline-offset: 2px; } `, ); diff --git a/docs/src/pages/components/text-fields/text-fields-pt.md b/docs/src/pages/components/text-fields/text-fields-pt.md index 6f0dfe861a0114..a19e083450115d 100644 --- a/docs/src/pages/components/text-fields/text-fields-pt.md +++ b/docs/src/pages/components/text-fields/text-fields-pt.md @@ -1,7 +1,12 @@ --- title: Componente React para Campo de Texto +<<<<<<< HEAD components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField githubLabel: 'component: TextField' +======= +components: FilledInput, FormControl, FormControlUnstyled, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField, InputUnstyled +githubLabel: 'component: text field' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/text-fields --- diff --git a/docs/src/pages/components/text-fields/text-fields-zh.md b/docs/src/pages/components/text-fields/text-fields-zh.md index f29f88f1335c0d..ddd1b804eb2f05 100644 --- a/docs/src/pages/components/text-fields/text-fields-zh.md +++ b/docs/src/pages/components/text-fields/text-fields-zh.md @@ -1,7 +1,7 @@ --- title: React Text Field（文本框）组件 components: FilledInput, FormControl, FormControlUnstyled, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField, InputUnstyled -githubLabel: 'component: TextField' +githubLabel: 'component: text field' materialDesign: https://material.io/components/text-fields --- diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index c1bc96aec8e9e2..b8f6f90f9626d4 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -1,7 +1,7 @@ --- title: Text Field React component components: FilledInput, FormControl, FormControlUnstyled, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField, InputUnstyled -githubLabel: 'component: TextField' +githubLabel: 'component: text field' materialDesign: https://material.io/components/text-fields --- diff --git a/docs/src/pages/components/time-picker/time-picker-pt.md b/docs/src/pages/components/time-picker/time-picker-pt.md index b7ac8e42863f5c..d08c5baa627325 100644 --- a/docs/src/pages/components/time-picker/time-picker-pt.md +++ b/docs/src/pages/components/time-picker/time-picker-pt.md @@ -1,8 +1,13 @@ --- title: Componente React Seletor de hora components: DesktopTimePicker, MobileTimePicker, StaticTimePicker, TimePicker, ClockPicker +<<<<<<< HEAD githubLabel: 'component: TimePicker' packageName: '@material-ui/lab' +======= +githubLabel: 'component: time picker' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/time-pickers --- diff --git a/docs/src/pages/components/time-picker/time-picker-zh.md b/docs/src/pages/components/time-picker/time-picker-zh.md index 527a5e098ad66e..c5c0fde56ac3f3 100644 --- a/docs/src/pages/components/time-picker/time-picker-zh.md +++ b/docs/src/pages/components/time-picker/time-picker-zh.md @@ -1,8 +1,13 @@ --- title: React Time Picker（时间选择器）组件 components: DesktopTimePicker, MobileTimePicker, StaticTimePicker, TimePicker, ClockPicker +<<<<<<< HEAD githubLabel: 'component: TimePicker' packageName: '@material-ui/lab' +======= +githubLabel: 'component: time picker' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) materialDesign: https://material.io/components/time-pickers --- diff --git a/docs/src/pages/components/time-picker/time-picker.md b/docs/src/pages/components/time-picker/time-picker.md index 14cbd1d6d4291b..25626601be3f85 100644 --- a/docs/src/pages/components/time-picker/time-picker.md +++ b/docs/src/pages/components/time-picker/time-picker.md @@ -1,7 +1,7 @@ --- title: React Time Picker component components: DesktopTimePicker, MobileTimePicker, StaticTimePicker, TimePicker, ClockPicker -githubLabel: 'component: TimePicker' +githubLabel: 'component: time picker' packageName: '@mui/lab' materialDesign: https://material.io/components/time-pickers --- diff --git a/docs/src/pages/components/timeline/timeline-pt.md b/docs/src/pages/components/timeline/timeline-pt.md index f470be4fab13c7..98f013f057e1ea 100644 --- a/docs/src/pages/components/timeline/timeline-pt.md +++ b/docs/src/pages/components/timeline/timeline-pt.md @@ -1,8 +1,13 @@ --- title: Componente React para Linha do tempo components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent +<<<<<<< HEAD githubLabel: 'component: Timeline' packageName: '@material-ui/lab' +======= +githubLabel: 'component: timeline' +packageName: '@mui/lab' +>>>>>>> 0f996c1ce5 ([docs] Clear the difference between UI and React components) --- # Linha do tempo diff --git a/docs/src/pages/components/timeline/timeline-zh.md b/docs/src/pages/components/timeline/timeline-zh.md index e282d40c34b474..b4899a0c4f5892 100644 --- a/docs/src/pages/components/timeline/timeline-zh.md +++ b/docs/src/pages/components/timeline/timeline-zh.md @@ -1,8 +1,8 @@ --- title: React Timeline（时间轴）组件 components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent -githubLabel: 'component: Timeline' -packageName: '@material-ui/lab' +githubLabel: 'component: timeline' +packageName: '@mui/lab' --- # Timeline 时间轴 diff --git a/docs/src/pages/components/timeline/timeline.md b/docs/src/pages/components/timeline/timeline.md index 9c33d5faf5bae9..5c23d720d8b354 100644 --- a/docs/src/pages/components/timeline/timeline.md +++ b/docs/src/pages/components/timeline/timeline.md @@ -1,7 +1,7 @@ --- title: React Timeline component components: Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent -githubLabel: 'component: Timeline' +githubLabel: 'component: timeline' packageName: '@mui/lab' --- diff --git a/docs/src/pages/components/toggle-button/toggle-button-pt.md b/docs/src/pages/components/toggle-button/toggle-button-pt.md index 5cc9141007590a..b083369ae1bd79 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-pt.md +++ b/docs/src/pages/components/toggle-button/toggle-button-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Botões de Alternância components: ToggleButton, ToggleButtonGroup -githubLabel: 'component: ToggleButton' +githubLabel: 'component: toggle button' materialDesign: 'https://material.io/components/buttons#toggle-button' --- diff --git a/docs/src/pages/components/toggle-button/toggle-button-zh.md b/docs/src/pages/components/toggle-button/toggle-button-zh.md index 9de615cf29413e..8c3e84ba816676 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-zh.md +++ b/docs/src/pages/components/toggle-button/toggle-button-zh.md @@ -1,7 +1,7 @@ --- title: React Toggle Button（切换按钮）组件 components: ToggleButton, ToggleButtonGroup -githubLabel: 'component: ToggleButton' +githubLabel: 'component: toggle button' materialDesign: 'https://material.io/components/buttons#toggle-button' --- diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md index 33e105ed25f971..55fb95c6790e94 100644 --- a/docs/src/pages/components/toggle-button/toggle-button.md +++ b/docs/src/pages/components/toggle-button/toggle-button.md @@ -1,7 +1,7 @@ --- title: Toggle Button React component components: ToggleButton, ToggleButtonGroup -githubLabel: 'component: ToggleButton' +githubLabel: 'component: toggle button' materialDesign: https://material.io/components/buttons#toggle-button --- diff --git a/docs/src/pages/components/tooltips/tooltips-pt.md b/docs/src/pages/components/tooltips/tooltips-pt.md index a58db4e6557e4a..7e5787a0681a9e 100644 --- a/docs/src/pages/components/tooltips/tooltips-pt.md +++ b/docs/src/pages/components/tooltips/tooltips-pt.md @@ -1,7 +1,7 @@ --- title: Componente React para Dicas components: Tooltip -githubLabel: 'component: Tooltip' +githubLabel: 'component: tooltip' materialDesign: https://material.io/components/tooltips waiAria: 'https://www.w3.org/TR/wai-aria-practices/#tooltip' --- diff --git a/docs/src/pages/components/tooltips/tooltips-zh.md b/docs/src/pages/components/tooltips/tooltips-zh.md index 2acfe7af3cd139..c9d39671c77a10 100644 --- a/docs/src/pages/components/tooltips/tooltips-zh.md +++ b/docs/src/pages/components/tooltips/tooltips-zh.md @@ -1,7 +1,7 @@ --- title: React Tooltip（工具提示）组件 components: Tooltip -githubLabel: 'component: Tooltip' +githubLabel: 'component: tooltip' materialDesign: https://material.io/components/tooltips waiAria: 'https://www.w3.org/TR/wai-aria-practices/#tooltip' --- diff --git a/docs/src/pages/components/tooltips/tooltips.md b/docs/src/pages/components/tooltips/tooltips.md index 8fb6ab4083a93e..462c969205c1af 100644 --- a/docs/src/pages/components/tooltips/tooltips.md +++ b/docs/src/pages/components/tooltips/tooltips.md @@ -1,7 +1,7 @@ --- title: React Tooltip component components: Tooltip -githubLabel: 'component: Tooltip' +githubLabel: 'component: tooltip' materialDesign: https://material.io/components/tooltips waiAria: https://www.w3.org/TR/wai-aria-practices/#tooltip --- diff --git a/docs/src/pages/components/transfer-list/transfer-list.md b/docs/src/pages/components/transfer-list/transfer-list.md index 53a33e1ac189cb..89974a59a0c700 100644 --- a/docs/src/pages/components/transfer-list/transfer-list.md +++ b/docs/src/pages/components/transfer-list/transfer-list.md @@ -1,7 +1,7 @@ --- title: Transfer List React component components: List, ListItem, Checkbox, Switch -githubLabel: 'component: TransferList' +githubLabel: 'component: transfer list' --- # Transfer List diff --git a/docs/src/pages/components/transitions/transitions-pt.md b/docs/src/pages/components/transitions/transitions-pt.md index 295b1644dc9d4b..55deaff0f27e64 100644 --- a/docs/src/pages/components/transitions/transitions-pt.md +++ b/docs/src/pages/components/transitions/transitions-pt.md @@ -101,3 +101,13 @@ For more information on creating a custom transition, visit the _react-transitio - [Popper](/components/popper/#transitions) - [Snackbar](/components/snackbars/#transitions) - [Tooltip](/components/tooltips/#transitions) + +## Performance & SEO + +The content of transition component is mounted by default even if `in={false}`. This default behavior has server-side rendering and SEO in mind. If you render expensive component trees inside your transition it might be a good idea to change this default behavior by enabling the `unmountOnExit` prop: + +```jsx + +``` + +As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies. diff --git a/docs/src/pages/components/transitions/transitions-zh.md b/docs/src/pages/components/transitions/transitions-zh.md index a3e6cf65373b38..8394d70c57353c 100644 --- a/docs/src/pages/components/transitions/transitions-zh.md +++ b/docs/src/pages/components/transitions/transitions-zh.md @@ -101,3 +101,13 @@ For more information on creating a custom transition, visit the _react-transitio - [Popper](/components/popper/#transitions) - [Snackbar（消息条）](/components/snackbars/#transitions) - [Tooltip](/components/tooltips/#transitions) + +## Performance & SEO + +The content of transition component is mounted by default even if `in={false}`. This default behavior has server-side rendering and SEO in mind. If you render expensive component trees inside your transition it might be a good idea to change this default behavior by enabling the `unmountOnExit` prop: + +```jsx + +``` + +As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies. diff --git a/docs/src/pages/components/transitions/transitions.md b/docs/src/pages/components/transitions/transitions.md index 8ee540ebeae638..fdc21fb341fe2c 100644 --- a/docs/src/pages/components/transitions/transitions.md +++ b/docs/src/pages/components/transitions/transitions.md @@ -1,7 +1,7 @@ --- title: React Transition component components: Collapse, Fade, Grow, Slide, Zoom -githubLabel: 'component: Transition' +githubLabel: 'component: transitions' --- # Transitions diff --git a/docs/src/pages/components/tree-view/tree-view-pt.md b/docs/src/pages/components/tree-view/tree-view-pt.md index 184b34e54b07c6..36d5c7624784dc 100644 --- a/docs/src/pages/components/tree-view/tree-view-pt.md +++ b/docs/src/pages/components/tree-view/tree-view-pt.md @@ -1,7 +1,7 @@ --- title: Componente React de Visualização em Árvore components: TreeView, TreeItem -githubLabel: 'component: TreeView' +githubLabel: 'component: tree view' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#TreeView' packageName: '@material-ui/lab' --- diff --git a/docs/src/pages/components/tree-view/tree-view-zh.md b/docs/src/pages/components/tree-view/tree-view-zh.md index a2e5d237b721c2..d97b1cb234ac76 100644 --- a/docs/src/pages/components/tree-view/tree-view-zh.md +++ b/docs/src/pages/components/tree-view/tree-view-zh.md @@ -1,7 +1,7 @@ --- title: React Tree View（树视图）组件 components: TreeView, TreeItem -githubLabel: 'component: TreeView' +githubLabel: 'component: tree view' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#TreeView' packageName: '@material-ui/lab' --- diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md index f72f9c5e282077..ffeb1222982a91 100644 --- a/docs/src/pages/components/tree-view/tree-view.md +++ b/docs/src/pages/components/tree-view/tree-view.md @@ -1,7 +1,7 @@ --- title: Tree View React component components: TreeView, TreeItem -githubLabel: 'component: TreeView' +githubLabel: 'component: tree view' waiAria: https://www.w3.org/TR/wai-aria-practices/#TreeView packageName: '@mui/lab' --- diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md index fe92c92eb87ebc..82dc355eedc59e 100644 --- a/docs/src/pages/components/use-media-query/use-media-query.md +++ b/docs/src/pages/components/use-media-query/use-media-query.md @@ -144,7 +144,7 @@ For instance on the server-side: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; -import { ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user-agent']).device.type || 'desktop'; @@ -155,17 +155,19 @@ function handleRender(req, res) { }), }); - const html = ReactDOMServer.renderToString( - + }, + }, + }); + + const html = ReactDOMServer.renderToString( + , ); diff --git a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js deleted file mode 100644 index 265b85ddd9d993..00000000000000 --- a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Slider from '@mui/material/Slider'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { green } from '@mui/material/colors'; -import Switch from '@mui/material/Switch'; - -export default function DynamicThemeNesting() { - const [success, setSuccess] = React.useState(false); - - const handleChange = (event) => { - setSuccess(event.target.checked); - }; - - const theme = React.useMemo(() => { - if (success) { - return createTheme({ - palette: { - primary: { - light: green[300], - main: green[500], - dark: green[700], - }, - }, - }); - } - return createTheme(); - }, [success]); - - return ( - - - } - label="Success" - /> - - - - - ); -} diff --git a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx deleted file mode 100644 index 876f0086f2fa80..00000000000000 --- a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Slider from '@mui/material/Slider'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { green } from '@mui/material/colors'; -import Switch from '@mui/material/Switch'; - -export default function DynamicThemeNesting() { - const [success, setSuccess] = React.useState(false); - - const handleChange = (event: React.ChangeEvent) => { - setSuccess(event.target.checked); - }; - - const theme = React.useMemo(() => { - if (success) { - return createTheme({ - palette: { - primary: { - light: green[300], - main: green[500], - dark: green[700], - }, - }, - }); - } - return createTheme(); - }, [success]); - - return ( - - - } - label="Success" - /> - - - - - ); -} diff --git a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx.preview b/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx.preview deleted file mode 100644 index 49e823a77711bf..00000000000000 --- a/docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - } - label="Success" - /> - - - - \ No newline at end of file diff --git a/docs/src/pages/customization/how-to-customize/how-to-customize.md b/docs/src/pages/customization/how-to-customize/how-to-customize.md index 12e724bc3cf814..2b2c33fcfa8706 100644 --- a/docs/src/pages/customization/how-to-customize/how-to-customize.md +++ b/docs/src/pages/customization/how-to-customize/how-to-customize.md @@ -177,10 +177,6 @@ const StyledSlider = styled(Slider, { {{"demo": "pages/customization/how-to-customize/DynamicCSSVariables.js"}} -### Theme nesting - -{{"demo": "pages/customization/how-to-customize/DynamicThemeNesting.js"}} - ## 4. Global theme variation In order to promote consistency between components, and manage the user interface appearance as a whole, MUI provides a mechanism to apply global changes. @@ -225,7 +221,3 @@ If you are already using the [CssBaseline](/components/css-baseline/) component ) } ``` - -## 6. Custom class name - -Check out [ClassName Generator](/guides/classname-generator/) section for more details. diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.js b/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.js new file mode 100644 index 00000000000000..09799839316294 --- /dev/null +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.js @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Slider, { sliderClasses } from '@mui/material/Slider'; + +const finalTheme = createTheme({ + components: { + MuiSlider: { + styleOverrides: { + valueLabel: ({ ownerState, theme }) => ({ + ...(ownerState.orientation === 'vertical' && { + backgroundColor: 'transparent', + color: theme.palette.grey[500], + fontWeight: 700, + padding: 0, + left: '2rem', + }), + [`&.${sliderClasses.valueLabelOpen}`]: { + transform: 'none', + top: 'initial', + }, + }), + }, + }, + }, +}); + +function valuetext(value) { + return `${value}°C`; +} + +export default function GlobalThemeOverride() { + return ( + + + 'Temperature'} + orientation="vertical" + getAriaValueText={valuetext} + defaultValue={[25, 50]} + marks={[ + { value: 0 }, + { value: 25 }, + { value: 50 }, + { value: 75 }, + { value: 100 }, + ]} + valueLabelFormat={valuetext} + valueLabelDisplay="on" + /> + + + ); +} diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.tsx b/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.tsx new file mode 100644 index 00000000000000..96fbf48247ae66 --- /dev/null +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Slider, { sliderClasses } from '@mui/material/Slider'; + +const finalTheme = createTheme({ + components: { + MuiSlider: { + styleOverrides: { + valueLabel: ({ ownerState, theme }) => ({ + ...(ownerState.orientation === 'vertical' && { + backgroundColor: 'transparent', + color: theme.palette.grey[500], + fontWeight: 700, + padding: 0, + left: '2rem', + }), + [`&.${sliderClasses.valueLabelOpen}`]: { + transform: 'none', + top: 'initial', + }, + }), + }, + }, + }, +}); + +function valuetext(value: number) { + return `${value}°C`; +} + +export default function GlobalThemeOverride() { + return ( + + + 'Temperature'} + orientation="vertical" + getAriaValueText={valuetext} + defaultValue={[25, 50]} + marks={[ + { value: 0 }, + { value: 25 }, + { value: 50 }, + { value: 75 }, + { value: 100 }, + ]} + valueLabelFormat={valuetext} + valueLabelDisplay="on" + /> + + + ); +} diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.js b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.js new file mode 100644 index 00000000000000..557f682bc89694 --- /dev/null +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { + ThemeProvider, + createTheme, + experimental_sx as sx, +} from '@mui/material/styles'; +import Chip from '@mui/material/Chip'; +import Check from '@mui/icons-material/Check'; + +const finalTheme = createTheme({ + components: { + MuiChip: { + styleOverrides: { + root: sx({ + // https://mui.com/system/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), + label: { + padding: 'initial', + }, + icon: sx({ + mr: 0.5, + ml: '-2px', + }), + }, + }, + }, +}); + +export default function GlobalThemeOverride() { + return ( + + + Status: Completed + + } + icon={} + /> + + ); +} diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx new file mode 100644 index 00000000000000..557f682bc89694 --- /dev/null +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { + ThemeProvider, + createTheme, + experimental_sx as sx, +} from '@mui/material/styles'; +import Chip from '@mui/material/Chip'; +import Check from '@mui/icons-material/Check'; + +const finalTheme = createTheme({ + components: { + MuiChip: { + styleOverrides: { + root: sx({ + // https://mui.com/system/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), + label: { + padding: 'initial', + }, + icon: sx({ + mr: 0.5, + ml: '-2px', + }), + }, + }, + }, +}); + +export default function GlobalThemeOverride() { + return ( + + + Status: Completed + + } + icon={} + /> + + ); +} diff --git a/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx.preview b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx.preview new file mode 100644 index 00000000000000..91e91af0434675 --- /dev/null +++ b/docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx.preview @@ -0,0 +1,11 @@ + + + Status: Completed + + } + icon={} + /> + \ No newline at end of file diff --git a/docs/src/pages/customization/theme-components/theme-components.md b/docs/src/pages/customization/theme-components/theme-components.md index 1439af476024f9..4ce2391c2e1e55 100644 --- a/docs/src/pages/customization/theme-components/theme-components.md +++ b/docs/src/pages/customization/theme-components/theme-components.md @@ -1,6 +1,29 @@ # Components -

    The theme's `components` key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.

    +

    The theme's components key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.

    + +## Default props + +You can change the default of every prop of a MUI component. +A `defaultProps` key is exposed in the theme's `components` key for this use case. + +```js +const theme = createTheme({ + components: { + // Name of the component + MuiButtonBase: { + defaultProps: { + // The props to change the default for. + disableRipple: true, // No more ripple! + }, + }, + }, +}); +``` + +{{"demo": "pages/customization/theme-components/DefaultProps.js"}} + +To override lab component styles with TypeScript, check [this page](/components/about-the-lab/#typescript). ## Global style overrides @@ -29,28 +52,38 @@ The list of each component's classes is documented under the **CSS** section of To override a lab component's styles with TypeScript, check [this section of the documentation](/components/about-the-lab/#typescript). -## Default props +### Overrides based on props -You can change the default of every prop of a MUI component. -A `defaultProps` key is exposed in the theme's `components` key for this use case. +You can pass a callback as a value in each slot of the component's `styleOverrides` to apply styles based on props. + +The `ownerState` prop is a combination of public props that you pass to the component + internal state of the component. ```js -const theme = createTheme({ +const finalTheme = createTheme({ components: { - // Name of the component - MuiButtonBase: { - defaultProps: { - // The props to change the default for. - disableRipple: true, // No more ripple! + MuiSlider: { + styleOverrides: { + valueLabel: ({ ownerState, theme }) => ({ + ...(ownerState.orientation === 'vertical' && { + backgroundColor: 'transparent', + color: theme.palette.grey[500], + }), + }), }, }, }, }); ``` -{{"demo": "pages/customization/theme-components/DefaultProps.js"}} +{{"demo": "pages/customization/theme-components/GlobalThemeOverrideCallback.js"}} -To override lab component styles with TypeScript, check [this page](/components/about-the-lab/#typescript). +### Using `sx` (experimental) syntax + +If you are not familiar `sx`, first check out [the concept](/system/the-sx-prop/) and [the difference with the `styled`](/system/styled/#difference-with-the-sx-prop). + +`sx` is also compatible with theme style overrides if you prefer the shorthand notation. + +{{"demo": "pages/customization/theme-components/GlobalThemeOverrideSx.js"}} ## Adding new component variants diff --git a/docs/src/pages/customization/theming/theming-zh.md b/docs/src/pages/customization/theming/theming-zh.md index 04872b26af325e..3f683fb9b0a993 100644 --- a/docs/src/pages/customization/theming/theming-zh.md +++ b/docs/src/pages/customization/theming/theming-zh.md @@ -1,6 +1,6 @@ # Theming 主题 -

    定制属于你自己的 Material-UI 主题。 你可以改变颜色、文字铸排等等。

    +

    用你的主题定制MUI。 你可以改变颜色、文字铸排等等。

    主题可以指定组件的配色、平面的明暗、阴影的深浅、墨水元素的合适的不透明度等等。 @@ -16,15 +16,15 @@ ## 主题配置变量 -更改主题配置变量是将 Material-UI 与您的需求相匹配的最有效方法。 以下各节涵盖了一些最重要的主题变量： +修改主题配置变量是使MUI符合你的需求的最有效方法。 以下各节涵盖了一些最重要的主题变量： -- [`.调色板`](/customization/palette/) -- [`.typography`](/customization/typography/) +- [`.palette 调色板`](/customization/palette/) +- [`.typography 文字铸排`](/customization/typography/) - [`.spacing 间距`](/customization/spacing/) - [`.breakpoints 断点`](/customization/breakpoints/) -- [`.zIndex`](/customization/z-index/) -- [`.过渡动画`](/customization/transitions/) -- [`.组件`](/customization/theme-components/) +- [`.zIndex 层级`](/customization/z-index/) +- [`.transitions 过渡动画`](/customization/transitions/) +- [`.components 组件`](/customization/theme-components/) 您可以在[默认主题部分](/customization/default-theme/)查看完整的默认样式。 @@ -43,13 +43,13 @@ const theme = createTheme({ 如果您使用的是 TypeScript，您还需要使用 [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) 来让主题接受上述值。 ```tsx -declare module '@material-ui/core/styles' { +declare module '@mui/material/styles' { interface Theme { status: { danger: string; }; } - // allow configuration using `createTheme` + // 允许配置文件使用 `createTheme` interface ThemeOptions { status?: { danger?: string; @@ -66,10 +66,10 @@ declare module '@material-ui/core/styles' { -The community has built great tools to build a theme: +社区中有一些强大的工具来帮您构建主题： -- [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/)：一个帮助设计和定制 Material-UI 组件库主题的工具。 包括基本的网站模板，并且展示各种组件及其受主题影响的方式。 -- [create-mui-theme](https://react-theming.github.io/create-mui-theme/)：使用 Material Design 颜色工具来创建 Material-UI 主题的在线工具。 +- [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/)：一个帮助设计和定制 MUI 组件库主题的工具。 这其中包括基本的网站模板，并且展示各种组件以及它们如何受到主题的影响 +- [Material 调色板生成器](https://material.io/inline-tools/color/)：您可以在 Material 调色板生成器中输入的任何颜色，它将帮您生成一系列的颜色组合。 ## 访问一个组件中的主题 @@ -164,7 +164,7 @@ theme = createTheme(theme, { MuiChip: { styleOverrides: { root: { - // apply theme's border-radius instead of component's default + // 用主题的 border-radius 参数来代替默认组件的样式 borderRadius: theme.shape.borderRadius, }, }, @@ -219,7 +219,7 @@ theme = responsiveFontSizes(theme); `theme` (_object_): A complete, ready-to-use theme object. -#### Examples +#### 例子 ```js import { unstable_createMuiStrictModeTheme } from '@mui/material/styles'; @@ -241,7 +241,7 @@ function App() { This component takes a `theme` prop and applies it to the entire React tree that it is wrapping around. 最好在**您的组件树的根目录**中使用它。 -#### Props +#### 属性 | Name | Type | Description | |:------------------ |:---------------------------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/src/pages/customization/theming/theming.md b/docs/src/pages/customization/theming/theming.md index c1df23c0267020..b5ce3d4881204f 100644 --- a/docs/src/pages/customization/theming/theming.md +++ b/docs/src/pages/customization/theming/theming.md @@ -160,30 +160,7 @@ theme = createTheme(theme, { }); ``` -Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options (example above) or to override the design of specific components (example below). - -```js -import { createTheme } from '@mui/material/styles'; - -let theme = createTheme({ - shape: { - borderRadius: 4, - }, -}); - -theme = createTheme(theme, { - components: { - MuiChip: { - styleOverrides: { - root: { - // apply theme's border-radius instead of component's default - borderRadius: theme.shape.borderRadius, - }, - }, - }, - }, -}); -``` +Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options. ### `responsiveFontSizes(theme, options) => theme` diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md index 748fd85ecde047..6462ba2ab91163 100644 --- a/docs/src/pages/discover-more/backers/backers.md +++ b/docs/src/pages/discover-more/backers/backers.md @@ -10,7 +10,7 @@ The core of MUI is a crowd-funded open-source project, licensed under the permis

    octopus - doit-intl + doit-intl aptugo

    @@ -24,8 +24,8 @@ Please contact us at diamond@mui.com to subscribe to this tier. via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)

    - tidelift.com - bit.dev + tidelift.com + bit.dev text-em-all.com laststance movavi.com diff --git a/docs/src/pages/discover-more/related-projects/related-projects-pt.md b/docs/src/pages/discover-more/related-projects/related-projects-pt.md index cbce7b0e402fc6..8bd9c18553772b 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects-pt.md +++ b/docs/src/pages/discover-more/related-projects/related-projects-pt.md @@ -6,15 +6,15 @@ Como o escopo dos problemas que o Material-UI resolve é limitado, tentamos inte ## Recursos de design -Figma -Adobe XD -Sketch +Figma +Adobe XD +Sketch Esta é uma coleção de projetos de terceiros que estendem Material-UI. -- **Figma**: [Figma para Material-UI](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch) — Um kit de interface de usuário grande com mais de 600 componentes de Material-UI trabalhados à mão 🎨. -- [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd): A large UI kit with over 600 handcrafted Material-UI components. -- **Sketch**: [Sketch para Material-UI](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch) — Um kit de interface de usuário grande com mais de 600 símbolos de Material-UI trabalhados à mão 💎. +- [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma): A large UI kit with over 600 handcrafted MUI components. +- [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd): A large UI kit with over 600 handcrafted MUI components. +- [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch): A large UI kit with over 600 handcrafted MUI symbols. - [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. ## Imagens e ilustrações diff --git a/docs/src/pages/discover-more/related-projects/related-projects-zh.md b/docs/src/pages/discover-more/related-projects/related-projects-zh.md index e028aef3fe6e2e..052001791b4fea 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects-zh.md +++ b/docs/src/pages/discover-more/related-projects/related-projects-zh.md @@ -6,15 +6,15 @@ Because the scope of problems MUI solves is bound, we try to play nicely with ot ## 设计资源 -figma -adobe-xd -草图 +figma +adobe-xd +草图 一套可重复使用的设计工具组件已经面世，这些工具是为了配合 React 组件而设计的，它们可以帮助你制作优秀的产品。 -- [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 组件。 -- [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd)：大型 UI 套件，包含六百多个手工制作的 Material-UI 组件。 -- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 符号。 +- [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma): A large UI kit with over 600 handcrafted MUI components. +- [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd): A large UI kit with over 600 handcrafted MUI components. +- [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch): A large UI kit with over 600 handcrafted MUI symbols. - [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. ## 图像和图案 diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md index 5cfaf36a5e4c64..0925ef1f79ace6 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects.md +++ b/docs/src/pages/discover-more/related-projects/related-projects.md @@ -17,7 +17,7 @@ A set of reusable components for design tools is available, designed to match th - [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma): A large UI kit with over 600 handcrafted MUI components. - [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd): A large UI kit with over 600 handcrafted MUI components. - [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch): A large UI kit with over 600 handcrafted MUI symbols. -- [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. +- [UXPin](https://www.uxpin.com/merge/mui-library): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. ## Images and illustrations diff --git a/docs/src/pages/discover-more/showcase/appList.js b/docs/src/pages/discover-more/showcase/appList.js index 41ba1b3e0d686c..1d608b2a8868f3 100644 --- a/docs/src/pages/discover-more/showcase/appList.js +++ b/docs/src/pages/discover-more/showcase/appList.js @@ -144,7 +144,7 @@ const appList = [ 'Schedule, dispatch, GPS track employees, invoice, accept credit cards and get booked ' + 'online. The marketing website is also built with MUI: https://www.housecallpro.com/', image: 'housecall.jpg', - link: 'https://pro.housecall.io/pro/log_in', + link: 'https://pro.housecallpro.com/pro/log_in', similarWebVisits: 1800, dateAdded: '2019-01-01', }, @@ -292,7 +292,7 @@ const appList = [ title: 'Commit Swimming', description: 'The #1 workout journal for coaches and swimmers.', image: 'commitswimming.jpg', - link: 'https://www.commitswimming.com/', + link: 'https://commitswimming.com/', dateAdded: '2019-01-01', }, { diff --git a/docs/src/pages/getting-started/example-projects/example-projects-pt.md b/docs/src/pages/getting-started/example-projects/example-projects-pt.md index f9f0e553257daa..5abe00df521637 100644 --- a/docs/src/pages/getting-started/example-projects/example-projects-pt.md +++ b/docs/src/pages/getting-started/example-projects/example-projects-pt.md @@ -23,7 +23,7 @@ O código-fonte deste site de documentação também está incluído no reposit ## Projetos de exemplo mais avançados -Se você quer começar com um exemplo mais completo e do mundo real, você pode dar uma olhada nos [temas premium & templates](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store) ou: +If you want to start with a more complete and real-world example, you could take a look at the [premium themes & templates](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store) or: ### Grátis diff --git a/docs/src/pages/getting-started/example-projects/example-projects-zh.md b/docs/src/pages/getting-started/example-projects/example-projects-zh.md index 57050b9eab4de7..1c013470ab33ab 100644 --- a/docs/src/pages/getting-started/example-projects/example-projects-zh.md +++ b/docs/src/pages/getting-started/example-projects/example-projects-zh.md @@ -23,7 +23,7 @@ Create React App 是一个很棒的学习 React 的项目。 Have a look at [the ## 进阶示例项目 -如果你想从一个更完整、切合实际的示例开始，你可以看看[高级主题&模板](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store)，或者： +If you want to start with a more complete and real-world example, you could take a look at the [premium themes & templates](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store) or: ### 免费的资源 diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md index 86c7bb548ded11..e23ab6a4e661bc 100644 --- a/docs/src/pages/getting-started/example-projects/example-projects.md +++ b/docs/src/pages/getting-started/example-projects/example-projects.md @@ -15,6 +15,8 @@ You can find some example projects in the [GitHub repository](https://github.com - [Preact](https://github.com/mui-org/material-ui/tree/master/examples/preact) - [CDN](https://github.com/mui-org/material-ui/tree/master/examples/cdn) - [Plain server-side](https://github.com/mui-org/material-ui/tree/master/examples/ssr) +- [Tailwind CSS](https://github.com/mui-org/material-ui/tree/master/examples/tailwind) +- [Vite.js](https://github.com/mui-org/material-ui/tree/next/examples/vitejs) - [Use styled-components as style engine](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)) Create React App is an awesome project for learning React. @@ -50,6 +52,7 @@ If you want to start with a more complete and real-world example, you could take - All PWA features included (SW, Notifications, deferred installation prompt and more) - Optimized and scalable performance (all ~100 points on Lighthouse) + + ### Paid diff --git a/docs/src/pages/getting-started/faq/faq-pt.md b/docs/src/pages/getting-started/faq/faq-pt.md index 1c54f7a3255851..2f4dc47ed2ddd7 100644 --- a/docs/src/pages/getting-started/faq/faq-pt.md +++ b/docs/src/pages/getting-started/faq/faq-pt.md @@ -16,7 +16,7 @@ Existem muitas maneiras de apoiar o Material-UI: - Reporte erros ou recursos faltantes [criando uma issue](https://github.com/mui-org/material-ui/issues/new). - Revise e comente em [pull requests](https://github.com/mui-org/material-ui/pulls) e [issues](https://github.com/mui-org/material-ui/issues) existentes. - Ajude a [traduzir](https://translate.mui.com) a documentação. - - [Aprimore nossa documentação](https://github.com/mui-org/material-ui/tree/master/docs), corrija bugs, ou adicione recursos [enviando um pull request](https://github.com/mui-org/material-ui/pulls). + - [Improve our documentation](https://github.com/mui-org/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui-org/material-ui/pulls). - **Support us financially on [OpenCollective](https://opencollective.com/mui)**. Se você usa Material-UI em um projeto comercial e gostaria de apoiar seu desenvolvimento contínuo tornando-se um Patrocinador, ou em um projeto freelancer ou hobby e gostaria de se tornar um Apoiador, você pode se tornar através do OpenCollective. Todos os fundos doados são geridos de forma transparente e os Patrocinadores recebem reconhecimento no README e na página inicial do Material-UI. ## Por que meus componentes não estão renderizando corretamente em compilações de produção? diff --git a/docs/src/pages/getting-started/faq/faq-zh.md b/docs/src/pages/getting-started/faq/faq-zh.md index 8030bda5ba46cc..ff180e40c1ffea 100644 --- a/docs/src/pages/getting-started/faq/faq-zh.md +++ b/docs/src/pages/getting-started/faq/faq-zh.md @@ -16,7 +16,7 @@ - 通过 [创建一个问题](https://github.com/mui-org/material-ui/issues/new) 来报告错误或缺少的功能 。 - 查看和评论一些现有的 [pull requests](https://github.com/mui-org/material-ui/pulls) 和 [issues](https://github.com/mui-org/material-ui/issues)。 - 帮助我们 [翻译](https://translate.mui.com) 文档。 - - [改进我们的文档](https://github.com/mui-org/material-ui/tree/next/docs)，修复错误，或者通过 [拉取请求](https://github.com/mui-org/material-ui/pulls) 来添加功能。 + - [Improve our documentation](https://github.com/mui-org/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui-org/material-ui/pulls). - **Support us financially on [OpenCollective](https://opencollective.com/mui)**. 如果您在商业项目中使用了 Material-UI，并希望通过成为我们的赞助商来支持我们的持续发展，或者在一个业余的或者爱好的项目中使用了，并想成为我们的一个支持者， 您都可以通过 OpenCollective 来资助我们。 筹集的所有资金都是透明管理的，赞助商在 README 和 Material-UI 主页上都会获得认可。 ## 为什么我的组件在生产构造中没有正确地渲染？ diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index ab1fb495effe1b..4b2b57a7a1f4fd 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -9,7 +9,7 @@ If you still can't find what you're looking for, you can refer to our [support p There are many ways to support MUI: - **Spread the word**. Evangelize MUI by [linking to mui.com](https://mui.com/) on your website, every backlink matters. - Follow us on [Twitter](https://twitter.com/MaterialUI), like and retweet the important news. Or just talk about us with your friends. + Follow us on [Twitter](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends. - **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved. - **Help new users**. You can answer questions on [StackOverflow](https://stackoverflow.com/questions/tagged/mui). @@ -23,23 +23,6 @@ There are many ways to support MUI: If you use MUI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective. All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page. -## Why aren't my components rendering correctly in production builds? - -The #1 reason this likely happens is due to class name conflicts once your code is in a production bundle. -For MUI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/styles/advanced/#class-names). - -To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them. - -You could end up accidentally using two class name generators in a variety of scenarios: - -- You accidentally **bundle** two versions of MUI. You might have a dependency not correctly setting MUI as a peer dependency. -- You are using `StylesProvider` for a **subset** of your React tree. -- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created. - -> If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk). - -Overall, it's simple to recover from this problem by wrapping each MUI application with [`StylesProvider`](/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**. - ## Why do the fixed positioned elements move when a modal is opened? Scrolling is blocked as soon as a modal is opened. @@ -259,84 +242,6 @@ A missing property, a wrong call order, or a missing component – server-side r The best way to find out what's wrong is to compare your project to an **already working setup**. Check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit. -### CSS works only on first load then is missing - -The CSS is only generated on the first load of the page. -Then, the CSS is missing on the server for consecutive requests. - -#### Action to Take - -The styling solution relies on a cache, the _sheets manager_, to only inject the CSS once per component type -(if you use two buttons, you only need the CSS of the button one time). -You need to create **a new `sheets` instance for each request**. - -Example of fix: - -```diff --// Create a sheets instance. --const sheets = new ServerStyleSheets(); - -function handleRender(req, res) { -+ // Create a sheets instance. -+ const sheets = new ServerStyleSheets(); - - //… - - // Render the component to a string. - const html = ReactDOMServer.renderToString( -``` - -### React class name hydration mismatch - -> Warning: Prop className did not match. - -There is a class name mismatch between the client and the server. It might work for the first request. -Another symptom is that the styling changes between initial page load and the downloading of the client scripts. - -#### Action to Take - -The class names value relies on the concept of [class name generator](/styles/advanced/#class-names). -The whole page needs to be rendered with **a single generator**. -This generator needs to behave identically on the server and on the client. For instance: - -- You need to provide a new class name generator for each request. - But you shouldn't share a `createGenerateClassName()` between different requests: - - Example of fix: - - ```diff - -// Create a new class name generator. - -const generateClassName = createGenerateClassName(); - - function handleRender(req, res) { - + // Create a new class name generator. - + const generateClassName = createGenerateClassName(); - - //… - - // Render the component to a string. - const html = ReactDOMServer.renderToString( - ``` - -- You need to verify that your client and server are running the **exactly the same version** of MUI. - It is possible that a mismatch of even minor versions can cause styling problems. - To check version numbers, run `npm list @mui/material` in the environment where you build your application and also in your deployment environment. - - You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. - - _example of fix (package.json):_ - - ```diff - "dependencies": { - ... - - "@mui/material": "^4.0.0", - + "@mui/material": "4.0.0", - ... - }, - ``` - -- You need to make sure that the server and the client share the same `process.env.NODE_ENV` value. - ## Why are the colors I am seeing different from what I see here? The documentation site is using a custom theme. Hence, the color palette is @@ -389,8 +294,7 @@ In the example above, the `Portal` would run an effect once, but might not re-re This is especially apparent for React.lazy components in Suspense. The above implementation could also not account for a change in the DOM node. -This is why we require a prop with the actual DOM node so that React can take care of determining -when the `Portal` should re-render: +This is why we require a prop with the actual DOM node so that React can take care of determining when the `Portal` should re-render: ```jsx function App() { @@ -447,3 +351,98 @@ return ( ## I cannot use components as selectors in the styled() utility. What should I do? If you are getting the error: `TypeError: Cannot convert a Symbol value to a string`, take a look at the [styled()](/system/styled/#how-to-use-components-selector-api) docs page for instructions on how you can fix this. + +## [v4] Why aren't my components rendering correctly in production builds? + +The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle. +For MUI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/styles/advanced/#class-names). + +To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them. + +You could end up accidentally using two class name generators in a variety of scenarios: + +- You accidentally **bundle** two versions of MUI. You might have a dependency not correctly setting MUI as a peer dependency. +- You are using `StylesProvider` for a **subset** of your React tree. +- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created. + +> If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk). + +Overall, it's simple to recover from this problem by wrapping each MUI application with [`StylesProvider`](/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**. + +### [v4] CSS works only on first load and goes missing + +The CSS is only generated on the first load of the page. +Then, the CSS is missing on the server for consecutive requests. + +#### Action to Take + +The styling solution relies on a cache, the _sheets manager_, to only inject the CSS once per component type +(if you use two buttons, you only need the CSS of the button one time). +You need to create **a new `sheets` instance for each request**. + +Example of fix: + +```diff +-// Create a sheets instance. +-const sheets = new ServerStyleSheets(); + +function handleRender(req, res) { ++ // Create a sheets instance. ++ const sheets = new ServerStyleSheets(); + + //… + + // Render the component to a string. + const html = ReactDOMServer.renderToString( +``` + +### [v4] React class name hydration mismatch + +> Warning: Prop className did not match. + +There is a class name mismatch between the client and the server. It might work for the first request. +Another symptom is that the styling changes between initial page load and the downloading of the client scripts. + +#### Action to Take + +The class names value relies on the concept of [class name generator](/styles/advanced/#class-names). +The whole page needs to be rendered with **a single generator**. +This generator needs to behave identically on the server and on the client. For instance: + +- You need to provide a new class name generator for each request. + But you shouldn't share a `createGenerateClassName()` between different requests: + + Example of fix: + + ```diff + -// Create a new class name generator. + -const generateClassName = createGenerateClassName(); + + function handleRender(req, res) { + + // Create a new class name generator. + + const generateClassName = createGenerateClassName(); + + //… + + // Render the component to a string. + const html = ReactDOMServer.renderToString( + ``` + +- You need to verify that your client and server are running the **exactly the same version** of MUI. + It is possible that a mismatch of even minor versions can cause styling problems. + To check version numbers, run `npm list @mui/material` in the environment where you build your application and also in your deployment environment. + + You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. + + _example of fix (package.json):_ + + ```diff + "dependencies": { + ... + - "@mui/material": "^4.0.0", + + "@mui/material": "4.0.0", + ... + }, + ``` + +- You need to make sure that the server and the client share the same `process.env.NODE_ENV` value. diff --git a/docs/src/pages/getting-started/installation/installation-pt.md b/docs/src/pages/getting-started/installation/installation-pt.md index 4325ffe7105dae..46d4b1c65254ce 100644 --- a/docs/src/pages/getting-started/installation/installation-pt.md +++ b/docs/src/pages/getting-started/installation/installation-pt.md @@ -79,13 +79,13 @@ Você pode seguir [esse exemplo CDN](https://github.com/mui-org/material-ui/tree ## Recursos de design -figma -adobe-xd -sketch +figma +adobe-xd +sketch Um conjunto de componentes reutilizáveis para ferramentas de design está disponível, desenvolvido para enquadrar os componentes React e te ajudar a criar ótimos produtos: -- [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma): A large UI kit with over 600 handcrafted Material-UI components. -- [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd): A large UI kit with over 600 handcrafted Material-UI components. -- **Sketch**: [Sketch para Material-UI](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch) — Um kit de interface de usuário grande com mais de 600 símbolos de Material-UI trabalhados à mão 💎. +- [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma): A large UI kit with over 600 handcrafted MUI components. +- [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd): A large UI kit with over 600 handcrafted MUI components. +- [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch): A large UI kit with over 600 handcrafted MUI symbols. - [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. diff --git a/docs/src/pages/getting-started/installation/installation-zh.md b/docs/src/pages/getting-started/installation/installation-zh.md index 21546d8927d09a..9cfd361cd45176 100644 --- a/docs/src/pages/getting-started/installation/installation-zh.md +++ b/docs/src/pages/getting-started/installation/installation-zh.md @@ -82,13 +82,13 @@ yarn add @mui/icons-material ## 设计资源 -figma -adobe-xd -sketch +figma +adobe-xd +sketch A set of reusable components for design tools is available, designed to match the React components and to help you craft great products: -- [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 组件。 -- [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd)：大型 UI 套件，包含六百多个手工制作的 Material-UI 组件。 -- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 符号。 +- [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma): A large UI kit with over 600 handcrafted MUI components. +- [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd): A large UI kit with over 600 handcrafted MUI components. +- [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch): A large UI kit with over 600 handcrafted MUI symbols. - [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. diff --git a/docs/src/pages/getting-started/installation/installation.md b/docs/src/pages/getting-started/installation/installation.md index f5714651a621b9..1789eeb9f08922 100644 --- a/docs/src/pages/getting-started/installation/installation.md +++ b/docs/src/pages/getting-started/installation/installation.md @@ -20,7 +20,7 @@ yarn add @mui/material @emotion/react @emotion/styled Please note that [react](https://www.npmjs.com/package/react) >= 17.0.0 and [react-dom](https://www.npmjs.com/package/react-dom) >= 17.0.0 are peer dependencies. -Or if you want to use `styled-components` as a styling engine: +MUI is using [emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run: ```sh // with npm @@ -105,4 +105,4 @@ A set of reusable components for design tools is available, designed to match th - [Figma](https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma): A large UI kit with over 600 handcrafted MUI components. - [Adobe XD](https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd): A large UI kit with over 600 handcrafted MUI components. - [Sketch](https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch): A large UI kit with over 600 handcrafted MUI symbols. -- [UXPin](https://github.com/uxpin-merge/material-ui-5-merge): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. +- [UXPin](https://www.uxpin.com/merge/mui-library): A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment. diff --git a/docs/src/pages/getting-started/learn/learn.md b/docs/src/pages/getting-started/learn/learn.md index 74d51833364882..72d402a015eccc 100644 --- a/docs/src/pages/getting-started/learn/learn.md +++ b/docs/src/pages/getting-started/learn/learn.md @@ -20,6 +20,8 @@ This [selection of basic templates](/getting-started/templates/) will help you g ## Recommended resources +> ⚠️ Note that the resources linked below are using MUI v4, which is not the latest major version. As v5 has been released recently, it will take some time till new contents are created. If you have created any learning material for v5, let us know and we can link them here. + When first learning MUI, you might find third-party blog posts, books and video courses more helpful than the official documentation. Here are some recommended resources, some of which are free. @@ -43,7 +45,7 @@ Here are some recommended resources, some of which are free. - **Implement high fidelity designs**: Bridge the gap between Design & Development. Break down detailed designs and bring them to life with MUI and React. - - 💻 [The Course](https://click.linksynergy.com/deeplink?id=IVuPfk1F/Ow&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fimplement-high-fidelity-designs-with-material-ui-and-reactjs%2F) + - 💻 [The Course](https://www.udemy.com/course/implement-high-fidelity-designs-with-material-ui-and-reactjs/) - **Apply Google Material Design**: This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using MUI and React. diff --git a/docs/src/pages/getting-started/support/support.md b/docs/src/pages/getting-started/support/support.md index dcf8c3c4d29053..3ffa58a30d1b45 100644 --- a/docs/src/pages/getting-started/support/support.md +++ b/docs/src/pages/getting-started/support/support.md @@ -36,7 +36,7 @@ If you think you have found a bug, or have a new feature idea, please start by m Stay up to date with the development of the library by following the blog. -[Read the latest posts](https://medium.com/material-ui) +[Read the latest posts](https://mui.com/blog/) ### Resources 📖 @@ -48,7 +48,7 @@ New to MUI? It's easy to learn if you know where to start! Receive the latest news on MUI. -[Follow us](https://twitter.com/MaterialUI) +[Follow us](https://twitter.com/MUI_hq) ### Supported versions diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms.md index c3a8339a49ff8f..d04286f2a05c23 100644 --- a/docs/src/pages/getting-started/supported-platforms/supported-platforms.md +++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms.md @@ -28,7 +28,7 @@ MUI provides **partial** supports for IE 11. Be aware of the following: - Some of the components have no support. For instance, the new components, the data grid, the date picker. - Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling. - The documentaton itself might crash. -- You need install the [legacy bundle](/guides/minimizing-bundle-size/#legacy-bundle). +- You need to install the [legacy bundle](/guides/minimizing-bundle-size/#legacy-bundle). - You might need to install polyfills. For instance for the [popper.js transitive dependency](https://popper.js.org/docs/v2/browser-support/#ie11). Overall, the library doesn't prioritize the support of IE 11 if it harms the most common use cases. For instance, we will close new issues opened about IE 11 and might not merge pull requests that improve IE 11 support. diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.1.md b/docs/src/pages/getting-started/templates/blog/blog-post.1.md index 2a8c5cff0867b4..c3780e6f502164 100644 --- a/docs/src/pages/getting-started/templates/blog/blog-post.1.md +++ b/docs/src/pages/getting-started/templates/blog/blog-post.1.md @@ -1,6 +1,6 @@ # Sample blog post -#### April 1, 2020 by [Olivier](/) +_April 1, 2020 by [Olivier](/)_ This blog post shows a few different types of content that are supported and styled with Material styles. Basic typography, images, and code are all supported. @@ -22,11 +22,11 @@ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -### Sub-heading +### Sub-heading 1 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -### Sub-heading +### Sub-heading 2 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. @@ -39,8 +39,8 @@ sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. -1. Vestibulum id ligula porta felis euismod semper. -2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -3. Maecenas sed diam eget risus varius blandit sit amet non magna. +1. Vestibulum id ligula porta felis euismod semper. +1. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +1. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.2.md b/docs/src/pages/getting-started/templates/blog/blog-post.2.md index ce67f9fc28e44f..0bc7657666925f 100644 --- a/docs/src/pages/getting-started/templates/blog/blog-post.2.md +++ b/docs/src/pages/getting-started/templates/blog/blog-post.2.md @@ -1,6 +1,6 @@ # Another blog post -#### March 23, 2020 by [Matt](/) +_March 23, 2020 by [Matt](/)_ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. diff --git a/docs/src/pages/getting-started/templates/blog/blog-post.3.md b/docs/src/pages/getting-started/templates/blog/blog-post.3.md index ee892758886d84..337384b7311487 100644 --- a/docs/src/pages/getting-started/templates/blog/blog-post.3.md +++ b/docs/src/pages/getting-started/templates/blog/blog-post.3.md @@ -1,6 +1,6 @@ # New feature -#### March 14, 2020 by [Tom](/) +_March 14, 2020 by [Tom](/)_ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. diff --git a/docs/src/pages/getting-started/templates/templates-pt.md b/docs/src/pages/getting-started/templates/templates-pt.md index 6d399d1d57a5b0..431c347144c03e 100644 --- a/docs/src/pages/getting-started/templates/templates-pt.md +++ b/docs/src/pages/getting-started/templates/templates-pt.md @@ -18,8 +18,8 @@ Se, ao usar estes exemplos você faz mudanças ou melhorias que poderiam melhora Até agora, temos demonstrações para um painel, página de login, página de inscrição, página de blog, fluxo de check-out, página de álbum, página de preços e uma página de rodapé. -## Temas Premium +## Premium templates -Procurando por algo mais? Você pode encontrar modelos completos & temas na seção de modelos premium. +Procurando por algo mais? You can find complete templates & themes in the premium template section. -modelos react +modelos react diff --git a/docs/src/pages/getting-started/templates/templates-zh.md b/docs/src/pages/getting-started/templates/templates-zh.md index e0e380ac63a959..bd894854b42e53 100644 --- a/docs/src/pages/getting-started/templates/templates-zh.md +++ b/docs/src/pages/getting-started/templates/templates-zh.md @@ -18,8 +18,8 @@ title: 超过 9 个免费的 React 模板 目前为止，我们提供了关于主控面板（dashboard），登录页面（sign in page），注册页面（sign up page），博客（blog page），付款流程（checkout flow），专辑页面（album page），价格页面（pricing page）以及固定页脚（sticky footer page）的演示。 -## 高级版主题 +## Premium templates -你还在寻找更多主题吗？ 你还在寻找更多主题吗？ 你可以在 高级模板区域找到完整的模板和主题列表。 +你还在寻找更多主题吗？ You can find complete templates & themes in the premium template section. -react templates +react templates diff --git a/docs/src/pages/guides/classname-generator/classname-generator-zh.md b/docs/src/pages/guides/classname-generator/classname-generator-zh.md index af46385ebe17bf..05666859fab0a0 100644 --- a/docs/src/pages/guides/classname-generator/classname-generator-zh.md +++ b/docs/src/pages/guides/classname-generator/classname-generator-zh.md @@ -1,14 +1,14 @@ -# ClassName generator +# 类名生成器 -

    Configure classname generation at build time.

    +

    在构建时配置类名生成

    -This API is introduced in `@mui/material` (v5.0.5) as a replacement of deprecated [`createGenerateClassName`](/styles/api/#creategenerateclassname-options-class-name-generator). +这个API 在 `@mui/material` (v5.0.5) 中引入，作为已弃用[`createGenerateClassName`](/styles/api/#creategenerateclassname-options-class-name-generator)的替代品 -> ⚠️ **Note**: this API is at an unstable stage which might change in the future. +> ⚠️ **注意**: 这个API处于不稳定阶段，将来可能发生变化。 -## Global classname prefix +## 全局类名前缀 -By default, MUI generates a global classname for each component slot. For example: +默认情况下， MUI为每个组件插槽生成一个全局类名。 例如: ```js import Button from '@mui/material/Button'; @@ -18,7 +18,7 @@ function App() { } ``` -Generates the following HTML: +生成以下HTML： ```html + + ); + } + + export default Apply; +``` + +If you were using the `$` syntax, the transformation would look like this: + +```diff + import * as React from 'react'; +-import makeStyles from '@material-ui/styles/makeStyles'; ++import { makeStyles } from 'tss-react/mui'; + +-const useStyles = makeStyles((theme) => { ++const useStyles = makeStyles()((_theme, _params, classes) => ({ + parent: { + padding: 30, +- '&:hover $child': { ++ [`&:hover .${classes.child}`]: { + backgroundColor: 'red', + }, + }, + child: { + backgroundColor: 'blue', + }, + }); + + function App() { +- const classes = useStyles(); ++ const { classes } = useStyles(); + + return ( +
    +
    + Background turns red when the mouse is hover the parent +
    +
    + ); + } + + export default App; +``` + +> **Note:** In plain JS projects (not using TypeScript), remove ``. + +Now, a comprehensive example using both the `$` syntax, `useStyles()` parameters +and [an explicit name for the stylesheet](https://github.com/garronej/tss-react#naming-the-stylesheets-useful-for-debugging). + +```diff +-import clsx from 'clsx'; +-import { makeStyles, createStyles } from '@material-ui/core/styles'; ++import { makeStyles } from 'tss-react/mui'; + +-const useStyles = makeStyles((theme) => createStyles< +- 'root' | 'small' | 'child', { color: 'primary' | 'secondary' } +->({ ++const useStyles = makeStyles< ++ { color: 'primary' | 'secondary' }, 'child' | 'small' ++>({ name: 'App' })((theme, { color }, classes) => ({ +- root: ({ color })=> ({ ++ root: { + padding: 30, +- '&:hover .child': { ++ [`&:hover .${classes.child}`]: { + backgroundColor: theme.palette[color].main, + } +- }), ++ }, + small: {}, + child: { + border: '1px solid black', + height: 50, +- '&.small': { ++ [`&.${classes.small}`]: { + height: 30 + } + } +-}, { name: 'App' }); ++})); + + function App() { +- const classes = useStyles({ color: 'primary' }); ++ const { classes, cx } = useStyles({ color: 'primary' }); + + return ( +
    +
    + The Background take the primary theme color when the mouse hovers the parent. +
    +-
    ++
    + The Background take the primary theme color when the mouse hovers the parent. + I am smaller than the other child. +
    +
    + ); + } + + export default App; +``` + +> **WARNING**: You should drop [`clsx`](https://www.npmjs.com/package/clsx) in favor of [`cx`](https://emotion.sh/docs/@emotion/css#cx). +> The key advantage of `cx` is that it detects emotion generated class names ensuring styles are overwritten in the correct order. +> **Note**: To ensure that your class names always includes the actual name of your components, you can provide the `name` as an implicitly named key (`name: { App }`). +> [See doc](https://github.com/garronej/tss-react#naming-the-stylesheets-useful-for-debugging). + +#### `withStyles()` - +`tss-react` also features a [type-safe implementation](https://github.com/garronej/tss-react#withstyles) of [v4's `withStyles()`](https://v4.mui.com/styles/api/#withstyles-styles-options-higher-order-component). -> **Note:** this library is **not maintained** by MUI. If you have any issue regarding to it, please open an issue in [tss-react repository](https://github.com/garronej/tss-react/issues/new). +> **Note:** The equivalent of the `$` syntax is also supported in tss's `withStyles()`. +> [See doc](https://github.com/garronej/tss-react#nested-selector-with-the-withstyles-api). -💡 Once you migrate all of the styling, remove unnecessary `@mui/styles` by +```diff +-import Button from '@material-ui/core/Button'; ++import Button from '@mui/material/Button'; +-import withStyles from '@material-ui/styles/withStyles'; ++import { withStyles } from 'tss-react/mui'; + + const MyCustomButton = withStyles( ++ Button, + (theme) => ({ + root: { + minHeight: '30px', + }, + textPrimary: { + color: theme.palette.text.primary, + }, + '@media (min-width: 960px)': { + textPrimary: { + fontWeight: 'bold', + }, + }, + }), +-)(Button); ++); + + export default MyCustomButton; +``` + +#### Overriding styles - `classes` prop + +[Documentation of the feature in v4](https://v4.mui.com/styles/advanced/#makestyles) - [Equivalent in `tss-react`](https://v4.mui.com/styles/advanced/#makestyles) + +```diff +-import { makeStyles } from '@material-ui/core/styles'; ++import { makeStyles } from 'tss-react/mui'; ++import { useMergedClasses } from 'tss-react'; + +-const useStyles = makeStyles({ ++const useStyles = makeStyles()({ + root: {}, // a style rule + label: {}, // a nested style rule +}); + +function Nested(props) { +- const classes = useStyles(props); ++ let { classes } = useStyles(); ++ classes = useMergedClasses(classes, props.classes); + + return ( + + ); +} + +function Parent() { + return +} +``` + +You may end up with eslint warnings [like this one](https://user-images.githubusercontent.com/6702424/148657837-eae48942-fb86-4516-abe4-5dc10f44f0be.png) if you deconstruct more that one item. +Don't hesitate to disable `eslint(prefer-const)`, [like this](https://github.com/thieryw/gitlanding/blob/b2b0c71d95cfd353979c86dfcfa1646ef1665043/.eslintrc.js#L17) in a regular project, or [like this](https://github.com/InseeFrLab/onyxia-web/blob/a264ec6a6a7110cb1a17b2e22cc0605901db6793/package.json#L133) in a CRA. + +**Note:** `tss-react` is **not maintained** by MUI. +If you have any question about how to setup SSR (Next.js) or if you are wondering +how to customize the `theme` object please refer to `tss-react`'s documentation, +the [Mui integration section](https://github.com/garronej/tss-react#mui-integration) in particular. +You can also [submit an issue](https://github.com/garronej/tss-react/issues/new) for any bug or +feature request and [start a discussion](https://github.com/garronej/tss-react/discussions) if you need help. + +💡 Once you migrate all of the styling, remove unnecessary `@mui/styles` by: ```sh npm uninstall @mui/styles @@ -2640,9 +2985,13 @@ npm uninstall @mui/styles yarn remove @mui/styles ``` +> **Warning:** Keep `@emotion/styled` as a dependency of your project, +> even if you never use it explicitly, it's a peer dependency of `@mui/material`. + ## CSS Specificity -If you want to apply styles to components by importing a css file, you need to bump up specificity in order to always select the correct component. Consider the following example. +If you want to apply styles to components by importing a css file, you need to bump up specificity in order to always select the correct component. +Consider the following example: ```js import './style.css'; @@ -2796,7 +3145,9 @@ For more details, checkout [this issue](https://github.com/mui-org/material-ui/i ### [Types] Property "palette", "spacing" does not exist on type 'DefaultTheme' -Since `makeStyles` is now exported from `@mui/styles` package which does not know about `Theme` in the core package. To fix this, you need to augment the `DefaultTheme` (empty object) in `@mui/styles` with `Theme` from the core. [Read more about module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) +Since `makeStyles` is now exported from `@mui/styles` package which does not know about `Theme` in the core package. +To fix this, you need to augment the `DefaultTheme` (empty object) in `@mui/styles` with `Theme` from the core. +[Read more about module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) **TypeScript Project** @@ -2818,8 +3169,8 @@ If your IDE (ex. VSCode) is able to infer types from `d.ts` file, create `index. ```js // index.d.ts -declare module "@mui/private-theming" { - import type { Theme } from "@mui/material/styles"; +declare module '@mui/private-theming' { + import type { Theme } from '@mui/material/styles'; interface DefaultTheme extends Theme {} } @@ -2901,7 +3252,8 @@ export default App; ### TypeError: Cannot read properties of undefined (reading 'pxToRem') -The root cause of this error comes from accessing empty theme. Make sure that you have follow these checklist: +The root cause of this error comes from accessing empty theme. +Make sure that you have follow these checklist: - `styled` should only be imported from `@mui/material/styles` (If you are not using standalone `@mui/system`) @@ -2909,7 +3261,8 @@ The root cause of this error comes from accessing empty theme. Make sure that yo import { styled } from '@mui/material/styles'; ``` -- Make sure that no `useStyles` is called outside of ``. If you have, consider fixing it like [this suggestion](#makestyles-typeerror-cannot-read-property-drawer-of-undefined) +- Make sure that no `useStyles` is called outside of ``. + If you have, consider fixing it like [this suggestion](#makestyles-typeerror-cannot-read-property-drawer-of-undefined) For more details, [checkout this issue](https://github.com/mui-org/material-ui/issues/28496) @@ -2933,4 +3286,5 @@ project@0.1.0 /path/to/project └── @material-ui/core@4.12.3 ``` -You can notice based on the output above that `@material-ui/core` is a dependency of `@mui/x-data-grid`. In this specific example, you need to bump the version of `@mui/x-data-grid` to [version 5](https://www.npmjs.com/package/@mui/x-data-grid) so that it depends on `@mui/material` instead. +You can notice based on the output above that `@material-ui/core` is a dependency of `@mui/x-data-grid`. +In this specific example, you need to bump the version of `@mui/x-data-grid` to [version 5](https://www.npmjs.com/package/@mui/x-data-grid) so that it depends on `@mui/material` instead. diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md index 32409a746ae348..b9a6649ce6327d 100644 --- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md +++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md @@ -8,7 +8,7 @@ O tamanho do pacote do Material-UI é levado muito a sério. Fotos contendo o ta ## Quando e como usar tree-shaking? -Tree-shaking no Material-UI funciona de uma forma moderna. Material-UI expõe sua API completa na importação de nível superior `material-ui`. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: +Tree-shaking no Material-UI funciona de uma forma moderna. MUI exposes its full API on the top-level `@mui` imports. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: ```js import { Button, TextField } from '@material-ui/core'; diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md index 01a96366cfff9e..28798cfac95318 100644 --- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md +++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md @@ -8,7 +8,7 @@ The bundle size of MUI is taken very seriously. 每一次提交代码时，我 ## 何时以及如何使用 tree-shaking? -Tree-shaking of MUI works out of the box in modern frameworks. Material-UI 在导入顶层的 `material-ui` 时会提供出其完整的 API。 If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: +Tree-shaking of MUI works out of the box in modern frameworks. MUI exposes its full API on the top-level `@mui` imports. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: ```js import { Button, TextField } from '@material-ui/core'; diff --git a/docs/src/pages/guides/right-to-left/Direction.js b/docs/src/pages/guides/right-to-left/Direction.js index 3e308f0220edac..c48161f7091ee0 100644 --- a/docs/src/pages/guides/right-to-left/Direction.js +++ b/docs/src/pages/guides/right-to-left/Direction.js @@ -1,18 +1,29 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import TextField from '@mui/material/TextField'; +import rtlPlugin from 'stylis-plugin-rtl'; +import { prefixer } from 'stylis'; +import { CacheProvider } from '@emotion/react'; +import createCache from '@emotion/cache'; const theme = createTheme({ direction: 'rtl', // Both here and }); +// Create rtl cache +const cacheRtl = createCache({ + key: 'muirtl', + stylisPlugins: [prefixer, rtlPlugin], +}); export default function Direction() { return ( - -
    - - -
    -     + + +
    + + +
    +     +     ); } diff --git a/docs/src/pages/guides/right-to-left/Direction.tsx b/docs/src/pages/guides/right-to-left/Direction.tsx index 3e308f0220edac..c48161f7091ee0 100644 --- a/docs/src/pages/guides/right-to-left/Direction.tsx +++ b/docs/src/pages/guides/right-to-left/Direction.tsx @@ -1,18 +1,29 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import TextField from '@mui/material/TextField'; +import rtlPlugin from 'stylis-plugin-rtl'; +import { prefixer } from 'stylis'; +import { CacheProvider } from '@emotion/react'; +import createCache from '@emotion/cache'; const theme = createTheme({ direction: 'rtl', // Both here and }); +// Create rtl cache +const cacheRtl = createCache({ + key: 'muirtl', + stylisPlugins: [prefixer, rtlPlugin], +}); export default function Direction() { return ( - -
    - - -
    -     + + +
    + + +
    +     +     ); } diff --git a/docs/src/pages/guides/right-to-left/Direction.tsx.preview b/docs/src/pages/guides/right-to-left/Direction.tsx.preview index 7a057e068f0028..4f9bdb2bfe98df 100644 --- a/docs/src/pages/guides/right-to-left/Direction.tsx.preview +++ b/docs/src/pages/guides/right-to-left/Direction.tsx.preview @@ -1,6 +1,8 @@ - -
    - - -
    -     \ No newline at end of file + + +
    + + +
    +     +     \ No newline at end of file diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js index b5dde6b5a20cf6..5319a203f9cab6 100644 --- a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { prefixer } from 'stylis'; import rtlPlugin from 'stylis-plugin-rtl'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; @@ -22,8 +23,7 @@ const UnaffectedText = styled('div')` const rtlCache = createCache({ key: 'muirtl', - // @ts-ignore external dependency - stylisPlugins: [rtlPlugin], + stylisPlugins: [prefixer, rtlPlugin], }); const ltrCache = createCache({ diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx index b5dde6b5a20cf6..5319a203f9cab6 100644 --- a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx +++ b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { prefixer } from 'stylis'; import rtlPlugin from 'stylis-plugin-rtl'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; @@ -22,8 +23,7 @@ const UnaffectedText = styled('div')` const rtlCache = createCache({ key: 'muirtl', - // @ts-ignore external dependency - stylisPlugins: [rtlPlugin], + stylisPlugins: [prefixer, rtlPlugin], }); const ltrCache = createCache({ diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md index ebdad7cf22153f..153304540378a1 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left.md +++ b/docs/src/pages/guides/right-to-left/right-to-left.md @@ -58,17 +58,19 @@ Having installed the plugin in your project, MUI components still require it to #### 4.1 emotion -If you use emotion as your style engine, you should create new cache instance that uses the `stylis-plugin-rtl` and provide that on the top of your application tree. The [CacheProvider](https://emotion.sh/docs/cache-provider) component enables this: +If you use emotion as your style engine, you should create a new cache instance that uses the `stylis-plugin-rtl` (the default `prefixer` plugin must also be included in order to retain vendor prefixing) and provide that on the top of your application tree. +The [CacheProvider](https://emotion.sh/docs/cache-provider) component enables this: ```jsx import rtlPlugin from 'stylis-plugin-rtl'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; +import { prefixer } from 'stylis'; // Create rtl cache const cacheRtl = createCache({ key: 'muirtl', - stylisPlugins: [rtlPlugin], + stylisPlugins: [prefixer, rtlPlugin], }); function RTL(props) { diff --git a/docs/src/pages/guides/routing/routing-pt.md b/docs/src/pages/guides/routing/routing-pt.md index 2d3a3a8033fcbb..b887081fccf188 100644 --- a/docs/src/pages/guides/routing/routing-pt.md +++ b/docs/src/pages/guides/routing/routing-pt.md @@ -82,7 +82,7 @@ const LinkBehavior = React.forwardRef((props, ref) => ( O Next.js tem [um componente Link personalizado](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides adapters for usage with Material-UI. -- A primeira versão do adaptador é o componente [`NextLinkComposed`](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript/src/Link.tsx) Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. +- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui-org/material-ui/blob/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component. Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. ```tsx import Button from '@material-ui/core/Button'; diff --git a/docs/src/pages/guides/routing/routing-zh.md b/docs/src/pages/guides/routing/routing-zh.md index 1d2ce0255fc111..9abf007670acaa 100644 --- a/docs/src/pages/guides/routing/routing-zh.md +++ b/docs/src/pages/guides/routing/routing-zh.md @@ -82,7 +82,7 @@ In real-life applications, using a native element is rarely eno Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides adapters for usage with Material-UI. -- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. +- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui-org/material-ui/blob/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. ```tsx import Button from '@material-ui/core/Button'; diff --git a/docs/src/pages/guides/styled-engine/styled-engine-zh.md b/docs/src/pages/guides/styled-engine/styled-engine-zh.md index 6b2b65a2170b90..0500232cb993a9 100644 --- a/docs/src/pages/guides/styled-engine/styled-engine-zh.md +++ b/docs/src/pages/guides/styled-engine/styled-engine-zh.md @@ -79,7 +79,7 @@ These two packages implement the same interface, which makes it makes possible t 如果您正在使用 create-react-app，示例项目中有一个开箱即用的模板。 -If you already have [styled-components](https://github.com/styled-components/styled-components) installed, it's possible to use it exclusively. There are currently two packages available to choose from: +如果您已经安装了 `styled-components` , 单独使用它是可行的。 目前有两种方式可供选择: @@ -89,4 +89,4 @@ If you already have [styled-components](https://github.com/styled-components/sty > **注意**: `@emotion/react`, `@emotion/styled`, 和 `styled-components` 是 `@mui/materials` 的可选对等依赖，所以您需要自己安装它们。 更多信息请访问 [安装指南](/getting-started/installation/)。 -> **注意：** 这个 package-swap 方法与替换 React 的 [Preact](https://github.com/preactjs/preact) 完全相同。 Preact 开发团队记录了大量安装配置。 如果您被 MUI + styled-components，请不要犹豫，直接查看他们是如何解决问题的，因为您可能会在里面找到解决思路。 +> **注意：** 这个 package-swap 方法与替换 React 的 [Preact](https://github.com/preactjs/preact) 完全相同。 Preact 开发团队记录了大量安装配置。 如果您被 MUI + styled-components 卡住，请不要犹豫，直接查看他们是如何解决问题的，因为您可能会在里面找到解决思路。 diff --git a/docs/src/pages/guides/styled-engine/styled-engine.md b/docs/src/pages/guides/styled-engine/styled-engine.md index 4aba625e3eebc3..de39afd17e5404 100644 --- a/docs/src/pages/guides/styled-engine/styled-engine.md +++ b/docs/src/pages/guides/styled-engine/styled-engine.md @@ -95,7 +95,6 @@ If you are using TypeScript, you will need to also update the TSConfig. ### Ready-to-use examples If you are using create-react-app, there is a ready-to-use template in the example projects. - You can use these `styled-component` examples as a reference: @@ -106,4 +105,4 @@ You can use these `styled-component` examples as a reference: > **Note**: `@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself. See the [Installation guide](/getting-started/installation/) for more info. -> **Note:** This package-swap approach is identical to the replacement of React with [Preact](https://github.com/preactjs/preact). The Preact team has documented a large number of installation configurations. If you are stuck with MUI + styled-components, don't hesitate to check out how they solve the problem, as you can likely transfer the solution. +This package-swap approach is identical to the replacement of React with [Preact](https://github.com/preactjs/preact). The Preact team has documented a large number of installation configurations. If you are stuck with MUI + styled-components, don't hesitate to check out how they solve the problem, as you can likely transfer the solution. diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md index b31324ec80dba0..44381922a2fe16 100644 --- a/docs/src/pages/guides/typescript/typescript.md +++ b/docs/src/pages/guides/typescript/typescript.md @@ -8,8 +8,7 @@ MUI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) example. -For types to work, you should have at the minimum the following options enabled -in your `tsconfig.json`: +For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`: ```json { diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js index 7c27f14bbd73c4..574fb4c5ac4e04 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js +++ b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js @@ -124,6 +124,7 @@ TextField.propTypes = { classes: PropTypes.object.isRequired, /** * Props applied to the [`InputLabel`](/api/input-label/) element. + * Pointer events like `onClick` are enabled if and only if `shrink` is `true`. */ InputLabelProps: PropTypes.object, /** diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js index 80af88bd3d14ec..04c756b168bcc6 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js +++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js @@ -65,11 +65,7 @@ export default function AppFooter() { alt="Facebook" /> - + Twitter - + Twitter + + Last modified: October 7th, 2018. + + MUI is committed to protecting and respecting your privacy. This Privacy Policy sets out how we collect and process personal information about you when you visit the website mui.com, when you use our products and services (our "Services"), or when you otherwise do business or make contact with us. Please read this policy carefully to understand how we handle and treat your personal information. diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/terms.md b/docs/src/pages/premium-themes/onepirate/modules/views/terms.md index f9645f3f34cbd8..75902cf4866108 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/terms.md +++ b/docs/src/pages/premium-themes/onepirate/modules/views/terms.md @@ -1,5 +1,10 @@ + + + Last modified: October 7th, 2018. + + ## 1. Services - 1.1 These MUI Terms of Service (these "Terms") apply to the features and functions provided by Functional Software, Inc. ("MUI," "our," or "we") via mui.com (the "Site") (collectively, the "Services"). By accessing or using the Site or the Services, you agree to be bound by these Terms. If you do not agree to these Terms, you are not allowed to use the Site or the Services. The "Effective Date" of these Terms is the date you first use the Site, or access any of the Services. diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md index 8c8685bb9c039f..4e8cd5978eadaf 100644 --- a/docs/src/pages/styles/basics/basics.md +++ b/docs/src/pages/styles/basics/basics.md @@ -6,7 +6,7 @@ > It is deprecated in v5. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore. > If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative. - +> > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18. MUI aims to provide a strong foundation for building dynamic UIs. diff --git a/docs/src/pages/styles/typescript/typescript.md b/docs/src/pages/styles/typescript/typescript.md index d4ef70072e9577..8a504b61b47e8f 100644 --- a/docs/src/pages/styles/typescript/typescript.md +++ b/docs/src/pages/styles/typescript/typescript.md @@ -1,10 +1,10 @@ # TypeScript -### Customization of `Theme` +## Customization of `Theme` You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`. -```typescript +```ts declare module '@mui/material/styles' { interface DefaultTheme { myProperty: string; diff --git a/docs/src/pages/system/box/BoxSx.js b/docs/src/pages/system/box/BoxSx.js index ef984938135a50..2db657a0b79a2c 100644 --- a/docs/src/pages/system/box/BoxSx.js +++ b/docs/src/pages/system/box/BoxSx.js @@ -7,8 +7,8 @@ export default function BoxSx() { theme={{ palette: { primary: { - main: '#00cc44', - dark: '#00802b', + main: '#007FFF', + dark: '#0059B2', }, }, }} @@ -17,9 +17,9 @@ export default function BoxSx() { sx={{ width: 300, height: 300, - bgcolor: 'primary.dark', + bgcolor: 'primary.main', '&:hover': { - backgroundColor: 'primary.main', + backgroundColor: 'primary.dark', opacity: [0.9, 0.8, 0.7], }, }} diff --git a/docs/src/pages/system/box/BoxSx.tsx b/docs/src/pages/system/box/BoxSx.tsx index ef984938135a50..2db657a0b79a2c 100644 --- a/docs/src/pages/system/box/BoxSx.tsx +++ b/docs/src/pages/system/box/BoxSx.tsx @@ -7,8 +7,8 @@ export default function BoxSx() { theme={{ palette: { primary: { - main: '#00cc44', - dark: '#00802b', + main: '#007FFF', + dark: '#0059B2', }, }, }} @@ -17,9 +17,9 @@ export default function BoxSx() { sx={{ width: 300, height: 300, - bgcolor: 'primary.dark', + bgcolor: 'primary.main', '&:hover': { - backgroundColor: 'primary.main', + backgroundColor: 'primary.dark', opacity: [0.9, 0.8, 0.7], }, }} diff --git a/docs/src/pages/system/display/Block.js b/docs/src/pages/system/display/Block.js index 3cecc460716eb3..35a69bdde2165f 100644 --- a/docs/src/pages/system/display/Block.js +++ b/docs/src/pages/system/display/Block.js @@ -10,7 +10,15 @@ export default function Block() { display: 'block', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > block @@ -21,7 +29,15 @@ export default function Block() { display: 'block', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > block diff --git a/docs/src/pages/system/display/Block.tsx b/docs/src/pages/system/display/Block.tsx index 3cecc460716eb3..35a69bdde2165f 100644 --- a/docs/src/pages/system/display/Block.tsx +++ b/docs/src/pages/system/display/Block.tsx @@ -10,7 +10,15 @@ export default function Block() { display: 'block', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > block @@ -21,7 +29,15 @@ export default function Block() { display: 'block', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > block diff --git a/docs/src/pages/system/display/Hiding.js b/docs/src/pages/system/display/Hiding.js index f43add414aac00..71fb29a2ceb009 100644 --- a/docs/src/pages/system/display/Hiding.js +++ b/docs/src/pages/system/display/Hiding.js @@ -4,10 +4,24 @@ import Box from '@mui/material/Box'; export default function Hiding() { return (
    - + hide on screens wider than md - + hide on screens smaller than md
    diff --git a/docs/src/pages/system/display/Hiding.tsx b/docs/src/pages/system/display/Hiding.tsx index f43add414aac00..71fb29a2ceb009 100644 --- a/docs/src/pages/system/display/Hiding.tsx +++ b/docs/src/pages/system/display/Hiding.tsx @@ -4,10 +4,24 @@ import Box from '@mui/material/Box'; export default function Hiding() { return (
    - + hide on screens wider than md - + hide on screens smaller than md
    diff --git a/docs/src/pages/system/display/Hiding.tsx.preview b/docs/src/pages/system/display/Hiding.tsx.preview deleted file mode 100644 index b8eda3a118d7fe..00000000000000 --- a/docs/src/pages/system/display/Hiding.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - hide on screens wider than md - - - hide on screens smaller than md - \ No newline at end of file diff --git a/docs/src/pages/system/display/Inline.js b/docs/src/pages/system/display/Inline.js index 232322a47f1eaa..49b2daa378238e 100644 --- a/docs/src/pages/system/display/Inline.js +++ b/docs/src/pages/system/display/Inline.js @@ -10,7 +10,15 @@ export default function Inline() { display: 'inline', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > inline @@ -21,7 +29,15 @@ export default function Inline() { display: 'inline', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > inline diff --git a/docs/src/pages/system/display/Inline.tsx b/docs/src/pages/system/display/Inline.tsx index 232322a47f1eaa..49b2daa378238e 100644 --- a/docs/src/pages/system/display/Inline.tsx +++ b/docs/src/pages/system/display/Inline.tsx @@ -10,7 +10,15 @@ export default function Inline() { display: 'inline', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > inline @@ -21,7 +29,15 @@ export default function Inline() { display: 'inline', p: 1, m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > inline diff --git a/docs/src/pages/system/display/Overflow.js b/docs/src/pages/system/display/Overflow.js index f2c0b89e851371..b514e5d4051387 100644 --- a/docs/src/pages/system/display/Overflow.js +++ b/docs/src/pages/system/display/Overflow.js @@ -6,15 +6,43 @@ export default function Overflow() {
    + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} > - Overflow Hidden. Overflow Hidden. Overflow Hidden. + Not scrollable, overflow is hidden + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} > - Overflow Auto. Overflow Auto. Overflow Auto. + Try scrolling this overflow auto box
    ); diff --git a/docs/src/pages/system/display/Overflow.tsx b/docs/src/pages/system/display/Overflow.tsx index f2c0b89e851371..b514e5d4051387 100644 --- a/docs/src/pages/system/display/Overflow.tsx +++ b/docs/src/pages/system/display/Overflow.tsx @@ -6,15 +6,43 @@ export default function Overflow() {
    + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} > - Overflow Hidden. Overflow Hidden. Overflow Hidden. + Not scrollable, overflow is hidden + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} > - Overflow Auto. Overflow Auto. Overflow Auto. + Try scrolling this overflow auto box
    ); diff --git a/docs/src/pages/system/display/Overflow.tsx.preview b/docs/src/pages/system/display/Overflow.tsx.preview deleted file mode 100644 index 9b90d82290f32e..00000000000000 --- a/docs/src/pages/system/display/Overflow.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - Overflow Hidden. Overflow Hidden. Overflow Hidden. - - - Overflow Auto. Overflow Auto. Overflow Auto. - \ No newline at end of file diff --git a/docs/src/pages/system/display/Print.js b/docs/src/pages/system/display/Print.js index ab8141eb56a11d..47a057fd5ac5b0 100644 --- a/docs/src/pages/system/display/Print.js +++ b/docs/src/pages/system/display/Print.js @@ -4,10 +4,26 @@ import Box from '@mui/material/Box'; export default function Print() { return (
    - + Screen Only (Hide on print only) - + Print Only (Hide on screen only)
    diff --git a/docs/src/pages/system/display/Print.tsx b/docs/src/pages/system/display/Print.tsx index ab8141eb56a11d..47a057fd5ac5b0 100644 --- a/docs/src/pages/system/display/Print.tsx +++ b/docs/src/pages/system/display/Print.tsx @@ -4,10 +4,26 @@ import Box from '@mui/material/Box'; export default function Print() { return (
    - + Screen Only (Hide on print only) - + Print Only (Hide on screen only)
    diff --git a/docs/src/pages/system/display/Print.tsx.preview b/docs/src/pages/system/display/Print.tsx.preview deleted file mode 100644 index b40578de35a300..00000000000000 --- a/docs/src/pages/system/display/Print.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - Screen Only (Hide on print only) - - - Print Only (Hide on screen only) - \ No newline at end of file diff --git a/docs/src/pages/system/display/TextOverflow.js b/docs/src/pages/system/display/TextOverflow.js index 79edca51af4715..67aa6405241d50 100644 --- a/docs/src/pages/system/display/TextOverflow.js +++ b/docs/src/pages/system/display/TextOverflow.js @@ -8,23 +8,43 @@ export default function TextOverflow() { component="div" sx={{ textOverflow: 'clip', - my: 2, overflow: 'hidden', - bgcolor: 'background.paper', + my: 2, + p: 1, + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Text Overflow Clip. Text Overflow Clip. + Lorem Ipsum is simply dummy text     + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Text Overflow Ellipsis. Text Overflow Ellipsis + Lorem Ipsum is simply dummy text
    ); diff --git a/docs/src/pages/system/display/TextOverflow.tsx b/docs/src/pages/system/display/TextOverflow.tsx index 79edca51af4715..67aa6405241d50 100644 --- a/docs/src/pages/system/display/TextOverflow.tsx +++ b/docs/src/pages/system/display/TextOverflow.tsx @@ -8,23 +8,43 @@ export default function TextOverflow() { component="div" sx={{ textOverflow: 'clip', - my: 2, overflow: 'hidden', - bgcolor: 'background.paper', + my: 2, + p: 1, + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Text Overflow Clip. Text Overflow Clip. + Lorem Ipsum is simply dummy text + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Text Overflow Ellipsis. Text Overflow Ellipsis + Lorem Ipsum is simply dummy text ); diff --git a/docs/src/pages/system/display/Visibility.js b/docs/src/pages/system/display/Visibility.js index 6a73301c34d6ac..209d03d8699ad8 100644 --- a/docs/src/pages/system/display/Visibility.js +++ b/docs/src/pages/system/display/Visibility.js @@ -8,12 +8,21 @@ export default function Visibility() { component="span" sx={{ visibility: 'visible', + my: 2, p: 1, - m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Visibility Visible + Visible container - Visibility Hidden + Invisible container ); diff --git a/docs/src/pages/system/display/Visibility.tsx b/docs/src/pages/system/display/Visibility.tsx index 6a73301c34d6ac..209d03d8699ad8 100644 --- a/docs/src/pages/system/display/Visibility.tsx +++ b/docs/src/pages/system/display/Visibility.tsx @@ -8,12 +8,21 @@ export default function Visibility() { component="span" sx={{ visibility: 'visible', + my: 2, p: 1, - m: 1, - bgcolor: 'background.paper', + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - Visibility Visible + Visible container - Visibility Hidden + Invisible container ); diff --git a/docs/src/pages/system/display/WhiteSpace.js b/docs/src/pages/system/display/WhiteSpace.js index 400473c34f9193..373a88baaa3334 100644 --- a/docs/src/pages/system/display/WhiteSpace.js +++ b/docs/src/pages/system/display/WhiteSpace.js @@ -8,21 +8,44 @@ export default function WhiteSpace() { component="div" sx={{ whiteSpace: 'nowrap', + overflowX: 'auto', my: 2, - bgcolor: 'background.paper', + p: 1, + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - White Space Nowrap. White Space Nowrap. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s. + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - White Space Normal. White Space Normal. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s. ); diff --git a/docs/src/pages/system/display/WhiteSpace.tsx b/docs/src/pages/system/display/WhiteSpace.tsx index 400473c34f9193..373a88baaa3334 100644 --- a/docs/src/pages/system/display/WhiteSpace.tsx +++ b/docs/src/pages/system/display/WhiteSpace.tsx @@ -8,21 +8,44 @@ export default function WhiteSpace() { component="div" sx={{ whiteSpace: 'nowrap', + overflowX: 'auto', my: 2, - bgcolor: 'background.paper', + p: 1, + bgcolor: (theme) => + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - White Space Nowrap. White Space Nowrap. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s. + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > - White Space Normal. White Space Normal. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s. ); diff --git a/docs/src/pages/system/display/display.md b/docs/src/pages/system/display/display.md index 284646ea79a237..4746db1b028beb 100644 --- a/docs/src/pages/system/display/display.md +++ b/docs/src/pages/system/display/display.md @@ -70,10 +70,10 @@ For faster mobile-friendly development, use responsive display classes for showi ```jsx - Overflow Hidden + Not scrollable, overflow is hidden - - Overflow visible + + Try scrolling this overflow auto box ``` @@ -83,10 +83,10 @@ For faster mobile-friendly development, use responsive display classes for showi ```jsx - Text Overflow Clip + Lorem Ipsum is simply dummy text - Text Overflow Ellipsis + Lorem Ipsum is simply dummy text ``` @@ -96,10 +96,10 @@ For faster mobile-friendly development, use responsive display classes for showi ```jsx - Visibility Visible + Visible container - Visibility Hidden + Invisible container ``` @@ -109,10 +109,10 @@ For faster mobile-friendly development, use responsive display classes for showi ```jsx - White Space Nowrap + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. - White Space Normal + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. ``` diff --git a/docs/src/pages/system/flexbox/AlignContent.js b/docs/src/pages/system/flexbox/AlignContent.js index 7ec515ae2179e4..823cc9bce4986f 100644 --- a/docs/src/pages/system/flexbox/AlignContent.js +++ b/docs/src/pages/system/flexbox/AlignContent.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -45,6 +47,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -65,6 +68,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -85,6 +89,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -105,6 +110,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -125,6 +131,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -145,6 +152,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/AlignContent.tsx b/docs/src/pages/system/flexbox/AlignContent.tsx index bd37da34449565..6353c58e32ae0e 100644 --- a/docs/src/pages/system/flexbox/AlignContent.tsx +++ b/docs/src/pages/system/flexbox/AlignContent.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -34,6 +36,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -54,6 +57,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -74,6 +78,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -94,6 +99,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -114,6 +120,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 @@ -134,6 +141,7 @@ export default function AlignContent() { bgcolor: 'background.paper', maxWidth: 380, height: 200, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/AlignItems.js b/docs/src/pages/system/flexbox/AlignItems.js index f916b442293dd5..9c8e8124a0771d 100644 --- a/docs/src/pages/system/flexbox/AlignItems.js +++ b/docs/src/pages/system/flexbox/AlignItems.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -43,6 +45,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -57,6 +60,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -71,6 +75,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -85,6 +90,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -99,6 +105,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 116, + borderRadius: 1, }} > (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -32,6 +34,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -46,6 +49,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -60,6 +64,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -74,6 +79,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 100, + borderRadius: 1, }} > Item 1 @@ -88,6 +94,7 @@ export default function AlignItems() { m: 1, bgcolor: 'background.paper', height: 116, + borderRadius: 1, }} > (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -43,6 +45,7 @@ export default function AlignSelf() { m: 1, bgcolor: 'background.paper', height: 124, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx b/docs/src/pages/system/flexbox/AlignSelf.tsx index cc1d6d0207fb2a..257d6b1f3261ba 100644 --- a/docs/src/pages/system/flexbox/AlignSelf.tsx +++ b/docs/src/pages/system/flexbox/AlignSelf.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -32,6 +34,7 @@ export default function AlignSelf() { m: 1, bgcolor: 'background.paper', height: 124, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx.preview b/docs/src/pages/system/flexbox/AlignSelf.tsx.preview index fd0571dd7da6ac..4afb4648944fd4 100644 --- a/docs/src/pages/system/flexbox/AlignSelf.tsx.preview +++ b/docs/src/pages/system/flexbox/AlignSelf.tsx.preview @@ -6,6 +6,7 @@ m: 1, bgcolor: 'background.paper', height: 124, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/Display.js b/docs/src/pages/system/flexbox/Display.js index 2dee9dc2fedff5..d414fe24fc630e 100644 --- a/docs/src/pages/system/flexbox/Display.js +++ b/docs/src/pages/system/flexbox/Display.js @@ -4,10 +4,40 @@ import Box from '@mui/material/Box'; export default function Display() { return (
    - + (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > {"I'm a flexbox container that uses flex!"} - + (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > {"I'm a flexbox container that uses inline-flex!"}
    diff --git a/docs/src/pages/system/flexbox/Display.tsx b/docs/src/pages/system/flexbox/Display.tsx index 2dee9dc2fedff5..d414fe24fc630e 100644 --- a/docs/src/pages/system/flexbox/Display.tsx +++ b/docs/src/pages/system/flexbox/Display.tsx @@ -4,10 +4,40 @@ import Box from '@mui/material/Box'; export default function Display() { return (
    - + (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > {"I'm a flexbox container that uses flex!"} - + (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > {"I'm a flexbox container that uses inline-flex!"}
    diff --git a/docs/src/pages/system/flexbox/Display.tsx.preview b/docs/src/pages/system/flexbox/Display.tsx.preview deleted file mode 100644 index 1f857a4c6ef194..00000000000000 --- a/docs/src/pages/system/flexbox/Display.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - {"I'm a flexbox container that uses flex!"} - - - {"I'm a flexbox container that uses inline-flex!"} - \ No newline at end of file diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js index 28366d0851a802..97e8124382d3d5 100644 --- a/docs/src/pages/system/flexbox/FlexDirection.js +++ b/docs/src/pages/system/flexbox/FlexDirection.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -42,6 +44,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -55,6 +58,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -69,6 +73,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -83,6 +88,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/FlexDirection.tsx b/docs/src/pages/system/flexbox/FlexDirection.tsx index 446ff3a9c67dc6..12dc591c24f142 100644 --- a/docs/src/pages/system/flexbox/FlexDirection.tsx +++ b/docs/src/pages/system/flexbox/FlexDirection.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -31,6 +33,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -44,6 +47,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -58,6 +62,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -72,6 +77,7 @@ export default function FlexDirection() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/FlexGrow.js b/docs/src/pages/system/flexbox/FlexGrow.js index f06adc8c91ec4b..a3ee437c57d542 100644 --- a/docs/src/pages/system/flexbox/FlexGrow.js +++ b/docs/src/pages/system/flexbox/FlexGrow.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -35,7 +37,9 @@ Item.propTypes = { export default function FlexGrow() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexGrow.tsx b/docs/src/pages/system/flexbox/FlexGrow.tsx index 9318d6286d9402..6b7f137d7e4c0c 100644 --- a/docs/src/pages/system/flexbox/FlexGrow.tsx +++ b/docs/src/pages/system/flexbox/FlexGrow.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -24,7 +26,9 @@ function Item(props: BoxProps) { export default function FlexGrow() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexGrow.tsx.preview b/docs/src/pages/system/flexbox/FlexGrow.tsx.preview index bbad8bb0860292..a255ca17a51e07 100644 --- a/docs/src/pages/system/flexbox/FlexGrow.tsx.preview +++ b/docs/src/pages/system/flexbox/FlexGrow.tsx.preview @@ -1,4 +1,6 @@ - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexShrink.js b/docs/src/pages/system/flexbox/FlexShrink.js index 0684a253ddad8a..39cdfe7288b358 100644 --- a/docs/src/pages/system/flexbox/FlexShrink.js +++ b/docs/src/pages/system/flexbox/FlexShrink.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -35,7 +37,9 @@ Item.propTypes = { export default function FlexShrink() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexShrink.tsx b/docs/src/pages/system/flexbox/FlexShrink.tsx index 46dfcb571969ee..daf474d9920c41 100644 --- a/docs/src/pages/system/flexbox/FlexShrink.tsx +++ b/docs/src/pages/system/flexbox/FlexShrink.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -24,7 +26,9 @@ function Item(props: BoxProps) { export default function FlexShrink() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexShrink.tsx.preview b/docs/src/pages/system/flexbox/FlexShrink.tsx.preview index 6cfe20a981a55b..dc15e8dbd5c436 100644 --- a/docs/src/pages/system/flexbox/FlexShrink.tsx.preview +++ b/docs/src/pages/system/flexbox/FlexShrink.tsx.preview @@ -1,4 +1,6 @@ - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/FlexWrap.js b/docs/src/pages/system/flexbox/FlexWrap.js index 8102de2dae26cf..ddca635c891032 100644 --- a/docs/src/pages/system/flexbox/FlexWrap.js +++ b/docs/src/pages/system/flexbox/FlexWrap.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -43,6 +45,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 @@ -60,6 +63,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 @@ -77,6 +81,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/FlexWrap.tsx b/docs/src/pages/system/flexbox/FlexWrap.tsx index 40de089c8d4067..75e8227592805d 100644 --- a/docs/src/pages/system/flexbox/FlexWrap.tsx +++ b/docs/src/pages/system/flexbox/FlexWrap.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -32,6 +34,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 @@ -49,6 +52,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 @@ -66,6 +70,7 @@ export default function FlexWrap() { m: 1, bgcolor: 'background.paper', maxWidth: 300, + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js index e50803904d0a2d..230478e4270fdf 100644 --- a/docs/src/pages/system/flexbox/JustifyContent.js +++ b/docs/src/pages/system/flexbox/JustifyContent.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -42,6 +44,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -55,6 +58,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -68,6 +72,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -81,6 +86,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -94,6 +100,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -107,6 +114,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/JustifyContent.tsx b/docs/src/pages/system/flexbox/JustifyContent.tsx index 6d0dfef077796d..7993d3903469a9 100644 --- a/docs/src/pages/system/flexbox/JustifyContent.tsx +++ b/docs/src/pages/system/flexbox/JustifyContent.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -31,6 +33,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -44,6 +47,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -57,6 +61,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -70,6 +75,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -83,6 +89,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 @@ -96,6 +103,7 @@ export default function JustifyContent() { p: 1, m: 1, bgcolor: 'background.paper', + borderRadius: 1, }} > Item 1 diff --git a/docs/src/pages/system/flexbox/Order.js b/docs/src/pages/system/flexbox/Order.js index 71948cbd2db7c5..e67b785254dd63 100644 --- a/docs/src/pages/system/flexbox/Order.js +++ b/docs/src/pages/system/flexbox/Order.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -35,7 +37,9 @@ Item.propTypes = { export default function Order() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/Order.tsx b/docs/src/pages/system/flexbox/Order.tsx index f2227a4e015da2..d32465fc8687aa 100644 --- a/docs/src/pages/system/flexbox/Order.tsx +++ b/docs/src/pages/system/flexbox/Order.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : 'grey.100'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} @@ -24,7 +26,9 @@ function Item(props: BoxProps) { export default function Order() { return (
    - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/flexbox/Order.tsx.preview b/docs/src/pages/system/flexbox/Order.tsx.preview index 8258d4aa7e6116..cb61d34b2ecbf5 100644 --- a/docs/src/pages/system/flexbox/Order.tsx.preview +++ b/docs/src/pages/system/flexbox/Order.tsx.preview @@ -1,4 +1,6 @@ - + Item 1 Item 2 Item 3 diff --git a/docs/src/pages/system/grid/Display.js b/docs/src/pages/system/grid/Display.js index ccc8c84ddaac52..b1f4bbfc907880 100644 --- a/docs/src/pages/system/grid/Display.js +++ b/docs/src/pages/system/grid/Display.js @@ -7,10 +7,17 @@ export default function Display() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - bgcolor: 'primary.main', - borderRadius: 1, - color: 'white', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > {"I'm a grid container!"} diff --git a/docs/src/pages/system/grid/Display.tsx b/docs/src/pages/system/grid/Display.tsx index ccc8c84ddaac52..b1f4bbfc907880 100644 --- a/docs/src/pages/system/grid/Display.tsx +++ b/docs/src/pages/system/grid/Display.tsx @@ -7,10 +7,17 @@ export default function Display() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - bgcolor: 'primary.main', - borderRadius: 1, - color: 'white', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }} > {"I'm a grid container!"} diff --git a/docs/src/pages/system/grid/Display.tsx.preview b/docs/src/pages/system/grid/Display.tsx.preview deleted file mode 100644 index f8c3b21cf85867..00000000000000 --- a/docs/src/pages/system/grid/Display.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - {"I'm a grid container!"} - \ No newline at end of file diff --git a/docs/src/pages/system/grid/Gap.js b/docs/src/pages/system/grid/Gap.js index e7442895cd454e..04c30619a08eda 100644 --- a/docs/src/pages/system/grid/Gap.js +++ b/docs/src/pages/system/grid/Gap.js @@ -7,12 +7,14 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/Gap.tsx b/docs/src/pages/system/grid/Gap.tsx index 6461f119a9d8d7..dd9549c5f73c1e 100644 --- a/docs/src/pages/system/grid/Gap.tsx +++ b/docs/src/pages/system/grid/Gap.tsx @@ -6,12 +6,14 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoColumns.js b/docs/src/pages/system/grid/GridAutoColumns.js index b520b5644b382f..4d5c4fcb0c05ef 100644 --- a/docs/src/pages/system/grid/GridAutoColumns.js +++ b/docs/src/pages/system/grid/GridAutoColumns.js @@ -7,12 +7,14 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoColumns.tsx b/docs/src/pages/system/grid/GridAutoColumns.tsx index a1c1d453c334ed..03ca911ffe4882 100644 --- a/docs/src/pages/system/grid/GridAutoColumns.tsx +++ b/docs/src/pages/system/grid/GridAutoColumns.tsx @@ -6,12 +6,14 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoFlow.js b/docs/src/pages/system/grid/GridAutoFlow.js index 63cde9625016b6..b4dd610883efbb 100644 --- a/docs/src/pages/system/grid/GridAutoFlow.js +++ b/docs/src/pages/system/grid/GridAutoFlow.js @@ -7,12 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, + borderRadius: 2, textAlign: 'center', - fontSize: '1rem', + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoFlow.tsx b/docs/src/pages/system/grid/GridAutoFlow.tsx index bbde60c389e79f..a697da6450daaf 100644 --- a/docs/src/pages/system/grid/GridAutoFlow.tsx +++ b/docs/src/pages/system/grid/GridAutoFlow.tsx @@ -6,12 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, + borderRadius: 2, textAlign: 'center', - fontSize: '1rem', + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoRows.js b/docs/src/pages/system/grid/GridAutoRows.js index be39d4b45b3f9c..2270d3a767a558 100644 --- a/docs/src/pages/system/grid/GridAutoRows.js +++ b/docs/src/pages/system/grid/GridAutoRows.js @@ -7,12 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, + borderRadius: 2, textAlign: 'center', - fontSize: '1rem', + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridAutoRows.tsx b/docs/src/pages/system/grid/GridAutoRows.tsx index 05cb910be27388..c4a0cdaa951f8f 100644 --- a/docs/src/pages/system/grid/GridAutoRows.tsx +++ b/docs/src/pages/system/grid/GridAutoRows.tsx @@ -6,12 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, + borderRadius: 2, textAlign: 'center', - fontSize: '1rem', + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridTemplateAreas.js b/docs/src/pages/system/grid/GridTemplateAreas.js index 8cce4ee5c17475..5f0b3d0cf35995 100644 --- a/docs/src/pages/system/grid/GridTemplateAreas.js +++ b/docs/src/pages/system/grid/GridTemplateAreas.js @@ -10,7 +10,9 @@ export default function GridTemplateAreas() { color: '#fff', '& > .MuiBox-root > .MuiBox-root': { p: 1, - borderRadius: 1, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }, }} > @@ -27,8 +29,8 @@ export default function GridTemplateAreas() { > Header Main - Sidebar - Footer + Sidebar + Footer ); diff --git a/docs/src/pages/system/grid/GridTemplateAreas.tsx b/docs/src/pages/system/grid/GridTemplateAreas.tsx index 8cce4ee5c17475..5f0b3d0cf35995 100644 --- a/docs/src/pages/system/grid/GridTemplateAreas.tsx +++ b/docs/src/pages/system/grid/GridTemplateAreas.tsx @@ -10,7 +10,9 @@ export default function GridTemplateAreas() { color: '#fff', '& > .MuiBox-root > .MuiBox-root': { p: 1, - borderRadius: 1, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', }, }} > @@ -27,8 +29,8 @@ export default function GridTemplateAreas() { > Header Main - Sidebar - Footer + Sidebar + Footer ); diff --git a/docs/src/pages/system/grid/GridTemplateAreas.tsx.preview b/docs/src/pages/system/grid/GridTemplateAreas.tsx.preview index fd0a497ab283c5..877876dd580a4c 100644 --- a/docs/src/pages/system/grid/GridTemplateAreas.tsx.preview +++ b/docs/src/pages/system/grid/GridTemplateAreas.tsx.preview @@ -11,6 +11,6 @@ > Header Main - Sidebar - Footer + Sidebar + Footer \ No newline at end of file diff --git a/docs/src/pages/system/grid/GridTemplateColumns.js b/docs/src/pages/system/grid/GridTemplateColumns.js index 32a58198c8069e..73c8b5c28e9386 100644 --- a/docs/src/pages/system/grid/GridTemplateColumns.js +++ b/docs/src/pages/system/grid/GridTemplateColumns.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, m: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridTemplateColumns.tsx b/docs/src/pages/system/grid/GridTemplateColumns.tsx index 9dfdc9e4147aa6..3e129c77c0aaab 100644 --- a/docs/src/pages/system/grid/GridTemplateColumns.tsx +++ b/docs/src/pages/system/grid/GridTemplateColumns.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, m: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridTemplateRows.js b/docs/src/pages/system/grid/GridTemplateRows.js index 94f6e1604e8d1a..1321c68ed96497 100644 --- a/docs/src/pages/system/grid/GridTemplateRows.js +++ b/docs/src/pages/system/grid/GridTemplateRows.js @@ -7,13 +7,15 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, m: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/GridTemplateRows.tsx b/docs/src/pages/system/grid/GridTemplateRows.tsx index 1f4b4baf98cbf4..3e2741ebae2ba1 100644 --- a/docs/src/pages/system/grid/GridTemplateRows.tsx +++ b/docs/src/pages/system/grid/GridTemplateRows.tsx @@ -6,13 +6,15 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, m: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/RowAndColumnGap.js b/docs/src/pages/system/grid/RowAndColumnGap.js index 6e10843583df81..b77df2744443e7 100644 --- a/docs/src/pages/system/grid/RowAndColumnGap.js +++ b/docs/src/pages/system/grid/RowAndColumnGap.js @@ -7,12 +7,14 @@ function Item(props) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/grid/RowAndColumnGap.tsx b/docs/src/pages/system/grid/RowAndColumnGap.tsx index 2814ca72cb2075..f0094ec5a0c178 100644 --- a/docs/src/pages/system/grid/RowAndColumnGap.tsx +++ b/docs/src/pages/system/grid/RowAndColumnGap.tsx @@ -6,12 +6,14 @@ function Item(props: BoxProps) { return ( (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 1, - borderRadius: 1, - textAlign: 'center', - fontSize: '1rem', + borderRadius: 2, + fontSize: '0.875rem', fontWeight: '700', ...sx, }} diff --git a/docs/src/pages/system/positions/ZIndex.js b/docs/src/pages/system/positions/ZIndex.js index 34930dd9455b9d..9d2fe392fe7696 100644 --- a/docs/src/pages/system/positions/ZIndex.js +++ b/docs/src/pages/system/positions/ZIndex.js @@ -15,9 +15,16 @@ export default function ZIndex() { > + theme.palette.mode === 'dark' ? '#101010' : 'grey.600', + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.50'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 2, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', position: 'absolute', top: 40, left: '40%', @@ -28,9 +35,16 @@ export default function ZIndex() { (theme.palette.mode === 'dark' ? 'grey.800' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 2, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', position: 'absolute', top: 0, left: '43%', diff --git a/docs/src/pages/system/positions/ZIndex.tsx b/docs/src/pages/system/positions/ZIndex.tsx index 34930dd9455b9d..9d2fe392fe7696 100644 --- a/docs/src/pages/system/positions/ZIndex.tsx +++ b/docs/src/pages/system/positions/ZIndex.tsx @@ -15,9 +15,16 @@ export default function ZIndex() { > + theme.palette.mode === 'dark' ? '#101010' : 'grey.600', + color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.50'), + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 2, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', position: 'absolute', top: 40, left: '40%', @@ -28,9 +35,16 @@ export default function ZIndex() { (theme.palette.mode === 'dark' ? 'grey.800' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', p: 2, + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', position: 'absolute', top: 0, left: '43%', diff --git a/docs/src/pages/system/properties/properties.md b/docs/src/pages/system/properties/properties.md index 2b77c3dbc6af3a..c2e4fa63a7a8a6 100644 --- a/docs/src/pages/system/properties/properties.md +++ b/docs/src/pages/system/properties/properties.md @@ -79,7 +79,7 @@ Note that this table only lists custom properties, all other regular CSS propert | `paddingInlineStart` | `padding-inline-start` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | | `paddingInlineEnd` | `padding-inline-end` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | | `paddingBlock` | `padding-block` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| `paddingBlockStart ` | `padding-block-start` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| `paddingBlockStart` | `padding-block-start` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | | `paddingBlockEnd` | `padding-block-end` | [`spacing`](/system/spacing/) | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | | `typography` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/system/typography/#variant) | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | | `fontFamily` | `font-family` | [`fontFamily`](/system/typography/#font-family) | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | diff --git a/docs/src/pages/system/shadows/Demo.js b/docs/src/pages/system/shadows/Demo.js index 7b26e1ce78aea5..079960e05ad034 100644 --- a/docs/src/pages/system/shadows/Demo.js +++ b/docs/src/pages/system/shadows/Demo.js @@ -8,11 +8,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 0 @@ -20,11 +26,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 1 @@ -32,11 +44,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 2 @@ -44,11 +62,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 3 diff --git a/docs/src/pages/system/shadows/Demo.tsx b/docs/src/pages/system/shadows/Demo.tsx index 7b26e1ce78aea5..079960e05ad034 100644 --- a/docs/src/pages/system/shadows/Demo.tsx +++ b/docs/src/pages/system/shadows/Demo.tsx @@ -8,11 +8,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 0 @@ -20,11 +26,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 1 @@ -32,11 +44,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 2 @@ -44,11 +62,17 @@ export default function Height() { (theme.palette.mode === 'dark' ? '#101010' : '#fff'), + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + p: 1, + m: 1, + borderRadius: 2, + textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > boxShadow: 3 diff --git a/docs/src/pages/system/sizing/Height.js b/docs/src/pages/system/sizing/Height.js index 0aaea51cde51c5..5be4882d24af38 100644 --- a/docs/src/pages/system/sizing/Height.js +++ b/docs/src/pages/system/sizing/Height.js @@ -7,10 +7,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 25% @@ -18,10 +29,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 50% @@ -29,10 +51,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 75% @@ -40,10 +73,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 100% diff --git a/docs/src/pages/system/sizing/Height.tsx b/docs/src/pages/system/sizing/Height.tsx index 0aaea51cde51c5..5be4882d24af38 100644 --- a/docs/src/pages/system/sizing/Height.tsx +++ b/docs/src/pages/system/sizing/Height.tsx @@ -7,10 +7,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 25% @@ -18,10 +29,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 50% @@ -29,10 +51,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 75% @@ -40,10 +73,21 @@ export default function Height() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', }} > Height 100% diff --git a/docs/src/pages/system/sizing/Values.js b/docs/src/pages/system/sizing/Values.js index 651c8db9ad7404..7264fae9231cd1 100644 --- a/docs/src/pages/system/sizing/Values.js +++ b/docs/src/pages/system/sizing/Values.js @@ -4,10 +4,84 @@ import Box from '@mui/material/Box'; export default function Values() { return ( - Width 1/4 - Width 300 - Width 75% - Width 1 + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 1/4 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 300 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 75% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 1 + ); } diff --git a/docs/src/pages/system/sizing/Values.tsx b/docs/src/pages/system/sizing/Values.tsx index 651c8db9ad7404..7264fae9231cd1 100644 --- a/docs/src/pages/system/sizing/Values.tsx +++ b/docs/src/pages/system/sizing/Values.tsx @@ -4,10 +4,84 @@ import Box from '@mui/material/Box'; export default function Values() { return ( - Width 1/4 - Width 300 - Width 75% - Width 1 + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 1/4 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 300 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 75% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 1 + ); } diff --git a/docs/src/pages/system/sizing/Values.tsx.preview b/docs/src/pages/system/sizing/Values.tsx.preview deleted file mode 100644 index 626a4e93dc7ee0..00000000000000 --- a/docs/src/pages/system/sizing/Values.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ -Width 1/4 -Width 300 -Width 75% -Width 1 \ No newline at end of file diff --git a/docs/src/pages/system/sizing/Width.js b/docs/src/pages/system/sizing/Width.js index fc13bc70c5bf5e..cbfa031d88b51e 100644 --- a/docs/src/pages/system/sizing/Width.js +++ b/docs/src/pages/system/sizing/Width.js @@ -4,13 +4,102 @@ import Box from '@mui/material/Box'; export default function Width() { return ( - Width 25% - Width 50% - Width 75% - + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 25% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 50% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 75% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > Width 100% - + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > Width auto diff --git a/docs/src/pages/system/sizing/Width.tsx b/docs/src/pages/system/sizing/Width.tsx index fc13bc70c5bf5e..cbfa031d88b51e 100644 --- a/docs/src/pages/system/sizing/Width.tsx +++ b/docs/src/pages/system/sizing/Width.tsx @@ -4,13 +4,102 @@ import Box from '@mui/material/Box'; export default function Width() { return ( - Width 25% - Width 50% - Width 75% - + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 25% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 50% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > + Width 75% + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > Width 100% - + + theme.palette.mode === 'dark' ? '#101010' : 'grey.100', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + textAlign: 'center', + }} + > Width auto diff --git a/docs/src/pages/system/sizing/Width.tsx.preview b/docs/src/pages/system/sizing/Width.tsx.preview deleted file mode 100644 index cc6c6ff59587ab..00000000000000 --- a/docs/src/pages/system/sizing/Width.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ -Width 25% -Width 50% -Width 75% - - Width 100% - - - Width auto - \ No newline at end of file diff --git a/docs/src/pages/system/spacing/Demo.js b/docs/src/pages/system/spacing/Demo.js index 1f83ca94481404..c39c1196df5a85 100644 --- a/docs/src/pages/system/spacing/Demo.js +++ b/docs/src/pages/system/spacing/Demo.js @@ -4,9 +4,57 @@ import Box from '@mui/material/Box'; export default function Color() { return (
    - p: 1 - m: 1 - p: 2 + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + p: 1 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + m: 1 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + p: 2 +
    ); } diff --git a/docs/src/pages/system/spacing/Demo.tsx b/docs/src/pages/system/spacing/Demo.tsx index 1f83ca94481404..c39c1196df5a85 100644 --- a/docs/src/pages/system/spacing/Demo.tsx +++ b/docs/src/pages/system/spacing/Demo.tsx @@ -4,9 +4,57 @@ import Box from '@mui/material/Box'; export default function Color() { return (
    - p: 1 - m: 1 - p: 2 + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + p: 1 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + m: 1 + + + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, + fontSize: '0.875rem', + fontWeight: '700', + }} + > + p: 2 +
    ); } diff --git a/docs/src/pages/system/spacing/Demo.tsx.preview b/docs/src/pages/system/spacing/Demo.tsx.preview deleted file mode 100644 index b61ff7fb44d8f2..00000000000000 --- a/docs/src/pages/system/spacing/Demo.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ -p: 1 -m: 1 -p: 2 \ No newline at end of file diff --git a/docs/src/pages/system/spacing/HorizontalCentering.js b/docs/src/pages/system/spacing/HorizontalCentering.js index 36d1ecf61ca9df..f149c8dda83242 100644 --- a/docs/src/pages/system/spacing/HorizontalCentering.js +++ b/docs/src/pages/system/spacing/HorizontalCentering.js @@ -7,13 +7,20 @@ export default function HorizontalCentering() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > Centered element diff --git a/docs/src/pages/system/spacing/HorizontalCentering.tsx b/docs/src/pages/system/spacing/HorizontalCentering.tsx index 36d1ecf61ca9df..f149c8dda83242 100644 --- a/docs/src/pages/system/spacing/HorizontalCentering.tsx +++ b/docs/src/pages/system/spacing/HorizontalCentering.tsx @@ -7,13 +7,20 @@ export default function HorizontalCentering() { + theme.palette.mode === 'dark' ? '#101010' : 'grey.50', + color: (theme) => + theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800', + border: '1px solid', + borderColor: (theme) => + theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', + borderRadius: 2, textAlign: 'center', + fontSize: '0.875rem', + fontWeight: '700', }} > Centered element diff --git a/docs/src/pages/system/spacing/HorizontalCentering.tsx.preview b/docs/src/pages/system/spacing/HorizontalCentering.tsx.preview deleted file mode 100644 index 937d6a695a0b1e..00000000000000 --- a/docs/src/pages/system/spacing/HorizontalCentering.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - Centered element - \ No newline at end of file diff --git a/docs/src/pages/system/the-sx-prop/the-sx-prop.md b/docs/src/pages/system/the-sx-prop/the-sx-prop.md index c5ad7263bb3a45..ea990a8ddaa6b4 100644 --- a/docs/src/pages/system/the-sx-prop/the-sx-prop.md +++ b/docs/src/pages/system/the-sx-prop/the-sx-prop.md @@ -71,7 +71,7 @@ The `color` and `backgroundColor` properties can receive a string, which represe // equivalent to color: theme => theme.palette.primary.main ``` -The `backgroundColor` property is also available trough its alias `bgcolor`. +The `backgroundColor` property is also available through its alias `bgcolor`. ```jsx @@ -168,7 +168,7 @@ The same can be achieved by omitting the CSS property prefix `fontWeight`. // equivalent to fontWeight: theme.typography.fontWeightLight ``` -There is additional `typography` prop available, which sets all values defined in the specific `theme.typography` variant. +There is an additional `typography` prop available, which sets all values defined in the specific `theme.typography` variant. ```jsx diff --git a/docs/src/pages/system/typography/TextTransform.js b/docs/src/pages/system/typography/TextTransform.js new file mode 100644 index 00000000000000..d514eebb59a6dc --- /dev/null +++ b/docs/src/pages/system/typography/TextTransform.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + +export default function TextTransform() { + return ( + + capitalized text. + Lowercase Text. + Uppercase Text. + + ); +} diff --git a/docs/src/pages/system/typography/TextTransform.tsx b/docs/src/pages/system/typography/TextTransform.tsx new file mode 100644 index 00000000000000..d514eebb59a6dc --- /dev/null +++ b/docs/src/pages/system/typography/TextTransform.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + +export default function TextTransform() { + return ( + + capitalized text. + Lowercase Text. + Uppercase Text. + + ); +} diff --git a/docs/src/pages/system/typography/TextTransform.tsx.preview b/docs/src/pages/system/typography/TextTransform.tsx.preview new file mode 100644 index 00000000000000..d8e3b066974c86 --- /dev/null +++ b/docs/src/pages/system/typography/TextTransform.tsx.preview @@ -0,0 +1,5 @@ + + capitalized text. + Lowercase Text. + Uppercase Text. + \ No newline at end of file diff --git a/docs/src/pages/system/typography/typography.md b/docs/src/pages/system/typography/typography.md index d2beb1826a1728..8335d1e2bbfbdd 100644 --- a/docs/src/pages/system/typography/typography.md +++ b/docs/src/pages/system/typography/typography.md @@ -22,6 +22,16 @@ … ``` +## Text transformation + +{{"demo": "pages/system/typography/TextTransform.js", "defaultCodeOpen": false}} + +```jsx +… +… +… +``` + ## Font weight {{"demo": "pages/system/typography/FontWeight.js", "defaultCodeOpen": false}} @@ -97,3 +107,4 @@ import { typography } from '@mui/system'; | `letterSpacing` | `letterSpacing` | `letter-spacing` | none | | `lineHeight` | `lineHeight` | `line-height` | none | | `textAlign` | `textAlign` | `text-align` | none | +| `textTransform` | `textTransform` | `text-transform` | none | diff --git a/docs/src/pagesApi.js b/docs/src/pagesApi.js index cfd631af9b7f5b..2f4500fca52a6c 100644 --- a/docs/src/pagesApi.js +++ b/docs/src/pagesApi.js @@ -97,8 +97,11 @@ module.exports = [ { pathname: '/api-docs/modal' }, { pathname: '/api-docs/modal-unstyled' }, { pathname: '/api-docs/month-picker' }, + { pathname: '/api-docs/multi-select-unstyled' }, { pathname: '/api-docs/native-select' }, { pathname: '/api-docs/no-ssr' }, + { pathname: '/api-docs/option-group-unstyled' }, + { pathname: '/api-docs/option-unstyled' }, { pathname: '/api-docs/outlined-input' }, { pathname: '/api-docs/pagination' }, { pathname: '/api-docs/pagination-item' }, @@ -113,6 +116,7 @@ module.exports = [ { pathname: '/api-docs/rating' }, { pathname: '/api-docs/scoped-css-baseline' }, { pathname: '/api-docs/select' }, + { pathname: '/api-docs/select-unstyled' }, { pathname: '/api-docs/skeleton' }, { pathname: '/api-docs/slide' }, { pathname: '/api-docs/slider' }, diff --git a/docs/src/route.ts b/docs/src/route.ts index 24861b48652c5a..f5d95405fd4e98 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -1,3 +1,5 @@ +import FEATURE_TOGGLE from './featureToggle'; + const ROUTES = { home: '/', productCore: '/core/', @@ -7,25 +9,58 @@ const ROUTES = { careers: '/careers/', pricing: '/pricing/', about: '/about/', - handbook: 'https://www.notion.so/mui-org/Handbook-f086d47e10794d5e839aef9dc67f324b', - materialIcons: '/components/material-icons/', - freeTemplates: '/getting-started/templates/', - components: '/getting-started/supported-components/', - customization: '/customization/how-to-customize/', - theming: '/customization/theming/', - documentation: '/getting-started/usage/', - communityHelp: '/getting-started/support/#community-help-free', - blog: 'https://medium.com/material-ui', - showcase: '/discover-more/showcase', + handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b', + baseDocs: '/base/getting-started/installation/', + materialDocs: '/material/getting-started/installation/', + systemDocs: '/system/basics/', + materialIcons: FEATURE_TOGGLE.enable_redirects + ? '/material/material-icons/' + : '/components/material-icons/', + freeTemplates: FEATURE_TOGGLE.enable_redirects + ? '/material/getting-started/templates/' + : '/getting-started/templates/', + components: FEATURE_TOGGLE.enable_redirects + ? '/material/getting-started/supported-components/' + : '/getting-started/supported-components/', + customization: FEATURE_TOGGLE.enable_redirects + ? '/material/customization/how-to-customize/' + : '/customization/how-to-customize/', + theming: FEATURE_TOGGLE.enable_redirects + ? '/material/customization/theming/' + : '/customization/theming/', + documentation: FEATURE_TOGGLE.enable_redirects + ? '/material/getting-started/installation/' + : '/getting-started/installation/', + communityHelp: FEATURE_TOGGLE.enable_redirects + ? '/material/getting-started/support/#community-help-free' + : '/getting-started/support/#community-help-free', + blog: '/blog/', + showcase: FEATURE_TOGGLE.enable_redirects + ? '/material/discover-more/showcase/' + : '/discover-more/showcase', roadmap: 'https://github.com/mui-org/material-ui-x/projects/1', - languages: '/discover-more/languages', - vision: '/discover-more/vision/', - support: '/getting-started/support/#professional-support-premium', - goldSponsor: '/discover-more/backers/#gold/', + languages: FEATURE_TOGGLE.enable_redirects + ? '/material/discover-more/languages/' + : '/discover-more/languages', + vision: FEATURE_TOGGLE.enable_redirects + ? '/material/discover-more/vision/' + : '/discover-more/vision/', + support: FEATURE_TOGGLE.enable_redirects + ? '/material/getting-started/support/#professional-support-premium' + : '/getting-started/support/#professional-support-premium', + goldSponsor: FEATURE_TOGGLE.enable_redirects + ? '/material/discover-more/backers/#gold' + : '/discover-more/backers/#gold/', store: 'https://mui.com/store/', - dataGridDocs: '/components/data-grid/getting-started/', - dataGridFeatures: '/components/data-grid/#features', - dataGridFeaturesComparison: '/components/data-grid/getting-started/#feature-comparison', + dataGridDocs: FEATURE_TOGGLE.enable_redirects + ? '/x/react-data-grid/getting-started/' + : '/components/data-grid/getting-started/', + dataGridFeatures: FEATURE_TOGGLE.enable_redirects + ? '/x/react-data-grid/#features' + : '/components/data-grid/#features', + dataGridFeaturesComparison: FEATURE_TOGGLE.enable_redirects + ? '/x/react-data-grid/getting-started/#feature-comparison' + : '/components/data-grid/getting-started/#feature-comparison', storePopular: 'https://mui.com/store/#populars', storeDesign: 'https://mui.com/store/#design', storeFigma: 'https://mui.com/store/items/figma-react/', diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index 11003b177ae208..e72883d20a7e3c 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -8,7 +8,7 @@ "ChipProps": "Props applied to the     Chip element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "clearIcon": "The icon to display in place of the default clear icon.", - "clearOnBlur": "If true, the input's text is cleared on blur if no value is selected.
    Set to true if you want to help the user enter a new value. Set to false if you want to help the user resume his search.", + "clearOnBlur": "If true, the input's text is cleared on blur if no value is selected.
    Set to true if you want to help the user enter a new value. Set to false if you want to help the user resume their search.", "clearOnEscape": "If true, clear all values when the user presses escape and the popup is closed.", "clearText": "Override the default text for the clear icon button.
    For localization purposes, you can use the provided translations.", "closeText": "Override the default text for the close popup icon button.
    For localization purposes, you can use the provided translations.", @@ -53,6 +53,7 @@ "PaperComponent": "The component used to render the body of the popup.", "PopperComponent": "The component used to position the popup.", "popupIcon": "The icon to display in place of the default popup icon.", + "readOnly": "If true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.", "renderGroup": "Render the group.

    Signature:
    function(params: AutocompleteRenderGroupParams) => ReactNode
    params: The group to render.", "renderInput": "Render the input.

    Signature:
    function(params: object) => ReactNode
    ", "renderOption": "Render the option, use getOptionLabel by default.

    Signature:
    function(props: object, option: T, state: object) => ReactNode
    props: The props to apply on the li element.
    option: The option to render.
    state: The state of the component.", diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json index 408fafc9284b3f..a0ae63550cd566 100644 --- a/docs/translations/api-docs/avatar-group/avatar-group.json +++ b/docs/translations/api-docs/avatar-group/avatar-group.json @@ -3,6 +3,7 @@ "propDescriptions": { "children": "The avatars to stack.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", + "componentsProps": "The props used for each slot inside the AvatarGroup.", "max": "Max avatars to show before +x.", "spacing": "Spacing between avatars.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 749128aece3402..826dfaffcfda2c 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -137,7 +137,7 @@ "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"" }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/docs/translations/api-docs/fade/fade-zh.json b/docs/translations/api-docs/fade/fade-zh.json index f6bad1f583b7fa..0cf83f8eed3514 100644 --- a/docs/translations/api-docs/fade/fade-zh.json +++ b/docs/translations/api-docs/fade/fade-zh.json @@ -1,11 +1,11 @@ { - "componentDescription": "The Fade transition is used by the [Modal](/components/modal/) component.\nIt uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.", + "componentDescription": "Fade 淡入淡出被用于 [Modal](/components/modal/) 组件。\n该组件的动画效果是来源于底层的 [react-transition-group](https://github.com/reactjs/react-transition-group)。", "propDescriptions": { "addEndListener": "Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.", "appear": "Perform the enter transition when it first mounts if in is also true. Set this to false to disable this behavior.", "children": "A single child content element.
    ⚠️ Needs to be able to hold a ref.", "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.", - "in": "If true, the component will transition in.", + "in": "如果被设置为 true，那么该组件将进行淡入淡出。", "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/docs/translations/api-docs/form-control-label/form-control-label.json b/docs/translations/api-docs/form-control-label/form-control-label.json index 9859abe5d83106..4375eccabafd85 100644 --- a/docs/translations/api-docs/form-control-label/form-control-label.json +++ b/docs/translations/api-docs/form-control-label/form-control-label.json @@ -39,6 +39,11 @@ "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label's Typography component" + }, + "error": { + "description": "State class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "error={true}" } } } diff --git a/docs/translations/api-docs/form-group/form-group.json b/docs/translations/api-docs/form-group/form-group.json index d7c0f31860b574..8849ead82f50ee 100644 --- a/docs/translations/api-docs/form-group/form-group.json +++ b/docs/translations/api-docs/form-group/form-group.json @@ -12,6 +12,11 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "row={true}" + }, + "error": { + "description": "State class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "error={true}" } } } diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index c657729a1863ea..51f765cbe727f7 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -130,7 +130,7 @@ "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"" }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-pt.json b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-pt.json new file mode 100644 index 00000000000000..62188d39c83fbe --- /dev/null +++ b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-pt.json @@ -0,0 +1,18 @@ +{ + "componentDescription": "", + "propDescriptions": { + "autoFocus": "If true, the select element is focused during the first mount", + "components": "The components used for each slot inside the Select. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "defaultListboxOpen": "If true, the select will be initially open.", + "defaultValue": "The default selected value. Use when the component is not controlled.", + "disabled": "If true, the select is disabled.", + "listboxId": "Id of the listbox element.", + "listboxOpen": "Controls the open state of the select's listbox.", + "onChange": "Callback fired when an option is selected.", + "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).", + "renderValue": "Function that customizes the rendering of the selected values.", + "value": "The selected values. Set to an empty array to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-zh.json b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-zh.json new file mode 100644 index 00000000000000..62188d39c83fbe --- /dev/null +++ b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled-zh.json @@ -0,0 +1,18 @@ +{ + "componentDescription": "", + "propDescriptions": { + "autoFocus": "If true, the select element is focused during the first mount", + "components": "The components used for each slot inside the Select. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "defaultListboxOpen": "If true, the select will be initially open.", + "defaultValue": "The default selected value. Use when the component is not controlled.", + "disabled": "If true, the select is disabled.", + "listboxId": "Id of the listbox element.", + "listboxOpen": "Controls the open state of the select's listbox.", + "onChange": "Callback fired when an option is selected.", + "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).", + "renderValue": "Function that customizes the rendering of the selected values.", + "value": "The selected values. Set to an empty array to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled.json b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled.json new file mode 100644 index 00000000000000..391b4a4265a624 --- /dev/null +++ b/docs/translations/api-docs/multi-select-unstyled/multi-select-unstyled.json @@ -0,0 +1,17 @@ +{ + "componentDescription": "The foundation for building custom-styled multi-selection select components.", + "propDescriptions": { + "autoFocus": "If true, the select element is focused during the first mount", + "components": "The components used for each slot inside the Select. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "defaultListboxOpen": "If true, the select will be initially open.", + "defaultValue": "The default selected values. Use when the component is not controlled.", + "disabled": "If true, the select is disabled.", + "listboxOpen": "Controls the open state of the select's listbox.", + "onChange": "Callback fired when an option is selected.", + "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).", + "renderValue": "Function that customizes the rendering of the selected values.", + "value": "The selected values. Set to an empty array to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-pt.json b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-pt.json new file mode 100644 index 00000000000000..aa4eef14157bb7 --- /dev/null +++ b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-pt.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionGroupUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true all the options in the group will be disabled.", + "label": "The human-readable description of the group." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-zh.json b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-zh.json new file mode 100644 index 00000000000000..aa4eef14157bb7 --- /dev/null +++ b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled-zh.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionGroupUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true all the options in the group will be disabled.", + "label": "The human-readable description of the group." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-group-unstyled/option-group-unstyled.json b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled.json new file mode 100644 index 00000000000000..66669de701e028 --- /dev/null +++ b/docs/translations/api-docs/option-group-unstyled/option-group-unstyled.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "An unstyled option group to be used within a SelectUnstyled.", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionGroupUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true all the options in the group will be disabled.", + "label": "The human-readable description of the group." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-unstyled/option-unstyled-pt.json b/docs/translations/api-docs/option-unstyled/option-unstyled-pt.json new file mode 100644 index 00000000000000..6686a68363a724 --- /dev/null +++ b/docs/translations/api-docs/option-unstyled/option-unstyled-pt.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true, the option will be disabled.", + "value": "The value of the option." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-unstyled/option-unstyled-zh.json b/docs/translations/api-docs/option-unstyled/option-unstyled-zh.json new file mode 100644 index 00000000000000..6686a68363a724 --- /dev/null +++ b/docs/translations/api-docs/option-unstyled/option-unstyled-zh.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true, the option will be disabled.", + "value": "The value of the option." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/option-unstyled/option-unstyled.json b/docs/translations/api-docs/option-unstyled/option-unstyled.json new file mode 100644 index 00000000000000..4761e640210511 --- /dev/null +++ b/docs/translations/api-docs/option-unstyled/option-unstyled.json @@ -0,0 +1,11 @@ +{ + "componentDescription": "An unstyled option to be used within a SelectUnstyled.", + "propDescriptions": { + "component": "The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to components.Root. If both are provided, the component is used.", + "components": "The components used for each slot inside the OptionUnstyled. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "disabled": "If true, the option will be disabled.", + "value": "The value of the option." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/select-unstyled/select-unstyled-pt.json b/docs/translations/api-docs/select-unstyled/select-unstyled-pt.json new file mode 100644 index 00000000000000..c23460f10014e5 --- /dev/null +++ b/docs/translations/api-docs/select-unstyled/select-unstyled-pt.json @@ -0,0 +1,8 @@ +{ + "componentDescription": "The foundation for building custom-styled select components.", + "propDescriptions": { + "multiple": "If true, it will be possible to select multiple values.", + "value": "The selected value. Set to null to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/select-unstyled/select-unstyled-zh.json b/docs/translations/api-docs/select-unstyled/select-unstyled-zh.json new file mode 100644 index 00000000000000..c23460f10014e5 --- /dev/null +++ b/docs/translations/api-docs/select-unstyled/select-unstyled-zh.json @@ -0,0 +1,8 @@ +{ + "componentDescription": "The foundation for building custom-styled select components.", + "propDescriptions": { + "multiple": "If true, it will be possible to select multiple values.", + "value": "The selected value. Set to null to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/select-unstyled/select-unstyled.json b/docs/translations/api-docs/select-unstyled/select-unstyled.json new file mode 100644 index 00000000000000..0968fcc67cb526 --- /dev/null +++ b/docs/translations/api-docs/select-unstyled/select-unstyled.json @@ -0,0 +1,17 @@ +{ + "componentDescription": "The foundation for building custom-styled select components.", + "propDescriptions": { + "autoFocus": "If true, the select element is focused during the first mount", + "components": "The components used for each slot inside the Select. Either a string to use a HTML element or a component.", + "componentsProps": "The props used for each slot inside the Input.", + "defaultListboxOpen": "If true, the select will be initially open.", + "defaultValue": "The default selected value. Use when the component is not controlled.", + "disabled": "If true, the select is disabled.", + "listboxOpen": "Controls the open state of the select's listbox.", + "onChange": "Callback fired when an option is selected.", + "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).", + "renderValue": "Function that customizes the rendering of the selected value.", + "value": "The selected value. Set to null to deselect all options." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json index d34324ab15b420..72e4f4a85f9538 100644 --- a/docs/translations/api-docs/select/select.json +++ b/docs/translations/api-docs/select/select.json @@ -4,6 +4,7 @@ "autoWidth": "If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.", "children": "The option elements to populate the select with. Can be some MenuItem when native is false and option when native is true.
    ⚠️The MenuItem elements must be direct descendants when native is false.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", + "defaultOpen": "If true, the component is initially open. Use when the component open state is not controlled (i.e. the open prop is not defined). You can only use it when the native prop is false (default).", "defaultValue": "The default value. Use when the component is not controlled.", "displayEmpty": "If true, a value is displayed even if no items are selected.
    In order to display a meaningful value, a function can be passed to the renderValue prop which returns the value to be displayed when no items are selected.
    ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.", "IconComponent": "The icon that displays the arrow.", diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index 2eb768d99df918..e6fc0d9383f429 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -29,8 +29,7 @@ "track": "The track presentation:
    - normal the track will render a bar representing the slider value. - inverted the track will render a bar representing the remaining slider value. - false the track will render without a bar.", "value": "The value of the slider. For ranged sliders, provide an array with two values.", "valueLabelDisplay": "Controls when the value label is displayed:
    - auto the value label will display when the thumb is hovered or focused. - on will display persistently. - off will never display.", - "valueLabelFormat": "The format function the value label's value.
    When a function is provided, it should have the following signature:
    - {number} value The value label's value to format - {number} index The value label's index to format", - "component": "The component used for the root node. Either a string to use a HTML element or a component." + "valueLabelFormat": "The format function the value label's value.
    When a function is provided, it should have the following signature:
    - {number} value The value label's value to format - {number} index The value label's index to format" }, "classDescriptions": { "root": { "description": "Class name applied to the root element." }, diff --git a/docs/translations/api-docs/svg-icon/svg-icon-pt.json b/docs/translations/api-docs/svg-icon/svg-icon-pt.json index ea102e6b1068df..b61ab0395cc393 100644 --- a/docs/translations/api-docs/svg-icon/svg-icon-pt.json +++ b/docs/translations/api-docs/svg-icon/svg-icon-pt.json @@ -7,6 +7,7 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.", "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.", "htmlColor": "Applies a color attribute to the SVG element.", + "inheritViewBox": "Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node. If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored.", "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent", diff --git a/docs/translations/api-docs/svg-icon/svg-icon-zh.json b/docs/translations/api-docs/svg-icon/svg-icon-zh.json index 8e2134262b0d7d..8a8b9a06cf37cd 100644 --- a/docs/translations/api-docs/svg-icon/svg-icon-zh.json +++ b/docs/translations/api-docs/svg-icon/svg-icon-zh.json @@ -7,6 +7,7 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.", "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.", "htmlColor": "Applies a color attribute to the SVG element.", + "inheritViewBox": "Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node. If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored.", "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent", diff --git a/docs/translations/api-docs/svg-icon/svg-icon.json b/docs/translations/api-docs/svg-icon/svg-icon.json index b35f1e909941b1..30549fcd2b7c04 100644 --- a/docs/translations/api-docs/svg-icon/svg-icon.json +++ b/docs/translations/api-docs/svg-icon/svg-icon.json @@ -7,6 +7,7 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.", "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.", "htmlColor": "Applies a color attribute to the SVG element.", + "inheritViewBox": "If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored. Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node.", "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent", diff --git a/docs/translations/api-docs/text-field/text-field.json b/docs/translations/api-docs/text-field/text-field.json index 2ee7a2ea6b1b8d..077c2d8167ca1a 100644 --- a/docs/translations/api-docs/text-field/text-field.json +++ b/docs/translations/api-docs/text-field/text-field.json @@ -12,7 +12,7 @@ "fullWidth": "If true, the input will take up the full width of its container.", "helperText": "The helper text content.", "id": "The id of the input element. Use this prop to make label and helperText accessible for screen readers.", - "InputLabelProps": "Props applied to the InputLabel element.", + "InputLabelProps": "Props applied to the InputLabel element. Pointer events like onClick are enabled if and only if shrink is true.", "inputProps": "Attributes applied to the input element.", "InputProps": "Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.", "inputRef": "Pass a ref to the input element.", diff --git a/docs/translations/translations-pt.json b/docs/translations/translations-pt.json index 99b679f501269a..f4b05f79c3ac04 100644 --- a/docs/translations/translations-pt.json +++ b/docs/translations/translations-pt.json @@ -333,7 +333,7 @@ "/discover-more/changelog": "Histórico de mudanças", "/discover-more/languages": "Idiomas", "/about": "Sobre nós", - "https://material-ui.com/store/": "Temas premium", + "https://mui.com/store/": "Templates", "/versions": "Versões", "https://medium.com/material-ui": "Blog" } diff --git a/docs/translations/translations-zh.json b/docs/translations/translations-zh.json index 2de618ccf23054..94e800c065522e 100644 --- a/docs/translations/translations-zh.json +++ b/docs/translations/translations-zh.json @@ -333,7 +333,7 @@ "/discover-more/changelog": "更新日志", "/discover-more/languages": "语言", "/about": "关于我们", - "https://material-ui.com/store/": "高级版主题", + "https://mui.com/store/": "Templates", "/versions": "版本", "https://medium.com/material-ui": "博客" } diff --git a/docs/translations/translations.json b/docs/translations/translations.json index e7b784dcacda1f..b7a8d73385f760 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -1,5 +1,5 @@ { - "adblock": "If you don't mind-tech related ads (no tracking or remarketing), and want to keep us running, please whitelist MUI in your blocker.", + "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist MUI in your blocker.", "api-docs": { "componentName": "Component name", "cssComponent": "As a CSS utility, the {{name}} component also supports all system properties. You can use them as props directly on the component.", @@ -117,7 +117,8 @@ "mode": "Mode", "rtl": "Right to left", "settings": "Settings", - "system": "System" + "system": "System", + "language": "Language" }, "showFullSource": "Show the full source", "showJSSource": "Show JavaScript source", @@ -334,7 +335,6 @@ "/discover-more/languages": "Languages", "/about": "About us", "https://mui.com/store/": "Templates", - "/versions": "Versions", - "https://medium.com/material-ui": "Blog" + "/versions": "Versions" } } diff --git a/docs/tsconfig.json b/docs/tsconfig.json index d541bdd030a46d..b3282c841557ef 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "../tsconfig.json", - "include": ["next-env.d.ts", "types", "src", "pages"], + "include": ["next-env.d.ts", "types", "src", "pages", "data"], "compilerOptions": { "allowJs": true, "isolatedModules": true, diff --git a/examples/create-react-app-with-styled-components-typescript/README.md b/examples/create-react-app-with-styled-components-typescript/README.md index 5b9a9010799456..3194373ad73f60 100644 --- a/examples/create-react-app-with-styled-components-typescript/README.md +++ b/examples/create-react-app-with-styled-components-typescript/README.md @@ -10,7 +10,7 @@ The main difference between this and the non-typescript example is that you need and install @types/styled-components: -``` +```sh npm install --save-dev @types/styled-components ``` diff --git a/examples/joy-cra-typescript/README.md b/examples/joy-cra-typescript/README.md index 1f8e5d6f146062..daf6eb185ec824 100644 --- a/examples/joy-cra-typescript/README.md +++ b/examples/joy-cra-typescript/README.md @@ -1,6 +1,6 @@ # Create React App example with TypeScript -## `@mui/joy` is still in early development, DO NOT use it in production. +## `@mui/joy` is still in early development, DO NOT use it in production ## How to use diff --git a/examples/remix-with-typescript/app/entry.client.tsx b/examples/remix-with-typescript/app/entry.client.tsx index 301b406d761482..4f178a7474a8d2 100644 --- a/examples/remix-with-typescript/app/entry.client.tsx +++ b/examples/remix-with-typescript/app/entry.client.tsx @@ -1,21 +1,38 @@ import * as React from 'react'; +import { useState } from 'react'; import { hydrate } from 'react-dom'; import { RemixBrowser } from 'remix'; import { CacheProvider, ThemeProvider } from '@emotion/react'; import CssBaseline from '@mui/material/CssBaseline'; +import ClientStyleContext from './src/ClientStyleContext'; import createEmotionCache from './src/createEmotionCache'; import theme from './src/theme'; -const emotionCache = createEmotionCache(); +interface ClientCacheProviderProps { + children: React.ReactNode; +} +function ClientCacheProvider({ children }: ClientCacheProviderProps) { + const [cache, setCache] = useState(createEmotionCache()); + + function reset() { + setCache(createEmotionCache()); + } + + return ( + + {children} + + ); +} hydrate( - + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - , + , document, ); diff --git a/examples/remix-with-typescript/app/entry.server.tsx b/examples/remix-with-typescript/app/entry.server.tsx index bb98d0fd751d81..c56e03758279c9 100644 --- a/examples/remix-with-typescript/app/entry.server.tsx +++ b/examples/remix-with-typescript/app/entry.server.tsx @@ -5,7 +5,6 @@ import type { EntryContext } from 'remix'; import createEmotionCache from './src/createEmotionCache'; import theme from './src/theme'; -import StylesContext from './src/StylesContext'; import CssBaseline from '@mui/material/CssBaseline'; import { ThemeProvider } from '@mui/material/styles'; @@ -32,20 +31,23 @@ export default function handleRequest( ); // Render the component to a string. - const html = renderToString( - - - , - ); + const html = renderToString(); // Grab the CSS from emotion - const emotionChunks = extractCriticalToChunks(html); + const { styles } = extractCriticalToChunks(html); + + let stylesHTML = ''; + + styles.forEach(({ key, ids, css }) => { + const emotionKey = `${key} ${ids.join(' ')}`; + const newStyleTag = ``; + stylesHTML = `${stylesHTML}${newStyleTag}`; + }); - // Re-render including the extracted css. - const markup = renderToString( - - - , + // Add the emotion style tags after the insertion point meta tag + const markup = html.replace( + //, + `${stylesHTML}`, ); responseHeaders.set('Content-Type', 'text/html'); diff --git a/examples/remix-with-typescript/app/root.tsx b/examples/remix-with-typescript/app/root.tsx index e995ef1af49892..664455c6e7eca4 100644 --- a/examples/remix-with-typescript/app/root.tsx +++ b/examples/remix-with-typescript/app/root.tsx @@ -1,13 +1,34 @@ import * as React from 'react'; import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch } from 'remix'; -import { useContext } from 'react'; -import StylesContext from './src/StylesContext'; +import { withEmotionCache } from '@emotion/react'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material'; import theme from './src/theme'; - +import ClientStyleContext from './src/ClientStyleContext'; import Layout from './src/Layout'; -function Document({ children, title }: { children: React.ReactNode; title?: string }) { - const styleData = useContext(StylesContext); +interface DocumentProps { + children: React.ReactNode; + title?: string; +} + +const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => { + const clientStyleData = React.useContext(ClientStyleContext); + + // Only executed on client + useEnhancedEffect(() => { + // re-link sheet container + emotionCache.sheet.container = document.head; + // re-inject tags + const tags = emotionCache.sheet.tags; + emotionCache.sheet.flush(); + tags.forEach((tag) => { + // eslint-disable-next-line no-underscore-dangle + (emotionCache.sheet as any)._insertTag(tag); + }); + // reset cache to reapply global styles + clientStyleData.reset(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( @@ -22,14 +43,7 @@ function Document({ children, title }: { children: React.ReactNode; title?: stri rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> - {styleData?.map(({ key, ids, css }) => ( -