[code-infra] Add alias for icon types (#41248)

Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>

.codesandbox/ci.json

@@ -9,6 +9,7 @@
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
+    "packages/mui-docs",
     "packages/mui-icons-material",
     "packages/mui-joy",
     "packages/mui-lab",
@@ -28,6 +29,7 @@
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
+    "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-markdown": "packages/markdown",

docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx

@@ -10,7 +10,7 @@ export default function TransitionComponentSnackbar() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx

@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx

@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx

@@ -18,7 +18,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/joy/integrations/icon-libraries/IconFontSizes.js

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview

@@ -1,3 +1,8 @@
-{Object.keys(theme.fontSize).map((size) => (
-  <Person key={size} fontSize={size} />
-))}
+<Person fontSize="xs" />
+<Person fontSize="sm" />
+<Person fontSize="md" />
+<Person fontSize="lg" />
+<Person fontSize="xl" />
+<Person fontSize="xl2" />
+<Person fontSize="xl3" />
+<Person fontSize="xl4" />

docs/pages/experiments/base/components-gallery.tsx

@@ -143,7 +143,7 @@ export default function ComponentsGallery() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
@@ -208,7 +208,7 @@ export default function ComponentsGallery() {
     setCopySnackbarOpen(true);
   }
 
-  const handleCopyClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleCopyClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/src/components/productBaseUI/BaseUIThemesDemo.tsx

@@ -785,7 +785,7 @@ export default function BaseUIThemesDemo() {
   // Snackbar
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
 
-  const handleCloseSnackbar = (_: any, reason: SnackbarCloseReason) => {
+  const handleCloseSnackbar = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/src/components/showcase/TaskCard.tsx

@@ -33,7 +33,7 @@ export default function TaskCard() {
           </Typography>
         </Box>
         <Box sx={{ my: 'auto' }}>
-          <CodeRounded color="white" />
+          <CodeRounded />
           <Typography fontSize={18} component="div" fontWeight="semiBold" sx={{ lineHeight: 1.4 }}>
             Customize every button and chip instance primary color
           </Typography>

docs/src/modules/brandingTheme.ts

@@ -65,6 +65,22 @@ declare module '@mui/material/Chip' {
   }
 }
 
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {

packages/mui-icons-material/src/icon.d.ts

@@ -0,0 +1 @@
+export { default } from '@mui/material/SvgIcon';

packages/mui-icons-material/tsconfig.json

@@ -1,10 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@mui/material": ["../mui-material/src"],
-      "@mui/material/*": ["../mui-material/src/*"]
-    }
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

packages/mui-material/src/Alert/Alert.spec.tsx

@@ -1,4 +1,4 @@
-import { CloseRounded } from '@mui/icons-material';
+import CloseRounded from '@mui/icons-material/CloseRounded';
 import { createTheme } from '@mui/material';
 
 createTheme({

tsconfig.json

@@ -43,8 +43,7 @@
       "@mui/material-nextjs/*": ["./packages/mui-material-nextjs/src/*"],
       "@mui/joy": ["./packages/mui-joy/src"],
       "@mui/joy/*": ["./packages/mui-joy/src/*"],
-      "@mui/icons-material": ["./packages/mui-icons-material/lib"],
-      "@mui/icons-material/*": ["./packages/mui-icons-material/lib/*"],
+      "@mui/icons-material/*": ["./packages/mui-icons-material/src/icon.d.ts"],
       "@pigment-css/nextjs-plugin": ["./packages/pigment-nextjs-plugin/src"],
       "@pigment-css/nextjs-plugin/*": ["./packages/pigment-nextjs-plugin/src/*"],
       "@pigment-css/react": ["./packages/pigment-react/src"],