Merge branch 'master' into slack-feedbacks

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -22,14 +22,6 @@ body:
       options:
         - label: I have tested the latest version
           required: true
-  - type: textarea
-    attributes:
-      label: Current behavior 😯
-      description: Describe what happens instead of the expected behavior.
-  - type: textarea
-    attributes:
-      label: Expected behavior 🤔
-      description: Describe what should happen.
   - type: textarea
     attributes:
       label: Steps to reproduce 🕹
@@ -47,7 +39,14 @@ body:
         1.
         2.
         3.
-        4.
+  - type: textarea
+    attributes:
+      label: Current behavior 😯
+      description: Describe what happens instead of the expected behavior.
+  - type: textarea
+    attributes:
+      label: Expected behavior 🤔
+      description: Describe what should happen.
   - type: textarea
     attributes:
       label: Context 🔦

README.md

@@ -30,6 +30,7 @@
 [![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)
 
 </div>
 

benchmark/server/scenarios/styles.js

@@ -85,6 +85,7 @@ function HookButton(props) {
 }
 
 const NakedButton = (props) => <button type="submit" {...props} />;
+// eslint-disable-next-line react/no-unknown-property
 const EmotionCssButton = (props) => <button type="submit" css={emotionCss} {...props} />;
 
 suite

docs/data/base/components/button/button.md

@@ -6,7 +6,7 @@ githubLabel: 'component: button'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 ---
 
-# Unstyled button
+# Unstyled Button
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 

docs/data/base/components/click-away-listener/click-away-listener.md

@@ -5,7 +5,7 @@ components: ClickAwayListener
 githubLabel: 'component: ClickAwayListener'
 ---
 
-# Click-away listener
+# Click-Away Listener
 
 <p class="description">The ClickAwayListener component detects when a click event happens outside of its child element.</p>
 

docs/data/base/components/form-control/form-control.md

@@ -5,7 +5,7 @@ components: FormControlUnstyled
 githubLabel: 'component: FormControl'
 ---
 
-# Unstyled form control
+# Unstyled Form Control
 
 <p class="description">The FormControlUnstyled component is a utility that lets you associate a form input with auxiliary components, such as labels, error indicators, or helper text.</p>
 

docs/data/base/components/input/input.md

@@ -5,7 +5,7 @@ components: InputUnstyled
 githubLabel: 'component: input'
 ---
 
-# Unstyled input
+# Unstyled Input
 
 <p class="description">The InputUnstyled component provides users with a field to enter and edit text.</p>
 

docs/data/base/components/menu/menu.md

@@ -6,7 +6,7 @@ githubLabel: 'component: menu'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
 ---
 
-# Unstyled menu
+# Unstyled Menu
 
 <p class="description">The menu components provide your users with a list of options on temporary surfaces.</p>
 

docs/data/base/components/modal/modal.md

@@ -6,7 +6,7 @@ githubLabel: 'component: modal'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
 ---
 
-# Unstyled modal
+# Unstyled Modal
 
 <p class="description">The ModalUnstyled component lets you create dialogs, popovers, lightboxes, and other elements that force the user to take action before continuing.</p>
 

docs/data/base/components/popper/popper.md

@@ -6,7 +6,7 @@ githubLabel: 'component: Popper'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 ---
 
-# Unstyled popper
+# Unstyled Popper
 
 <p class="description">The PopperUnstyled component lets you create tooltips and popovers that display information about an element on the page.</p>
 

docs/data/base/components/select/UnstyledSelectControlled.js

@@ -165,7 +165,7 @@ export default function UnstyledSelectsMultiple() {
   const [value, setValue] = React.useState(10);
   return (
     <div>
-      <CustomSelect value={value} onChange={setValue}>
+      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
         <StyledOption value={10}>Ten</StyledOption>
         <StyledOption value={20}>Twenty</StyledOption>
         <StyledOption value={30}>Thirty</StyledOption>

docs/data/base/components/select/UnstyledSelectControlled.tsx

@@ -154,7 +154,7 @@ export default function UnstyledSelectsMultiple() {
   const [value, setValue] = React.useState<number | null>(10);
   return (
     <div>
-      <CustomSelect value={value} onChange={setValue}>
+      <CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
         <StyledOption value={10}>Ten</StyledOption>
         <StyledOption value={20}>Twenty</StyledOption>
         <StyledOption value={30}>Thirty</StyledOption>

docs/data/base/components/select/UnstyledSelectControlled.tsx.preview

@@ -1,4 +1,4 @@
-<CustomSelect value={value} onChange={setValue}>
+<CustomSelect value={value} onChange={(e, newValue) => setValue(newValue)}>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>

docs/data/base/components/select/UnstyledSelectIntroduction.js

@@ -56,7 +56,7 @@ Button.propTypes = {
       root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     }),
     defaultListboxOpen: PropTypes.bool,
-    defaultValue: PropTypes.object,
+    defaultValue: PropTypes.any,
     disabled: PropTypes.bool.isRequired,
     focusVisible: PropTypes.bool.isRequired,
     getSerializedValue: PropTypes.func,
@@ -68,7 +68,7 @@ Button.propTypes = {
     open: PropTypes.bool.isRequired,
     optionStringifier: PropTypes.func,
     renderValue: PropTypes.func,
-    value: PropTypes.object,
+    value: PropTypes.any,
   }).isRequired,
 };
 

docs/data/base/components/select/UnstyledSelectObjectValues.js

@@ -187,7 +187,10 @@ export default function UnstyledSelectObjectValues() {
   const [character, setCharacter] = React.useState(characters[0]);
   return (
     <div>
-      <CustomSelect value={character} onChange={setCharacter}>
+      <CustomSelect
+        value={character}
+        onChange={(e, newValue) => setCharacter(newValue)}
+      >
         {characters.map((c) => (
           <StyledOption key={c.name} value={c}>
             {c.name}

docs/data/base/components/select/UnstyledSelectObjectValues.tsx

@@ -181,7 +181,10 @@ export default function UnstyledSelectObjectValues() {
   const [character, setCharacter] = React.useState<Character | null>(characters[0]);
   return (
     <div>
-      <CustomSelect value={character} onChange={setCharacter}>
+      <CustomSelect
+        value={character}
+        onChange={(e, newValue) => setCharacter(newValue)}
+      >
         {characters.map((c) => (
           <StyledOption key={c.name} value={c}>
             {c.name}

docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview

@@ -1,4 +1,7 @@
-<CustomSelect value={character} onChange={setCharacter}>
+<CustomSelect
+  value={character}
+  onChange={(e, newValue) => setCharacter(newValue)}
+>
   {characters.map((c) => (
     <StyledOption key={c.name} value={c}>
       {c.name}

docs/data/base/components/select/UnstyledSelectObjectValuesForm.js

@@ -204,7 +204,11 @@ export default function UnstyledSelectObjectValues() {
     <div>
       <Header>Default behavior</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect value={character} onChange={setCharacter} name="character">
+        <CustomSelect
+          value={character}
+          onChange={(e, newValue) => setCharacter(newValue)}
+          name="character"
+        >
           {characters.map((c) => (
             <StyledOption key={c.name} value={c}>
               {c.name}
@@ -219,7 +223,7 @@ export default function UnstyledSelectObjectValues() {
       <form onSubmit={handleSubmit}>
         <CustomSelect
           value={character}
-          onChange={setCharacter}
+          onChange={(e, newValue) => setCharacter(newValue)}
           getSerializedValue={getSerializedValue}
           name="character"
         >

docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx

@@ -199,7 +199,11 @@ export default function UnstyledSelectObjectValues() {
     <div>
       <Header>Default behavior</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect value={character} onChange={setCharacter} name="character">
+        <CustomSelect
+          value={character}
+          onChange={(e, newValue) => setCharacter(newValue)}
+          name="character"
+        >
           {characters.map((c) => (
             <StyledOption key={c.name} value={c}>
               {c.name}
@@ -214,7 +218,7 @@ export default function UnstyledSelectObjectValues() {
       <form onSubmit={handleSubmit}>
         <CustomSelect
           value={character}
-          onChange={setCharacter}
+          onChange={(e, newValue) => setCharacter(newValue)}
           getSerializedValue={getSerializedValue}
           name="character"
         >

docs/data/base/components/select/select.md

@@ -6,7 +6,7 @@ githubLabel: 'component: select'
 waiAria: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
 ---
 
-# Unstyled select
+# Unstyled Select
 
 <p class="description">The select components let you create lists of options for users to choose from.</p>
 

docs/data/base/components/slider/slider.md

@@ -6,7 +6,7 @@ githubLabel: 'component: slider'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/
 ---
 
-# Unstyled slider
+# Unstyled Slider
 
 <p class="description">A slider is a UI element that lets users select a single value or a range of values along a bar.
 </p>

docs/data/base/components/switch/switch.md

@@ -6,7 +6,7 @@ githubLabel: 'component: switch'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 ---
 
-# Unstyled switch
+# Unstyled Switch
 
 <p class="description">Switches are UI elements that let users choose between two states—most commonly on/off.</p>
 

docs/data/base/components/tabs/tabs.md

@@ -6,7 +6,7 @@ githubLabel: 'component: tabs'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 ---
 
-# Unstyled tabs
+# Unstyled Tabs
 
 <p class="description">Tabs are UI elements for organizing and navigating between groups of related content.</p>
 

docs/data/base/pages.ts

@@ -50,8 +50,8 @@ const pages = [
         pathname: '/base/components/utils',
         subheader: 'utils',
         children: [
-          { pathname: '/base/react-click-away-listener', title: 'Click-away listener' },
-          { pathname: '/base/react-form-control', title: 'Form control' },
+          { pathname: '/base/react-click-away-listener', title: 'Click-Away Listener' },
+          { pathname: '/base/react-form-control', title: 'Form Control' },
           { pathname: '/base/react-modal', title: 'Modal' },
           { pathname: '/base/react-no-ssr', title: 'No SSR' },
           { pathname: '/base/react-popper', title: 'Popper' },

docs/data/joy/components/button/ButtonIcons.js

@@ -8,11 +8,11 @@ import ThumbUp from '@mui/icons-material/ThumbUp';
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button startIcon={<Add />}>Add to cart</Button>
+      <Button startDecorator={<Add />}>Add to cart</Button>
       <Button aria-label="Like" variant="outlined" color="neutral">
         <ThumbUp />
       </Button>
-      <Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
         Checkout
       </Button>
     </Box>

docs/data/joy/components/button/ButtonIcons.tsx

@@ -8,11 +8,11 @@ import ThumbUp from '@mui/icons-material/ThumbUp';
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button startIcon={<Add />}>Add to cart</Button>
+      <Button startDecorator={<Add />}>Add to cart</Button>
       <Button aria-label="Like" variant="outlined" color="neutral">
         <ThumbUp />
       </Button>
-      <Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
         Checkout
       </Button>
     </Box>

docs/data/joy/components/button/ButtonIcons.tsx.preview

@@ -1,7 +1,7 @@
-<Button startIcon={<Add />}>Add to cart</Button>
+<Button startDecorator={<Add />}>Add to cart</Button>
 <Button aria-label="Like" variant="outlined" color="neutral">
   <ThumbUp />
 </Button>
-<Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
+<Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
   Checkout
 </Button>

docs/data/joy/components/button/ButtonLink.js

@@ -7,7 +7,7 @@ import OpenInNew from '@mui/icons-material/OpenInNew';
 export default function IconButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+      <Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
         Open in new tab
       </Button>
       <IconButton aria-label="Open in new tab" component="a" href="#as-link">

docs/data/joy/components/button/ButtonLink.tsx

@@ -7,7 +7,7 @@ import OpenInNew from '@mui/icons-material/OpenInNew';
 export default function IconButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+      <Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
         Open in new tab
       </Button>
       <IconButton aria-label="Open in new tab" component="a" href="#as-link">

docs/data/joy/components/button/ButtonLink.tsx.preview

@@ -1,4 +1,4 @@
-<Button component="a" href="#as-link" startIcon={<OpenInNew />}>
+<Button component="a" href="#as-link" startDecorator={<OpenInNew />}>
   Open in new tab
 </Button>
 <IconButton aria-label="Open in new tab" component="a" href="#as-link">

docs/data/joy/components/button/ButtonVariables.js

@@ -8,15 +8,15 @@ export default function ButtonVariables() {
     <JoyVariablesDemo
       componentName="Button"
       renderCode={(formattedSx) => `<Button
-  startIcon={<FavoriteBorder />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
+  startDecorator={<FavoriteBorder />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
       data={[
         {
           var: '--Button-gap',
           defaultValue: '8px',
         },
       ]}
       renderDemo={(sx) => (
-        <Button sx={sx} startIcon={<FavoriteBorder />}>
+        <Button sx={sx} startDecorator={<FavoriteBorder />}>
           Favorite
         </Button>
       )}

docs/data/joy/components/button/button-pt.md

@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}
 

docs/data/joy/components/button/button-zh.md

@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}
 

docs/data/joy/components/button/button.md

@@ -64,9 +64,9 @@ Use the `disabled` prop to disable interaction and focus.
 
 {{"demo": "ButtonDisabled.js"}}
 
-### With icons
+### With decorators
 
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
 
 {{"demo": "ButtonIcons.js"}}