[docs] Fix e.g. typo (mui#38748)

CHANGELOG.md

@@ -10720,7 +10720,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som
 - [Avatar] Fix usage of srcset property (#23286) @matheuspiment
 - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23315) @eps1lon
 - [core] Allow React 17 (#23311) @eps1lon
-- [Icon] Fix translation, e.g Google Translate (#23237) @cbeltrangomez84
+- [Icon] Fix translation, e.g. Google Translate (#23237) @cbeltrangomez84
 - [LinearProgress] Fix Safari's bug during composition of different paint (#23293) @montogeek
 - [Radio] Fix dot misalignment in Safari (#23239) @anasufana
 - [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon

CHANGELOG.old.md

@@ -5540,7 +5540,7 @@ you to add them up quickly in your head without having to worry about decimals.
 
 - [docs] Fix search suggestions on dark mode (#13874) @rfbotto
 - [docs] Add accessibility section to selection-controls with demo (#13896) @wyseguyonline
-- [docs] Add support for multiple demo variants e.g JS or Hooks (#13873) @adeelibr
+- [docs] Add support for multiple demo variants e.g. JS or Hooks (#13873) @adeelibr
 - [docs] Remove the withRoot HOC (#13909) @oliviertassinari
 - [docs] Add material-ui-pickers in pickers page (#13697) @dmtrKovalenko
 - [docs] Continue #13806 and port back some fix from @system (#13917) @oliviertassinari

docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js

@@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() {
           }}
           options={top100Films}
           getOptionLabel={(option) => {
-            // e.g value selected with enter, right from the input
+            // e.g. value selected with enter, right from the input
             if (typeof option === 'string') {
               return option;
             }

docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx

@@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() {
           }}
           options={top100Films}
           getOptionLabel={(option) => {
-            // e.g value selected with enter, right from the input
+            // e.g. value selected with enter, right from the input
             if (typeof option === 'string') {
               return option;
             }

docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js

@@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() {
         id="free-solo-dialog-demo"
         options={top100Films}
         getOptionLabel={(option) => {
-          // e.g value selected with enter, right from the input
+          // e.g. value selected with enter, right from the input
           if (typeof option === 'string') {
             return option;
           }

docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx

@@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() {
         id="free-solo-dialog-demo"
         options={top100Films}
         getOptionLabel={(option) => {
-          // e.g value selected with enter, right from the input
+          // e.g. value selected with enter, right from the input
           if (typeof option === 'string') {
             return option;
           }

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md

@@ -206,7 +206,7 @@ Finalmente, você pode converter sua base de código existente com esse [codemod
 
 The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/).
 
-⚠️ Para minimizar a duplicação de código nos pacotes de usuários, autores de biblioteca são **fortemente desencorajados** a importar de qualquer um dos outros pacotes. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+⚠️ Para minimizar a duplicação de código nos pacotes de usuários, autores de biblioteca são **fortemente desencorajados** a importar de qualquer um dos outros pacotes. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md

@@ -206,7 +206,7 @@ module.exports = override(useBabelRc());
 
 The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/).
 
-⚠️ 为了尽量减少用户捆绑包中的重复代码，库作者 **非常不鼓励** 从任何其他捆绑包中导入。 Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+⚠️ 为了尽量减少用户捆绑包中的重复代码，库作者 **非常不鼓励** 从任何其他捆绑包中导入。 Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -213,7 +213,7 @@ The package published on npm is **transpiled**, with [Babel](https://github.com/
 
 ⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly.
 Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles.
-Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {

docs/pages/blog/callback-support-in-style-overrides.md

@@ -68,7 +68,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 The callback is type-safe.
 
-- `ownerState`: `ComponentProps` interface, eg. `ButtonProps`, `ChipProps`, etc.
+- `ownerState`: `ComponentProps` interface, e.g. `ButtonProps`, `ChipProps`, etc.
 - `theme`: `Theme` interface from `@mui/material/styles`.
 
 ```tsx

docs/src/modules/sandbox/Dependencies.ts

@@ -128,7 +128,7 @@ export default function SandboxDependencies(
         deps[name] = versions[name] ? versions[name] : 'latest';
       }
 
-      // e.g date-fns
+      // e.g. date-fns
       const dateAdapterMatch = fullName.match(
         /^@mui\/(lab|x-date-pickers)\/(?<adapterName>Adapter.*)/,
       ) as RegExpMatchArrayWithGroups<{ adapterName: string }>;

docs/translations/api-docs/circular-progress/circular-progress-pt.json

@@ -4,7 +4,7 @@
     "classes": "Sobrescreve ou extende os estilos aplicados para o componente. Veja a <a href=\"#css\">API CSS</a> abaixo para maiores detalhes.",
     "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "disableShrink": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>.",
-    "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g &#39;3rem&#39;.",
+    "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. &#39;3rem&#39;.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "thickness": "The thickness of the circle.",
     "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",

docs/translations/api-docs/circular-progress/circular-progress-zh.json

@@ -4,7 +4,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "disableShrink": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>.",
-    "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g &#39;3rem&#39;.",
+    "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. &#39;3rem&#39;.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "thickness": "The thickness of the circle.",
     "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",

docs/translations/api-docs/circular-progress/circular-progress.json

@@ -9,7 +9,7 @@
       "description": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>."
     },
     "size": {
-      "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g &#39;3rem&#39;."
+      "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. &#39;3rem&#39;."
     },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."

packages/mui-joy/src/Button/Button.tsx

@@ -132,8 +132,8 @@ export const getButtonStyles = ({
         paddingInline: '1.5rem',
       }),
       WebkitTapHighlightColor: 'transparent',
-      borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
-      margin: `var(--Button-margin)`, // to be controlled by other components, eg. Input
+      borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
+      margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input
       border: 'none',
       backgroundColor: 'transparent',
       cursor: 'pointer',

packages/mui-joy/src/Chip/Chip.tsx

@@ -184,7 +184,7 @@ const ChipStartDecorator = styled('span', {
   '--IconButton-margin': '0 0 0 calc(var(--Chip-decoratorChildOffset) * -1)',
   '--Icon-margin': '0 0 0 calc(var(--Chip-paddingInline) / -4)',
   display: 'inherit',
-  // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio
+  // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio
   order: 0,
   zIndex: 1,
   pointerEvents: 'none',
@@ -198,7 +198,7 @@ const ChipEndDecorator = styled('span', {
   '--IconButton-margin': '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 0',
   '--Icon-margin': '0 calc(var(--Chip-paddingInline) / -4) 0 0',
   display: 'inherit',
-  // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio
+  // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio
   order: 2,
   zIndex: 1,
   pointerEvents: 'none',
@@ -313,7 +313,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
         <SlotRoot {...rootProps}>
           {clickable && <SlotAction {...actionProps} />}
 
-          {/* label is always the first element for integrating with other controls, eg. Checkbox, Radio. Use CSS order to rearrange position */}
+          {/* label is always the first element for integrating with other controls, e.g. Checkbox, Radio. Use CSS order to rearrange position */}
           <SlotLabel {...labelProps} id={id}>
             {children}
           </SlotLabel>

packages/mui-joy/src/IconButton/IconButton.tsx

@@ -76,8 +76,8 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
       paddingBlock: 0,
       fontFamily: theme.vars.fontFamily.body,
       fontWeight: theme.vars.fontWeight.md,
-      margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input
-      borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
+      margin: `var(--IconButton-margin)`, // to be controlled by other components, e.g. Input
+      borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
       border: 'none',
       boxSizing: 'border-box',
       backgroundColor: 'transparent',

packages/mui-joy/src/ListItem/ListItem.tsx

@@ -64,7 +64,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>(
       } as const),
     // Base styles
     {
-      // Integration with control elements, eg. Checkbox, Radio.
+      // Integration with control elements, e.g. Checkbox, Radio.
       '--unstable_actionRadius': 'calc(var(--ListItem-radius) - var(--variant-borderWidth, 0px))',
       ...(ownerState.startAction && {
         '--unstable_startActionWidth': '2rem', // to add sufficient padding-left on ListItemButton

packages/mui-joy/src/styles/styleUtils.ts

@@ -4,7 +4,7 @@ import { Theme, SxProps } from './types';
  * internal utility
  *
  * Why? to read `sx` values and attach component's CSS variables
- *      eg. <Card sx={{ borderRadius: 0 }} /> should attach
+ *      e.g. <Card sx={{ borderRadius: 0 }} /> should attach
  *          `--Card-radius: 0px` so that developers don't have to remember
  *
  * Why not reuse `styleFunctionSx`?

packages/mui-material/src/CircularProgress/CircularProgress.d.ts

@@ -31,7 +31,7 @@ export interface CircularProgressProps
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g '3rem'.
+   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
    * @default 40
    */
   size?: number | string;

packages/mui-material/src/CircularProgress/CircularProgress.js

@@ -238,7 +238,7 @@ CircularProgress.propTypes /* remove-proptypes */ = {
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g '3rem'.
+   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
    * @default 40
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

packages/typescript-to-proptypes/src/injector.ts

@@ -387,7 +387,7 @@ function plugin(
           if (babelTypes.isArrowFunctionExpression(arg) || babelTypes.isFunctionExpression(arg)) {
             getFromProp(arg.params[0]);
           } else if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) {
-            // Any components that are created by a factory function, eg. System Box | Container | Grid.
+            // Any components that are created by a factory function, e.g. System Box | Container | Grid.
             getFromProp(node);
           }
         }

packages/zero-tag-processor/src/utils/sxObjectExtractor.ts

@@ -128,7 +128,7 @@ export function sxObjectExtractor(nodePath: NodePath<ObjectExpression | ArrowFun
     const body = nodePath.get('body');
     if (!body.isObjectExpression()) {
       throw body.buildCodeFrameError(
-        "sx prop only supports arrow functions that directly return an object, eg. () => ({color: 'red'}). You can accept theme object in the params if required.",
+        "sx prop only supports arrow functions that directly return an object, e.g. () => ({color: 'red'}). You can accept theme object in the params if required.",
       );
     }
     traverseObjectExpression(body, nodePath);

scripts/generateProptypes.ts

@@ -177,7 +177,7 @@ async function generateProptypes(
     return;
   }
 
-  // exclude internal slot components, eg. ButtonRoot
+  // exclude internal slot components, e.g. ButtonRoot
   proptypes.body = proptypes.body.filter((data) => {
     if (data.propsFilename?.endsWith('.tsx')) {
       // only check for .tsx

test/README.md

@@ -248,7 +248,7 @@ Possible values for `version`:
 
 - default: `stable` (minimum supported React version)
 - a tag on npm e.g. `next`, `experimental` or `latest`
-- an older version e.g `^17.0.0`
+- an older version e.g. `^17.0.0`
 
 #### CI
 

test/utils/initMatchers.ts

@@ -163,7 +163,7 @@ chai.use((chaiAPI, utils) => {
     // `CSSStyleDeclaration` is not constructable
     // https://stackoverflow.com/a/52732909/3406963
     // this is not equivalent to the declaration from `getComputedStyle`
-    // e.g `getComputedStyle` would return a readonly declaration
+    // e.g. `getComputedStyle` would return a readonly declaration
     // let's hope this doesn't get passed around until it's no longer clear where it comes from
     const declaration = document.createElement('span').style;