[docs] Fix 100+ typos throughout the Material UI docs (mui#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', () => {