[Tooltip] Fix type of sx prop in slotProps (#37550)

Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Jun 15, 2023 · ab6dd2f · ab6dd2f
1 parent 149f0aa
commit ab6dd2f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -261,7 +261,7 @@ jobs:
           name: Tests TypeScript definitions
           command: yarn typescript:ci
       - run:
-          name: Test module augmenation
+          name: Test module augmentation
           command: |
             yarn workspace @mui/material typescript:module-augmentation
             yarn workspace @mui/base typescript:module-augmentation

diff --git a/packages/mui-material/src/Tooltip/Tooltip.d.ts b/packages/mui-material/src/Tooltip/Tooltip.d.ts
@@ -173,10 +173,10 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
     popper?: Partial<PopperProps> & TooltipComponentsPropsOverrides;
     transition?: TransitionProps & TooltipComponentsPropsOverrides;
     tooltip?: React.HTMLProps<HTMLDivElement> &
-      MUIStyledCommonProps &
+      MUIStyledCommonProps<Theme> &
       TooltipComponentsPropsOverrides;
     arrow?: React.HTMLProps<HTMLSpanElement> &
-      MUIStyledCommonProps &
+      MUIStyledCommonProps<Theme> &
       TooltipComponentsPropsOverrides;
   };
   /**

diff --git a/packages/mui-material/test/typescript/moduleAugmentation/TooltipSlotSxProps.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/TooltipSlotSxProps.spec.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { PaletteColor } from '@mui/material/styles';
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: PaletteColor;
+  }
+}
+
+// Tooltip slotProps should only allow valid theme palettes to be accessed
+
+<Tooltip
+  title="tooltip"
+  slotProps={{
+    tooltip: {
+      sx: {
+        color: (theme) => theme.palette.custom.main,
+        // @ts-expect-error Property 'invalid' does not exist on 'Palette'
+        backgroundColor: (theme) => theme.palette.invalid.main,
+      },
+    },
+    arrow: {
+      sx: {
+        color: (theme) => theme.palette.custom.main,
+        // @ts-expect-error Property 'invalid' does not exist on 'Palette'
+        backgroundColor: (theme) => theme.palette.invalid.main,
+      },
+    },
+  }}
+>
+  <Button>Hover Me!</Button>
+</Tooltip>;
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/TooltipSlotSxProps.tsconfig.json b/packages/mui-material/test/typescript/moduleAugmentation/TooltipSlotSxProps.tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["TooltipSlotSxProps.spec.tsx"]
+}