feat(alert): the title prop is now optional

src/components/Modal/Modal.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { animated, useTransition } from 'react-spring';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
+import { useId } from '@reach/auto-id';
 import Box from '../Box';
 import Card from '../Card';
 import Heading from '../Heading';
 import Flex from '../Flex';
-import { slugify } from '../../utils/helpers';
 import IconButton from '../IconButton';
 
 const AnimatedDialogOverlay = animated(DialogOverlay);
@@ -19,7 +19,7 @@ export interface ModalProps {
   onClose: () => void;
 
   /**  The title to add to the modal  */
-  title?: string;
+  title?: string | React.ReactElement;
 
   /** Whether to render a close button or not */
   showCloseButton?: boolean;
@@ -46,6 +46,7 @@ const Modal: React.FC<ModalProps> = ({
     leave: { transform: 'translate3d(0, 25px, 0)', opacity: 0, pointerEvents: 'none' },
   });
 
+  const id = useId();
   return (
     <React.Fragment>
       {transitions.map(
@@ -60,15 +61,15 @@ const Modal: React.FC<ModalProps> = ({
             >
               <Flex justify="center" align="center" height="100%">
                 <AnimatedDialogContent
-                  aria-labelledby={title ? slugify(title) : undefined}
+                  aria-labelledby={id}
                   style={{ outline: 'none', ...styles }}
                   as={'div'}
                   {...rest}
                 >
                   <Card minWidth="400px" position="relative" boxShadow="dark200">
                     {title && (
                       <Box as="header" borderBottom="1px solid" borderColor="navyblue-300" py={6}>
-                        <Heading as="h4" size="x-small" textAlign="center" id={slugify(title)}>
+                        <Heading as="h4" size="x-small" textAlign="center" id={id}>
                           {title}
                         </Heading>
                       </Box>

src/components/utils/ControlledAlert/ControlledAlert.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
+import { useId } from '@reach/auto-id';
 import Box from '../../Box';
 import Flex from '../../Flex';
 import IconButton from '../../IconButton';
 import Icon from '../../Icon';
-import { slugify } from '../../../utils/helpers';
 import useAlertStyles from './useAlertStyles';
 
 export interface ControlledAlertProps {
   /** The main text of the the alert */
-  title: string;
+  title?: string;
 
   /** Whether the alert is visible */
   open: boolean;
@@ -45,7 +45,7 @@ const ControlledAlert = React.forwardRef<HTMLDivElement, ControlledAlertProps>(
     ref
   ) {
     const { backgroundColor, icon } = useAlertStyles({ variant });
-    const id = slugify(title);
+    const id = useId();
 
     if (!open) {
       return null;
@@ -62,25 +62,32 @@ const ControlledAlert = React.forwardRef<HTMLDivElement, ControlledAlertProps>(
         backgroundColor={backgroundColor}
         {...rest}
       >
-        <Flex as="header" align="center" fontSize="large">
-          <Icon type={icon} mr={2} size="large" />
-          <Box
-            as="h4"
-            fontWeight={description ? 'bold' : 'normal'}
-            flexGrow={1}
-            mr="auto"
-            id={`${id}-title`}
-          >
-            {title}
-          </Box>
-          {discardable && (
-            <Box my={-3} mr={-3} ml={3}>
-              <IconButton aria-label="Discard" variant="unstyled" icon="close" onClick={onClose} />
+        {title && (
+          <Flex as="header" align="center" fontSize="large">
+            <Icon type={icon} mr={2} size="large" />
+            <Box
+              as="h4"
+              fontWeight={description ? 'bold' : 'normal'}
+              flexGrow={1}
+              mr="auto"
+              id={`${id}-title`}
+            >
+              {title}
             </Box>
-          )}
-        </Flex>
+            {discardable && (
+              <Box my={-3} mr={-3} ml={3}>
+                <IconButton
+                  aria-label="Discard"
+                  variant="unstyled"
+                  icon="close"
+                  onClick={onClose}
+                />
+              </Box>
+            )}
+          </Flex>
+        )}
         {description && (
-          <Box as="p" fontStyle="italic" mt={3} fontSize="medium">
+          <Box as="p" fontStyle="italic" mt={title ? 3 : 0} fontSize="medium">
             {description}
           </Box>
         )}