Fix types of custom CSS props (#49584)

gravitational · Nov 29, 2024 · 7599202 · 7599202
1 parent 6087275
commit 7599202
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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;