[material-ui][Alert] Add ability to override slot props (#42787)

Co-authored-by: ZeeshanTamboli <[email protected]>

Author: 2 people

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

@@ -9,8 +9,9 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 export type AlertColor = 'success' | 'info' | 'warning' | 'error';
 
 export interface AlertPropsVariantOverrides {}
-
 export interface AlertPropsColorOverrides {}
+export interface AlertCloseButtonSlotPropsOverrides {}
+export interface AlertCloseIconSlotPropsOverrides {}
 
 export interface AlertSlots {
   /**
@@ -28,8 +29,16 @@ export interface AlertSlots {
 export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AlertSlots,
   {
-    closeButton: SlotProps<React.ElementType<IconButtonProps>, {}, AlertOwnerState>;
-    closeIcon: SlotProps<React.ElementType<SvgIconProps>, {}, AlertOwnerState>;
+    closeButton: SlotProps<
+      React.ElementType<IconButtonProps>,
+      AlertCloseButtonSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    closeIcon: SlotProps<
+      React.ElementType<SvgIconProps>,
+      AlertCloseIconSlotPropsOverrides,
+      AlertOwnerState
+    >;
   }
 >;
 

packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import { IconButton, IconButtonProps, svgIconClasses } from '@mui/material';
+
+declare module '@mui/material/Alert' {
+  interface AlertCloseButtonSlotPropsOverrides {
+    iconSize: 'small' | 'medium';
+  }
+}
+
+type MyIconButtonProps = IconButtonProps<
+  'button',
+  {
+    iconSize?: 'small' | 'medium';
+  }
+>;
+
+const MyIconButton = ({ iconSize, ...rest }: MyIconButtonProps) => {
+  return (
+    <IconButton
+      {...rest}
+      sx={{
+        // whatever customization based on iconSize
+        [`.${svgIconClasses.root}`]: {
+          fontSize: iconSize === 'small' ? '1rem' : '1.5rem',
+        },
+      }}
+    />
+  );
+};
+
+<Alert
+  severity="success"
+  slots={{
+    closeButton: MyIconButton,
+  }}
+  slotProps={{
+    closeButton: {
+      iconSize: 'medium',
+    },
+  }}
+>
+  Here is a gentle confirmation that your action was successful.
+</Alert>;

packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig.json",
+  "files": ["alertCustomSlotProps.spec.tsx"]
+}