Make props more explicit for Alert and ErrorAlert

Enterprise-CMCS · Jan 28, 2025 · c47446c · c47446c
1 parent 0d04dc9
commit c47446c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/services/ui-src/src/components/alerts/Alert.tsx b/services/ui-src/src/components/alerts/Alert.tsx
@@ -15,20 +15,20 @@ import { ReactNode } from "react";
 
 export const Alert = ({
   status = AlertTypes.INFO,
+  sx: sxOverride,
+  className,
+  showIcon = true,
+  icon,
   title,
   children,
   link,
-  showIcon = true,
-  icon,
-  ...props
 }: Props) => {
   return (
     <AlertRoot
       status={status}
       variant="left-accent"
-      sx={sx.root}
-      className={status}
-      {...props}
+      sx={sxOverride ?? sx.root}
+      className={className ?? status}
     >
       <Flex>
         {showIcon && (
@@ -56,13 +56,13 @@ export const Alert = ({
 
 interface Props {
   status?: AlertTypes;
-  title?: string;
-  link?: string;
+  sx?: CSSObject;
   showIcon?: boolean;
   icon?: string;
-  children?: ReactNode;
+  title?: string;
   className?: string;
-  sx?: CSSObject;
+  children?: ReactNode;
+  link?: string;
 }
 
 const sx = {

diff --git a/services/ui-src/src/components/alerts/ErrorAlert.tsx b/services/ui-src/src/components/alerts/ErrorAlert.tsx
@@ -1,4 +1,4 @@
-import { Box, Collapse } from "@chakra-ui/react";
+import { Box, Collapse, CSSObject } from "@chakra-ui/react";
 import { Alert } from "components";
 import { useRef } from "react";
 import { AlertTypes, ErrorVerbiage } from "types";
@@ -7,7 +7,7 @@ export const ErrorAlert = ({
   error,
   variant = "inline",
   sxOverride,
-  ...props
+  alertSxOverride,
 }: Props) => {
   // Focus the alert when an error is given
   const ref = useRef<HTMLDivElement>(null);
@@ -25,8 +25,7 @@ export const ErrorAlert = ({
             title={error.title}
             showIcon={false}
             className={variant}
-            sx={sx.root}
-            {...props}
+            sx={alertSxOverride ?? sx.root}
           >
             {error.children}
           </Alert>
@@ -39,8 +38,8 @@ export const ErrorAlert = ({
 interface Props {
   error?: ErrorVerbiage;
   variant?: "inline" | "toast";
-  sxOverride?: any;
-  [key: string]: any;
+  sxOverride?: CSSObject;
+  alertSxOverride?: CSSObject;
 }
 
 const sx = {

diff --git a/services/ui-src/src/components/banners/Banner.tsx b/services/ui-src/src/components/banners/Banner.tsx
@@ -1,12 +1,12 @@
 import { Alert } from "components";
 import { BannerData } from "types";
 
-export const Banner = ({ bannerData, ...props }: Props) => {
+export const Banner = ({ bannerData }: Props) => {
   if (bannerData) {
     const { title, description, link } = bannerData;
     return (
       bannerData && (
-        <Alert title={title} link={link} {...props}>
+        <Alert title={title} link={link}>
           {description}
         </Alert>
       )

diff --git a/services/ui-src/src/components/logins/LoginCognito.tsx b/services/ui-src/src/components/logins/LoginCognito.tsx
@@ -47,7 +47,7 @@ export const LoginCognito = () => {
       <Heading size="md" as="h2" sx={sx.heading}>
         Log In with Cognito
       </Heading>
-      <ErrorAlert error={error} sx={sx.error} />
+      <ErrorAlert error={error} alertSxOverride={sx.error} />
       <form onSubmit={(event) => handleLogin(event)}>
         <Box sx={sx.label}>
           <label>