[docs] Fix 100+ typos throughout the Material UI docs (#36194)

Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Co-authored-by: Michał Dudak <michal.dudak@gmail.com>

benchmark/browser/README.md

@@ -12,7 +12,7 @@ You should use these numbers exclusively for comparing performance between diffe
 
 ## Output
 
-For compareable results ask a maintainer to approve the CircleCI job `benchmark`.
+For comparable results ask a maintainer to approve the CircleCI job `benchmark`.
 
 ```sh
 noop (baseline):

docs/data/joy/components/input/input.md

@@ -11,7 +11,7 @@ unstyled: /base/react-input/
 
 ## Introduction
 
-The Input component enhances the functionality of the native HTML `<input>` tag by providing expanded customization options and accessibilty features.
+The Input component enhances the functionality of the native HTML `<input>` tag by providing expanded customization options and accessibility features.
 
 {{"demo": "InputUsage.js", "hideToolbar": true, "bg": "gradient"}}
 

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

@@ -49,7 +49,7 @@ To swap the label and radio position, use the CSS property `flex-direction: row-
 
 ### Radio group
 
-The `RadioGrop` component is the ideal wrapper for multiple `Radio` components as it provides a tailored API for radio button grouping and proper keyboard-navigation accessibility support.
+The `RadioGroup` component is the ideal wrapper for multiple `Radio` components as it provides a tailored API for radio button grouping and proper keyboard-navigation accessibility support.
 
 {{"demo": "RadioButtonsGroup.js"}}
 

docs/data/joy/components/select/select.md

@@ -138,7 +138,7 @@ To control the placement of the listbox, use `placement`:
 
 ### `Option` component
 
-The `Option` component is used for the chooseable options within the select.
+The `Option` component is used for the choosable options within the select.
 
 The selected option inherits the `color` from the Select parent, and it uses the `primary` palette by default.
 However, it does not inherit the Select's used `variant`.

docs/data/joy/components/stack/stack.md

@@ -13,7 +13,7 @@ githubLabel: 'component: stack'
 The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child.
 
 :::info
-Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ hortizontal arrangement.
+Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ horizontal arrangement.
 :::
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/joy/components/table/table.md

@@ -95,7 +95,7 @@ To learn how to add custom sizes to the component, check out [Themed components
 
 ### Stripe
 
-To create constast between rows, use the `stripe` prop with `odd` or `even` values.
+To create contrast between rows, use the `stripe` prop with `odd` or `even` values.
 
 {{"demo": "TableStripe.js"}}
 

docs/data/joy/components/tooltip/tooltip.md

@@ -8,7 +8,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
 # Tooltip
 
-<p class="description">A toolip .</p>
+<p class="description">A tooltip .</p>
 
 ## Introduction
 

docs/data/joy/getting-started/tutorial/LoginFinal.js

@@ -42,7 +42,7 @@ export default function App() {
           sx={{
             width: 300,
             mx: 'auto', // margin left & right
-            my: 4, // margin top & botom
+            my: 4, // margin top & bottom
             py: 3, // padding top & bottom
             px: 2, // padding left & right
             display: 'flex',

docs/data/joy/getting-started/tutorial/tutorial.md

@@ -64,7 +64,7 @@ Replace your basic Sheet from the previous step with the following `sx`-styled S
   sx={{
     width: 300,
     mx: 'auto', // margin left & right
-    my: 4, // margin top & botom
+    my: 4, // margin top & bottom
     py: 3, // padding top & bottom
     px: 2, // padding left & right
     display: 'flex',

docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md

@@ -344,13 +344,13 @@ import MaterialTypography, {
   typographyClasses as muiTypographyClasses,
 } from '@mui/material/Typography';
 import JoyTypography, {
-  typographyClasses as joyTyographyClasses,
+  typographyClasses as joyTypographyClasses,
 } from '@mui/joy/Typography';
 import Stack from '@mui/material/Stack';
 
 <Stack
   sx={{
-    // similar to `& .${joyTyographyClasses.root}`
+    // similar to `& .${joyTypographyClasses.root}`
     [`& .${muiTypographyClasses.root}`]: {
       color: 'red',
     },

docs/data/material/components/slider/slider.md

@@ -150,7 +150,7 @@ However, you need to make sure that:
 ### IE 11
 
 The slider's value label is not centered in IE 11.
-The alignement is not handled to make customizations easier with the lastest browsers.
+The alignment is not handled to make customizations easier with the latest browsers.
 You can solve the issue with:
 
 ```css

docs/data/material/experimental-api/classname-generator/classname-generator.md

@@ -120,7 +120,7 @@ Now, the `Mui` class is gone.
 
 ## Framework examples
 
-Always create an intializer file to hoist the `ClassNameGenerator` call to the top.
+Always create an initializer file to hoist the `ClassNameGenerator` call to the top.
 
 ```js
 // create a new file called `MuiClassNameSetup.js` at the root or src folder.

docs/data/material/experimental-api/css-theme-variables/customization.md

@@ -136,7 +136,7 @@ const theme = extendTheme({
       palette: {
         // The best part is that you can refer to the variables wherever you like 🤩
         gradient:
-          'linear-gradient(to left, var(--mui-palete-primary-main), var(--mui-palette-primary-dark))',
+          'linear-gradient(to left, var(--mui-palette-primary-main), var(--mui-palette-primary-dark))',
         border: {
           subtle: 'var(--mui-palette-neutral-200)',
         },
@@ -145,7 +145,7 @@ const theme = extendTheme({
     dark: {
       palette: {
         gradient:
-          'linear-gradient(to left, var(--mui-palete-primary-light), var(--mui-palette-primary-main))',
+          'linear-gradient(to left, var(--mui-palette-primary-light), var(--mui-palette-primary-main))',
         border: {
           subtle: 'var(--mui-palette-neutral-600)',
         },

docs/data/material/guides/right-to-left/RtlOptOutStylis.js

@@ -33,15 +33,15 @@ const ltrCache = createCache({
 export default function RtlOptOut() {
   const [rtl, setRtl] = React.useState(false);
 
-  const handleChage = () => {
+  const handleChange = () => {
     setRtl(!rtl);
   };
 
   return (
     <React.Fragment>
       <div>
         <FormControlLabel
-          control={<Switch checked={rtl} onChange={handleChage} />}
+          control={<Switch checked={rtl} onChange={handleChange} />}
           label="RTL"
         />
       </div>

docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx

@@ -33,15 +33,15 @@ const ltrCache = createCache({
 export default function RtlOptOut() {
   const [rtl, setRtl] = React.useState(false);
 
-  const handleChage = () => {
+  const handleChange = () => {
     setRtl(!rtl);
   };
 
   return (
     <React.Fragment>
       <div>
         <FormControlLabel
-          control={<Switch checked={rtl} onChange={handleChage} />}
+          control={<Switch checked={rtl} onChange={handleChange} />}
           label="RTL"
         />
       </div>

docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview

@@ -1,7 +1,7 @@
 <React.Fragment>
   <div>
     <FormControlLabel
-      control={<Switch checked={rtl} onChange={handleChage} />}
+      control={<Switch checked={rtl} onChange={handleChange} />}
       label="RTL"
     />
   </div>

docs/data/material/migration/migration-v4/v5-component-changes.md

@@ -1445,7 +1445,7 @@ This change is meant to encourage composition.
 
 The built-in 24px padding has been removed.
 
-To keep it intact, add the folllowing:
+To keep it intact, add the following:
 
 ```diff
 -<Stepper>

docs/data/material/migration/migration-v4/v5-style-changes.md

@@ -316,7 +316,7 @@ The default `theme.palette.success` colors were changed to pass the AA accessibi
 
 ### Change default theme.palette.warning colors
 
-The default `theme.palette.warning` colors were changed to pass the AA accesibility standard contrast ratio in both light and dark modes.
+The default `theme.palette.warning` colors were changed to pass the AA accessibility standard contrast ratio in both light and dark modes.
 
 ```diff
   warning = {

docs/data/system/components/grid/grid.md

@@ -10,7 +10,7 @@ githubLabel: 'component: Grid'
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-The `Grid` component works well for a layout with known columns. The columns can be configured in multple breakpoints which you have to specify the column span of each child.
+The `Grid` component works well for a layout with known columns. The columns can be configured in multiple breakpoints which you have to specify the column span of each child.
 
 ## How it works
 

docs/pages/blog/mui-product-comparison.md

@@ -148,7 +148,7 @@ It features an intuitive UI and corresponding API to display different views of
 
 - **Data management:** Create, retrieve, update and delete your data with ease.
 - **Sophisticated data analysis:** Pin rows and columns, group and aggregate values, export your view of the data to other formats. MUI X's Data Grid is one of the most feature-rich grids available on the market today.
-- **Intuitive customization:** Customizing the Data Grid's styles and behaviors works just like you'd expect if you're familar with Material UI—no new concepts to master along the way.
+- **Intuitive customization:** Customizing the Data Grid's styles and behaviors works just like you'd expect if you're familiar with Material UI—no new concepts to master along the way.
 - **Accessibility:** It's notoriously difficult to optimize a data grid's accessibility, which is precisely why we make it a top priority—we obsess over these details so you don't have to.
 
 #### Ideal use cases

docs/scripts/reportBrokenLinks.js

@@ -168,7 +168,7 @@ const getAnchor = (link) => {
   return potentialAnchor.includes('#') ? potentialAnchor : '';
 };
 
-// Export usefull method for doing similar checks in other repositories
+// Export useful method for doing similar checks in other repositories
 module.exports = { parseDocFolder, getAnchor };
 
 /**

docs/src/components/header/ThemeModeToggle.tsx

@@ -40,7 +40,7 @@ export default function ThemeModeToggle(props: {
 }) {
   const theme = useTheme();
   if (theme.vars) {
-    // Temporaly renders conditionally because `useColorScheme` could not be used in the pages that haven't migrated to CSS theme variables.
+    // Temporarily renders conditionally because `useColorScheme` could not be used in the pages that haven't migrated to CSS theme variables.
     return <CssVarsModeToggle {...props} />;
   }
   return (

docs/src/components/showcase/TaskCard.tsx

@@ -60,7 +60,7 @@ export default function TaskCard() {
         </Box>
         <Box sx={{ display: 'flex' }}>
           <Avatar
-            imgProps={{ 'aria-labelledby': 'demo-task-card-assigne-name' }}
+            imgProps={{ 'aria-labelledby': 'demo-task-card-assignee-name' }}
             src="/static/images/avatar/1-sm.jpeg"
             variant="rounded"
             sx={{ border: '1px solid #fff' }}
@@ -69,7 +69,7 @@ export default function TaskCard() {
             <Typography variant="body2" color="primary.200" fontWeight={500}>
               Assigned to
             </Typography>
-            <Typography id="demo-task-card-assigne-name" fontWeight={500}>
+            <Typography id="demo-task-card-assignee-name" fontWeight={500}>
               Michael Scott
             </Typography>
           </Box>

docs/src/modules/brandingTheme.ts

@@ -333,7 +333,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
      * }
      *
      * -------------------------------------------------------------------------------------------------
-     * 💡 This util should be used in an array if the styles contain psuedo classes or nested selectors:
+     * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors:
      *
      * ❌ There is a chance that the upper selectors could be overridden
      * {

docs/src/modules/components/AppLayoutDocsFooter.js

@@ -308,7 +308,7 @@ export default function AppLayoutDocsFooter(props) {
       setCommentOpen(true);
     }
 
-    // Manualy move focus if commment is already open.
+    // Manually move focus if comment is already open.
     // If the comment is closed, onEntered will call focus itself;
     if (inputRef.current) {
       inputRef.current.focus();
@@ -357,7 +357,7 @@ export default function AppLayoutDocsFooter(props) {
         setCommentOpen(true);
         setCommentedSection(section);
 
-        // Manualy move focus if commment is already open.
+        // Manually move focus if comment is already open.
         // If the comment is closed, onEntered will call focus itself;
         if (inputRef.current) {
           inputRef.current.focus();

docs/src/modules/components/AppNavDrawerItem.js

@@ -5,7 +5,7 @@ import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRigh
 import { alpha, styled } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import Chip from '@mui/material/Chip';
-import { shoudHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
+import { shouldHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import Link from 'docs/src/modules/components/Link';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
 import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded';
@@ -239,7 +239,7 @@ export default function AppNavDrawerItem(props) {
   const [open, setOpen] = React.useState(openImmediately);
   const handleClick = (event) => {
     // Ignore the action if opening the link in a new tab
-    if (shoudHandleLinkClick(event)) {
+    if (shouldHandleLinkClick(event)) {
       return;
     }
 

docs/src/modules/components/AppSearch.js

@@ -156,7 +156,7 @@ function NewStartScreen() {
   );
 }
 
-function DocSearcHit(props) {
+function DocSearchHit(props) {
   const { children, hit } = props;
 
   function displayTag(pathname) {
@@ -196,7 +196,7 @@ function DocSearcHit(props) {
   return <Link href={hit.url}>{children}</Link>;
 }
 
-DocSearcHit.propTypes = {
+DocSearchHit.propTypes = {
   children: PropTypes.node,
   hit: PropTypes.object.isRequired,
 };
@@ -340,7 +340,7 @@ export default function AppSearch() {
                 };
               });
             }}
-            hitComponent={DocSearcHit}
+            hitComponent={DocSearchHit}
             initialScrollY={typeof window !== 'undefined' ? window.scrollY : undefined}
             onClose={onClose}
             navigator={keyboardNavigator}

docs/src/modules/components/AppTableOfContents.js

@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import NoSsr from '@mui/material/NoSsr';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
-import { shoudHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
+import { shouldHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner';
 
 const Nav = styled('nav')(({ theme }) => ({
@@ -194,7 +194,7 @@ export default function AppTableOfContents(props) {
 
   const handleClick = (hash) => (event) => {
     // Ignore click for new tab/new window behavior
-    if (shoudHandleLinkClick(event)) {
+    if (shouldHandleLinkClick(event)) {
       return;
     }
 

docs/src/modules/components/DemoErrorBoundary.js

@@ -42,7 +42,7 @@ export default class DemoErrorBoundary extends React.Component {
         repo: 'material-ui',
         title,
         body: `
-<!-- Please make sure you have fullfilled the following items before submitting -->
+<!-- Please make sure you have fulfilled the following items before submitting -->
 <!-- Checked checkbox should look like this: [x] -->
 - [ ] I have [searched for similar issues](https://github.com/mui/material-ui/issues?q=${searchQuery}) in this repository and believe that this is not a duplicate.
 

docs/src/modules/components/MarkdownLinks.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Router from 'next/router';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
-export function shoudHandleLinkClick(event) {
+export function shouldHandleLinkClick(event) {
   if (
     event.defaultPrevented ||
     event.button !== 0 || // ignore everything but left-click
@@ -37,7 +37,7 @@ function handleClick(event) {
   }
 
   // Ignore click meant for native link handling, e.g. open in new tab
-  if (shoudHandleLinkClick(event)) {
+  if (shouldHandleLinkClick(event)) {
     return;
   }
 

docs/src/modules/sandbox/Dependencies.test.js

@@ -26,7 +26,7 @@ const styles = theme => ({
     display: 'flex',
     flexWrap: 'wrap',
   },
-  formContro
+  formControl
 `;
 
   it('should handle @ dependencies', () => {