.circleci/config.yml

@@ -44,7 +44,7 @@ defaults: &defaults
     AWS_REGION_ARTIFACTS: eu-central-1
   working_directory: /tmp/material-ui
   docker:
-    - image: cimg/node:14.20
+    - image: cimg/node:14.21
 
 # CircleCI has disabled the cache across forks for security reasons.
 # Following their official statement, it was a quick solution, they
@@ -216,7 +216,7 @@ jobs:
       - install_js
       - run:
           name: '`yarn prettier` changes committed?'
-          command: yarn prettier check-changed
+          command: yarn prettier --check
       - run:
           name: Generate PropTypes
           command: yarn proptypes

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
   extends: [
     'plugin:eslint-plugin-import/recommended',
     'plugin:eslint-plugin-import/typescript',
+    'eslint-config-airbnb',
     'eslint-config-airbnb-typescript',
     'eslint-config-prettier',
   ],
@@ -160,8 +161,7 @@ module.exports = {
     'react/state-in-constructor': 'off',
     // stylistic opinion. For conditional assignment we want it outside, otherwise as static
     'react/static-property-placement': 'off',
-    // Currently not in recommended ruleset but catches real bugs.
-    'react/no-unstable-nested-components': 'error',
+
     'no-restricted-syntax': [
       // See https://github.com/eslint/eslint/issues/9192 for why it's needed
       ...baseStyleRules['no-restricted-syntax'],
@@ -171,11 +171,21 @@ module.exports = {
         selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
       },
     ],
+
+    // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved
+    'no-restricted-exports': 'off',
+    // Some of these occurences are deliberate and fixing them will break things in repos that use @monorepo dependency
+    'import/no-relative-packages': 'off',
+    // Avoid accidental auto-"fixes" https://github.com/jsx-eslint/eslint-plugin-react/issues/3458
+    'react/no-invalid-html-attribute': 'off',
+
+    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
   },
   overrides: [
     {
       files: [
         // matching the pattern of the test runner
+        '*.test.mjs',
         '*.test.js',
         '*.test.mjs',
         '*.test.ts',
@@ -355,6 +365,7 @@ module.exports = {
         'react/require-default-props': 'off',
         'react/state-in-constructor': 'off',
         'react/static-property-placement': 'off',
+        'react/function-component-definition': 'off',
       },
     },
     {

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13
+        uses: github/codeql-action/init@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13
+        uses: github/codeql-action/analyze@d00e8c09a38ef8c1ca1091fc55ef490776d2de73 # v2.1.13

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@9e288b03632e540432812c08ffaef313da7fb1d9 # v1.1.31
+        uses: github/codeql-action/upload-sarif@73113785b9e3aa4b2c9c2e1c91463606e882665e # v1.1.33
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,67 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.15
+
+<!-- generated comparing v5.10.14..master -->
+
+_Nov 21, 2022_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 @mnajdova added the button as the first component that implements [Material You](https://m3.material.io/) design (MD3)
+- 🌐 @MBilalShafi added Urdu (Pakistan) localization
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.15`
+
+- [Autocomplete] Fix keyboard navigation when using custom popover (#35160) @sai6855
+- [typescript] Add `background.defaultChannel` to `CssVarsPalette` (#35174) @alexfauquette
+- [l10n] Add Urdu (ur-PK) locale (#35154) @MBilalShafi
+
+### `@mui/icons-material@5.10.15`
+
+- [icons] Update the Material Design icons (#35194) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.63`
+
+- [Material You] Add theme structure & Button component (#34650) @mnajdova
+
+### `@mui/base@5.0.0-alpha.106`
+
+- [Select] Add attributes to conform with ARIA 1.2 (#35182) @michaldudak
+
+### Docs
+
+- [docs] Fix a couple documentation errors (#35217) @danilo-leal
+- [docs] Change MUI -> Material UI in icons-material's readme (#35220) @michaldudak
+- [docs] the pages have no <link rel=canonical so we need to tell Google to not index the staging envs @oliviertassinari
+- [docs] Fix confusion in TOCs when reaching scroll bottom (#35214) @oliviertassinari
+- [docs] Fix typos in section titles (#35025) @iamxukai
+- [docs] Fix typo in legacy date picker migration guide @oliviertassinari
+- [docs] Iterating on recent Joy UI Component page updates (#35162) @samuelsycamore
+- [docs] Inform that pickers are in X repository (#35189) @alexfauquette
+- [docs] Explain how the `error` prop works in the Unstyled Input (#35171) @michaldudak
+- [docs] Hotfix missing styles in dark mode (#35179) @siriwatknp
+- [docs] Add Joy UI theme typography page (#34811) @siriwatknp
+- [docs] Fix undo/redo in live editor (#35163) @oliviertassinari
+- [docs] Revise the Joy UI "Avatar" component page (#35152) @samuelsycamore
+- [docs] Make navbar backdrop filter consistent with website (#35157) @danilo-leal
+- [docs] Host CodeSandbox on MUI org (#35110) @oliviertassinari
+- [docs] Uplift introduction demos & make consistent with Base (#34316) @danilo-leal
+- [website] Add Security questionnaire in pricing (#35172) @oliviertassinari
+- [website] Fix theme mode toggle state (#35216) @siriwatknp
+- [website] Exclude experiment pages in production (#35180) @siriwatknp
+- [website] Disable SEO for performance pages (#35173) @oliviertassinari
+
+### Core
+
+- [core] Convert icons scripts to ESM (#35101) @Janpot
+- [core] Group renovate GitHub Action dependency updates @oliviertassinari
+- [core] Upgrade eslint-config-airbnb-typescript (#34642) @Janpot
+- [core] Ensure that prettier CI step fails when code is badly formatted (#35170) @michaldudak
+
+All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @iamxukai, @Janpot, @MBilalShafi, @michaldudak, @oliviertassinari, @samuelsycamore, @siriwatknp
+
 ## v5.10.14
 
 <!-- generated comparing v5.10.13..master -->

benchmark/package.json

@@ -11,13 +11,13 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@chakra-ui/system": "^2.3.1",
+    "@chakra-ui/system": "^2.3.3",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^2.1.5",
-    "@mui/material": "^5.10.14",
-    "@mui/styles": "^5.10.14",
-    "@mui/system": "^5.10.14",
+    "@mui/material": "^5.10.15",
+    "@mui/styles": "^5.10.15",
+    "@mui/system": "^5.10.15",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.27.1",
@@ -29,8 +29,8 @@
     "redux": "^4.2.0",
     "serve-handler": "^6.1.5",
     "styled-components": "^5.3.6",
-    "theme-ui": "^0.15.3",
-    "webpack": "^5.74.0",
+    "theme-ui": "^0.15.4",
+    "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0"
   }
 }

docs/data/joy/components/alert/AlertColors.js

@@ -1,11 +1,12 @@
+import * as React from 'react';
 import Alert from '@mui/joy/Alert';
+import Stack from '@mui/joy/Stack';
 import Box from '@mui/joy/Box';
 import Radio from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Sheet from '@mui/joy/Sheet';
 
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
 
 export default function AlertColors() {
   const [variant, setVariant] = React.useState('solid');
@@ -14,16 +15,11 @@ export default function AlertColors() {
       sx={{
         display: 'flex',
         alignItems: 'center',
-        gap: 3,
+        justifyContent: 'center',
+        width: '100%',
       }}
     >
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-          gap: 1,
-        }}
-      >
+      <Stack spacing={1} sx={{ width: '100%', maxWidth: 400 }}>
         <Alert variant={variant} color="primary">
           Primary
         </Alert>
@@ -42,15 +38,8 @@ export default function AlertColors() {
         <Alert variant={variant} color="warning">
           Warning
         </Alert>
-      </Box>
-      <Sheet
-        sx={{
-          background: 'transparent',
-          pl: 4,
-          borderLeft: '1px solid',
-          borderColor: 'divider',
-        }}
-      >
+      </Stack>
+      <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
           level="body2"
           fontWeight="xl"

docs/data/joy/components/alert/AlertColors.tsx

@@ -1,11 +1,12 @@
+import * as React from 'react';
 import Alert from '@mui/joy/Alert';
+import Stack from '@mui/joy/Stack';
 import Box from '@mui/joy/Box';
 import Radio from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Sheet from '@mui/joy/Sheet';
 import { VariantProp } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
 
 export default function AlertColors() {
   const [variant, setVariant] = React.useState<VariantProp>('solid');
@@ -14,16 +15,11 @@ export default function AlertColors() {
       sx={{
         display: 'flex',
         alignItems: 'center',
-        gap: 3,
+        justifyContent: 'center',
+        width: '100%',
       }}
     >
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-          gap: 1,
-        }}
-      >
+      <Stack spacing={1} sx={{ width: '100%', maxWidth: 400 }}>
         <Alert variant={variant} color="primary">
           Primary
         </Alert>
@@ -42,15 +38,8 @@ export default function AlertColors() {
         <Alert variant={variant} color="warning">
           Warning
         </Alert>
-      </Box>
-      <Sheet
-        sx={{
-          background: 'transparent',
-          pl: 4,
-          borderLeft: '1px solid',
-          borderColor: 'divider',
-        }}
-      >
+      </Stack>
+      <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
           level="body2"
           fontWeight="xl"

docs/data/joy/components/alert/alert.md

@@ -18,59 +18,38 @@ Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WA
 Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
 
-{{"demo": "AlertUsage.js", "hideToolbar": true}}
+{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-## Usage
-
-After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+## Basics
 
 ```jsx
 import Alert from '@mui/joy/Alert';
-
-export default function MyApp() {
-  return <Alert />;
-}
 ```
 
-## Basics
-
 The Alert component wraps around its content, and stretches to fill its enclosing container, as shown below:
 
 {{"demo": "AlertBasic.js"}}
 
-## Anatomy
-
-The Alert component is composed of a single root `<div>` element with its `role` set to `alert`:
-
-```html
-<div role="alert" class="JoyAlert-root">
-  This is how an Alert renders in the DOM.
-</div>
-```
-
-### Overriding the root slot
+## Customization
 
-Use the `component` prop to override the root slot with a custom element.
-For example, the following code snippet replaces the default `<div>` with a `<span>`:
+### Variants
 
-```jsx
-<Alert component="span">Alert content</Alert>
+The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`.
 
-// renders as:
-<span role="alert" class="JoyAlert-root">
-  Alert content
-</span>
-```
+{{"demo": "AlertVariants.js"}}
 
-## Customization
+:::success
+To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+Note that you lose the global variants when you add custom variants.
+:::
 
-### Variants
+### Sizes
 
-The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `soft` (default), `solid`, `outlined`, and `plain`.
+The Alert component comes in three sizes: `sm`, `md` (default), and `lg`:
 
-{{"demo": "AlertVariants.js"}}
+{{"demo": "AlertSizes.js"}}
 
 ### Colors
 
@@ -79,12 +58,6 @@ The demo below shows how the values for the `color` prop are affected by the glo
 
 {{"demo": "AlertColors.js"}}
 
-### Sizes
-
-The Alert component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`:
-
-{{"demo": "AlertSizes.js"}}
-
 ### Decorators
 
 Use the `startDecorator` and `endDecorator` props to append actions and icons to either side of the Alert:
@@ -111,3 +84,13 @@ Here are some factors to consider to ensure that your Alert is accessible:
 - Alerts that occur too frequently can [inhibit the usability](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html) of your app.
 - Dynamically rendered alerts are announced by screen readers; alerts that are already present on the page when it loads are _not_ announced.
 - Color does not add meaning to the UI for users who require assistive technology. You must ensure that any information conveyed through color is also denoted in other ways, such as within the text of the alert itself, or with additional hidden text that's read by screen readers.
+
+## Anatomy
+
+The Alert component is composed of a single root `<div>` element with its `role` set to `alert`:
+
+```html
+<div role="alert" class="JoyAlert-root">
+  <!-- Alert contents -->
+</div>
+```