From 83544dd3c09404797905dcbf86527b94d3169d35 Mon Sep 17 00:00:00 2001
From: Alexey Kozlenkov <8117458+alexey-kozlenkov@users.noreply.github.com>
Date: Sun, 30 Jun 2024 20:01:13 +0200
Subject: [PATCH] [material-ui][Alert] Add ability to override slot props
 (#42787)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/Alert/Alert.d.ts    | 15 +++++--
 .../alertCustomSlotProps.spec.tsx             | 44 +++++++++++++++++++
 .../alertCustomSlotProps.tsconfig.json        |  4 ++
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.spec.tsx
 create mode 100644 packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.tsconfig.json

diff --git a/packages/mui-material/src/Alert/Alert.d.ts b/packages/mui-material/src/Alert/Alert.d.ts
index a267dec3c89f9d..4922a12e29c3cb 100644
--- a/packages/mui-material/src/Alert/Alert.d.ts
+++ b/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
+    >;
   }
 >;
 
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.spec.tsx
new file mode 100644
index 00000000000000..e18c5f41e6944b
--- /dev/null
+++ b/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>;
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.tsconfig.json b/packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.tsconfig.json
new file mode 100644
index 00000000000000..0775c50197bb43
--- /dev/null
+++ b/packages/mui-material/test/typescript/moduleAugmentation/alertCustomSlotProps.tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig.json",
+  "files": ["alertCustomSlotProps.spec.tsx"]
+}