CHANGELOG.md

@@ -1,5 +1,79 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.17
+
+<!-- generated comparing v5.10.16..master -->
+
+_Dec 6, 2022_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ @mnajdova added a [Material You Button playground](https://mui.com/material-ui/react-button/#material-you-version) (#35222)
+- 🔧 @hbjORbj renamed `components` / `componentProps` to `slots` / `slotProps` prop in Joy UI to create consistency across products (#34997)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.17`
+
+- &#8203;<!-- 31 -->[Slider] Fix `markActive` theme class not getting applied (#35067) @ZeeshanTamboli
+- &#8203;<!-- 30 -->[SwipeableDrawer] Fix missing close animation when initial open is true (#35010) @sai6855
+- &#8203;<!-- 28 -->[material-ui] Add channel colors if possible (#35178) @siriwatknp
+- &#8203;<!-- 10 -->[Fab] Increase disabled styles precedence (#35304) @Uzwername
+- &#8203;<!-- 05 -->[Rating] Apply `labelEmptyValueActive` style overrides from theme (#35315) @sai6855
+
+### `@mui/system@5.10.17`
+
+- &#8203;<!-- 04 -->[system] Add support for nested CssVarsProvider (#35277) @siriwatknp
+
+### `@mui/joy@5.0.0-alpha.57`
+
+#### BREAKING CHANGE
+
+- &#8203;<!-- 08 -->[Joy] Add `slots`/`slotProps` props to the typing of all components and apply `useSlot` to all components (#34997) @hbjORbj
+
+  - Change all occurrences of `components` and `componentsProps` props in Joy UI components to `slots` and `slotProps`, respectively.
+
+  ```diff
+  -<Autocomplete components={{listbox: CustomListbox}} componentsProps={{listbox: { className: 'custom-listbox' }}} />
+  +<Autocomplete slots={{listbox: CustomListbox}} slotProps={{listbox: { className: 'custom-listbox' }}} />
+  ```
+
+  You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-rename-components-to-slots) to help with the migration.
+
+#### Changes
+
+- &#8203;<!-- 07 -->[Joy] Miscellaneous fixes (#35345) @siriwatknp
+- &#8203;<!-- 06 -->[Joy][textarea] Expose decorator classes (#35247) @zignis
+
+### Docs
+
+- &#8203;<!-- 29 -->[docs] Improve spacing with ul (#35302) @oliviertassinari
+- &#8203;<!-- 23 -->[docs] Correct grammatically incorrect sentences in CONTRIBUTING.md (#34949) @Pandey-utkarsh
+- &#8203;<!-- 22 -->[docs] Move the demo higher in the API TOC (#35202) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix incorrect link in minimizing-bundle-size (#35297) @Juneezee
+- &#8203;<!-- 20 -->[docs] Revise and expand Joy UI "Breadcrumbs" page (#35292) @samuelsycamore
+- &#8203;<!-- 19 -->[docs] Fix wrong import in the unstyled tabs page (#35310) @guotie
+- &#8203;<!-- 18 -->[docs] Disable translations (#34820) @mnajdova
+- &#8203;<!-- 17 -->[docs] Fix typo (#35312) @flaviendelangle
+- &#8203;<!-- 16 -->[docs] Add Material You Button playground (#35222) @mnajdova
+- &#8203;<!-- 15 -->[docs] Fix experimental API page duplication (#35213) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Improve the autogenerated "Unstyled" and "API" text (#35185) @samuelsycamore
+- &#8203;<!-- 13 -->[docs] Fix ad margin on API pages (#35201) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Revise and expand the Joy UI "Badge" page (#35199) @samuelsycamore
+- &#8203;<!-- 11 -->[docs] Update MUI Base docs with latest style conventions (#35034) @samuelsycamore
+- &#8203;<!-- 09 -->[l10n] Improve Chinese (Taiwan) zh-TW locale (#35328) @happyincent
+- &#8203;<!-- 02 -->[website] Update MUI stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs
+
+### Core
+
+- &#8203;<!-- 27 -->[core] Use componentStyles.name over componentName (#35303) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Fix warning leak in production (#35313) @oliviertassinari
+- &#8203;<!-- 25 -->[core] Move the internal packages from docs/packages (#35305) @michaldudak
+- &#8203;<!-- 24 -->[core] Clean up the API docs generation scripts (#35244) @michaldudak
+- &#8203;<!-- 03 -->[test] Scope the tests to just Material UI components (#35219) @siriwatknp
+- &#8203;<!-- 01 -->[website] Remove BlackFriday notification @oliviertassinari
+
+All contributors of this release in alphabetical order: @flaviendelangle, @guotie, @happyincent, @hbjORbj, @Juneezee, @michaldudak, @mnajdova, @nomandhoni-cs, @oliviertassinari, @Pandey-utkarsh, @sai6855, @samuelsycamore, @siriwatknp, @Uzwername, @zignis
+
 ## 5.10.16
 
 <!-- generated comparing v5.10.15..master -->

CONTRIBUTING.md

@@ -5,7 +5,7 @@ If you're reading this, you're awesome! Thank you for helping us make this proje
 ## Code of Conduct
 
 MUI has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
-Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
+Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) to understand what actions will and will not be tolerated.
 
 ## A large spectrum of contributions
 
@@ -19,15 +19,15 @@ Working on your first Pull Request? You can learn how from this free video serie
 
 To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"good+first+issue") that contain changes that have a relatively limited scope. This label means that there is already a working solution to the issue in the discussion section. Therefore, it is a great place to get started.
 
-We also have a list of [good to take issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"good+to+take"). This label is set when there has been already some discussion about the solution and it is clear in which direction to go. These issues are good for developers that want to reduce the chance of going down a rabbit hole.
+We also have a list of [good to take issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"good+to+take"). This label is set when there has already been some discussion about the solution, and it is clear in which direction to go. These issues are good for developers that want to reduce the chance of going down a rabbit hole.
 
 You can also work on any other issue you choose to.
 The "good first" and "good to take" issues are just issues where we have a clear picture about scope and timeline.
 Pull requests working on other issues or completely new problems may take a bit longer to review when they don't fit into our current development cycle.
 
-If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you have started to work on it so other people don't accidentally duplicate your effort.
+If you decide to fix an issue, please make sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you have started to work on it, so other people don't accidentally duplicate your effort.
 
-If somebody claims an issue but doesn't follow up for more than a week, it's fine to take it over but you should still leave a comment.
+If somebody claims an issue but doesn't follow up for more than a week, it's fine to take it over, but you should still leave a comment.
 If there has been no activity on the issue for 7 to 14 days, it is safe to assume that nobody is working on it.
 
 ## Sending a Pull Request
@@ -94,8 +94,8 @@ Changes to the docs will hot reload the site.
 
 ### Trying changes on the playground
 
-While we recommend to try your changes on the documentation site—it's not always ideal.
-You might face following problems:
+While we recommend trying your changes on the documentation site—it's not always ideal.
+You might face the following problems:
 
 - updating the existing demos prevent you to work in isolation on a single instance of the component
 - emptying an existing page to try your changes in isolation lead to a noisy `git diff`
@@ -114,15 +114,15 @@ The new playground will be accessible under: `http://localhost:3000/playground/<
 
 ### How to increase the chance of being accepted?
 
-Continuous Integration (CI) runs a series of checks automatically when a Pull Request is opened. If you're not
-sure if your changes will pass, you can always open a Pull Request and the GitHub UI will display a summary of
-the results. If any of them fail, refer to [Checks and how to fix them](#checks-and-how-to-fix-them).
+Continuous Integration (CI) runs a series of checks automatically when a Pull Request is opened. If you're
+unsure if your changes will pass, you can always open a Pull Request, and the GitHub UI will display a summary
+of the results. If any of them fail, refer to [Checks and how to fix them](#checks-and-how-to-fix-them).
 
 Make sure the following is true:
 
 <!-- #default-branch-switch -->
 
-- The branch is targeted at `master` for ongoing development. We do our best to keep `master` in good shape, with all tests passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
+- The branch is targeted at `master` for ongoing development. All tests are passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
 - If a feature is being added:
   - If the result was already achievable with the core library, explain why this feature needs to be added to the core.
   - If this is a common use case, consider adding an example to the documentation.
@@ -140,11 +140,11 @@ Because we will only merge a Pull Request for which all tests pass. The followin
 - The demos are up-to-date. If demos were changed, make sure `yarn docs:typescript:formatted` does not introduce changes. See [about writing demos](#3-write-the-content-of-the-demo).
 - The Pull Request title follows the pattern `[Component] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) for a great explanation).
 
-If you have missed a step, don't worry, the Continuous Integration will run a thorough test on your commits and the maintainers of the project can assist.
+If you have missed a step, don't worry, the Continuous Integration will run a thorough test on your commits, and the maintainers of the project can assist.
 
 If your pull request addresses an open issue, make sure to link the PR to that issue.
 Use any [supported GitHub keyword](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) in the PR description to automatically link them.
-This makes it easier to understand where the PR is coming from and also speeds things up as the issue gets closed when the PR is merged.
+This makes it easier to understand where the PR is coming from, and also speeds things up as the issue gets closed when the PR is merged.
 
 #### Checks and how to fix them
 

README.md

@@ -28,7 +28,6 @@
 [![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
 [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
 [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
-[![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.mui.com/project/material-ui-docs)
 [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui)
 [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
 
@@ -233,14 +232,6 @@ These great services sponsor MUI's core infrastructure:
 
 [Netlify](https://www.netlify.com/) lets us distribute the documentation.
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/crowdin-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/crowdin-lightmode.svg">
-  <img alt="Crowdin logo" src="/docs/public/static/readme/crowdin-darkmode.svg">
-</picture>
-
-[Crowdin](https://crowdin.com/) lets us translate the documentation.
-
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
   <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^2.1.5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^5.10.17",
     "@mui/styles": "^5.10.16",
-    "@mui/system": "^5.10.16",
+    "@mui/system": "^5.10.17",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.28.1",

docs/config.d.ts

@@ -0,0 +1,7 @@
+export const LANGUAGES: string[];
+
+export const LANGUAGES_SSR: string[];
+
+export const LANGUAGES_IN_PROGRESS: string[];
+
+export const LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;

docs/config.js

@@ -0,0 +1,29 @@
+// Valid languages to server-side render in production
+const LANGUAGES = ['en'];
+
+// Server side rendered languages
+const LANGUAGES_SSR = ['en'];
+
+// Work in progress
+const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
+
+const LANGUAGES_IGNORE_PAGES = (pathname) => {
+  // We don't have the bandwidth like Qt to translate our blog posts
+  // https://www.qt.io/zh-cn/blog
+  if (pathname === '/blog' || pathname.startsWith('/blog/')) {
+    return true;
+  }
+
+  if (pathname === '/size-snapshot/') {
+    return true;
+  }
+
+  return false;
+};
+
+module.exports = {
+  LANGUAGES,
+  LANGUAGES_IN_PROGRESS,
+  LANGUAGES_SSR,
+  LANGUAGES_IGNORE_PAGES,
+};

docs/data/base/components/badge/badge.md

@@ -7,14 +7,14 @@ githubLabel: 'component: badge'
 
 # Unstyled badge
 
-<p class="description">The BadgeUnstyled component generates a small label that is attached to its child element.</p>
+<p class="description">The Unstyled Badge component generates a small label that is attached to its child element.</p>
 
 ## Introduction
 
 A badge is a small descriptor for UI elements.
 It typically sits on or near an element and indicates the status of that element by displaying a number, icon, or other short set of characters.
 
-The `BadgeUnstyled` component creates a badge that is applied to its child element.
+The Unstyled Badge component creates a badge that is applied to its child element.
 
 {{"demo": "UnstyledBadgeIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}
 
@@ -38,7 +38,7 @@ export default function MyApp() {
 
 ### Basics
 
-`BadgeUnstyled` wraps around the UI element that it's attached to.
+The Unstyled Badge wraps around the UI element that it's attached to.
 For instance, if the badge indicates the number of emails in an inbox, then the component will be structured like this:
 
 ```jsx
@@ -49,7 +49,7 @@ For instance, if the badge indicates the number of emails in an inbox, then the
 
 ### Anatomy
 
-The `BadgeUnstyled` component is composed of a root `<span>` that houses the element that the badge is attached to, followed by a `<span>` slot to represent the badge itself:
+The Unstyled Badge component is composed of a root `<span>` that houses the element that the badge is attached to, followed by a `<span>` slot to represent the badge itself:
 
 ```html
 <span class="BaseBadge-root">
@@ -94,7 +94,7 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl
 import { useBadge } from '@mui/base/BadgeUnstyled';
 ```
 
-The `useBadge` hook lets you apply the functionality of `BadgeUnstyled` to a fully custom component.
+The `useBadge` hook lets you apply the functionality of a badge to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
 Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).