fix: Vertically center Banner text content when action or close button is present (#1029)

fix: Vertically center Banner text content when action or close button is present

Author: engfragui

src/banner/banner.module.css

@@ -59,17 +59,15 @@
 }
 
 .image img,
-.icon svg {
+.typeIcon svg {
     display: block;
 }
 
-/* The close button is invisible in this resolution, so we're hiding the container to prevent flex-gap from making extra space */
-.icon:empty,
-.icon:has(.closeButton:only-child) {
+.typeIcon:empty {
     display: none;
 }
 
-.icon .closeButton {
+.iconCopy .closeButton {
     display: none;
 }
 
@@ -88,24 +86,20 @@
     .content {
         flex-direction: column;
     }
-    .icon {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
     .topContent {
         flex-direction: column;
         align-items: stretch;
     }
-    .icon:has(.closeButton:only-child) {
-        display: flex;
+    .iconCopy {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
     }
-    .icon .closeButton {
-        display: flex;
+    .iconCopy:has(.typeIcon:empty) {
+        justify-content: flex-end;
     }
-    .icon .closeButton:only-child {
-        margin-left: auto;
+    .iconCopy .closeButton {
+        display: flex;
     }
     .actions {
         align-self: flex-start;

src/banner/banner.tsx

@@ -156,48 +156,62 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
             {image ? <Box className={styles.image}>{image}</Box> : null}
 
             <Box className={styles.content} display="flex" gap="small">
-                <Box className={styles.icon}>
-                    {type === 'neutral' ? icon : <BannerIcon type={type} />}
-                    {closeButton}
-                </Box>
-
                 <Box display="flex" flexDirection="column" gap="small" flexGrow={1}>
                     <Box
                         className={styles.topContent}
                         display="flex"
                         gap="small"
-                        alignItems="flexStart"
+                        alignItems="center"
                     >
                         <Box
-                            className={styles.copy}
+                            className={styles.iconCopy}
                             display="flex"
-                            flexDirection="column"
+                            gap="small"
+                            alignItems="flexStart"
                             flexGrow={1}
                         >
-                            {title ? (
-                                <Box id={titleId} className={styles.title}>
-                                    {title}
-                                </Box>
-                            ) : null}
+                            <Box className={styles.typeIcon}>
+                                {type === 'neutral' ? icon : <BannerIcon type={type} />}
+                            </Box>
                             <Box
-                                id={descriptionId}
-                                className={[styles.description, title ? styles.secondary : null]}
+                                className={styles.copy}
+                                display="flex"
+                                flexDirection="column"
+                                flexGrow={1}
                             >
-                                {description}
-                                {inlineLinks?.map(({ label, ...props }, index) => {
-                                    return (
-                                        <React.Fragment key={index}>
-                                            <TextLink
-                                                {...props}
-                                                exceptionallySetClassName={styles.inlineLink}
-                                            >
-                                                {label}
-                                            </TextLink>
-                                            {index < inlineLinks.length - 1 ? <span> · </span> : ''}
-                                        </React.Fragment>
-                                    )
-                                })}
+                                {title ? (
+                                    <Box id={titleId} className={styles.title}>
+                                        {title}
+                                    </Box>
+                                ) : null}
+                                <Box
+                                    id={descriptionId}
+                                    className={[
+                                        styles.description,
+                                        title ? styles.secondary : null,
+                                    ]}
+                                >
+                                    {description}
+                                    {inlineLinks?.map(({ label, ...props }, index) => {
+                                        return (
+                                            <React.Fragment key={index}>
+                                                <TextLink
+                                                    {...props}
+                                                    exceptionallySetClassName={styles.inlineLink}
+                                                >
+                                                    {label}
+                                                </TextLink>
+                                                {index < inlineLinks.length - 1 ? (
+                                                    <span> · </span>
+                                                ) : (
+                                                    ''
+                                                )}
+                                            </React.Fragment>
+                                        )
+                                    })}
+                                </Box>
                             </Box>
+                            {closeButton}
                         </Box>
 
                         {action || closeButton ? (