From 7599202357cc81da7cec0418f25a8cb34b13abf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com>
Date: Fri, 29 Nov 2024 17:39:35 +0100
Subject: [PATCH] Fix types of custom CSS props (#49584)

---
 web/packages/design/src/Dialog/Dialog.tsx             |  8 +++++---
 .../src/DialogConfirmation/DialogConfirmation.tsx     |  4 ++--
 web/packages/design/src/Modal/Modal.tsx               | 11 ++++-------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/packages/design/src/Dialog/Dialog.tsx b/web/packages/design/src/Dialog/Dialog.tsx
index 5a015aa3f363c..9cdd9ff1d4a5f 100644
--- a/web/packages/design/src/Dialog/Dialog.tsx
+++ b/web/packages/design/src/Dialog/Dialog.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { forwardRef, PropsWithChildren } from 'react';
+import { ComponentProps, forwardRef, PropsWithChildren } from 'react';
 import styled, { StyleFunction } from 'styled-components';
 
 import Modal, { ModalProps } from './../Modal';
@@ -30,7 +30,7 @@ export const Dialog = forwardRef<
   PropsWithChildren<
     {
       className?: string;
-      dialogCss?: StyleFunction<any>;
+      dialogCss?: StyleFunction<ComponentProps<'div'>>;
     } & ModalPropsWithoutChildren
   >
 >((props, ref) => {
@@ -68,7 +68,9 @@ const ModalBox = styled.div`
   transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 `;
 
-const DialogBox = styled.div<{ dialogCss: StyleFunction<any> | undefined }>`
+const DialogBox = styled.div<{
+  dialogCss: StyleFunction<ComponentProps<'div'>> | undefined;
+}>`
   padding: 32px;
   padding-top: 24px;
   background: ${props => props.theme.colors.levels.surface};
diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
index 80b0c33ead6d7..dec91a4e2ee10 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { StyleFunction } from 'styled-components';
 
 import Dialog from 'design/Dialog';
@@ -35,7 +35,7 @@ export function DialogConfirmation(props: {
     event: KeyboardEvent | React.MouseEvent,
     reason: 'escapeKeyDown' | 'backdropClick'
   ) => void;
-  dialogCss?: StyleFunction<any>;
+  dialogCss?: StyleFunction<ComponentProps<'div'>>;
 }) {
   return (
     <Dialog
diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index 99eaf6f2b286d..c88cb359ec990 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { createRef, cloneElement } from 'react';
+import React, { createRef, cloneElement, ComponentProps } from 'react';
 import styled, { StyleFunction } from 'styled-components';
 import { createPortal } from 'react-dom';
 
@@ -36,9 +36,7 @@ export type ModalProps = {
   /**
    * Styles passed to the modal, the parent of the children.
    */
-  // TODO(ravicious): The type for modalCss might need some work after we migrate the components
-  // that use <Modal> to TypeScript.
-  modalCss?: StyleFunction<any>;
+  modalCss?: StyleFunction<ComponentProps<'div'>>;
 
   /**
    * The child must be a single HTML element. Modal used to call methods such as focus and
@@ -96,7 +94,7 @@ export type ModalProps = {
 
 export default class Modal extends React.Component<ModalProps> {
   lastFocus: HTMLElement | undefined;
-  modalRef = createRef<HTMLElement>();
+  modalRef = createRef<HTMLDivElement>();
   mounted = false;
 
   componentDidMount() {
@@ -272,8 +270,7 @@ const StyledBackdrop = styled.div<BackdropProps>`
 `;
 
 const StyledModal = styled.div<{
-  modalCss?: StyleFunction<any>;
-  ref: React.RefObject<HTMLElement>;
+  modalCss?: StyleFunction<ComponentProps<'div'>>;
   hiddenInDom?: boolean;
 }>`
   position: fixed;