From f4dbc3cd75791f1b6023b1127feb4fa5c26f439d Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Fri, 12 Aug 2022 09:07:02 +0300
Subject: [PATCH] [@mantine/core] Alert: Allow usage of close button when title
 is not set (#1348)

---
 src/mantine-core/src/Alert/Alert.story.tsx |  8 +++++++-
 src/mantine-core/src/Alert/Alert.styles.ts |  8 +++++++-
 src/mantine-core/src/Alert/Alert.tsx       | 24 +++++++++++-----------
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/mantine-core/src/Alert/Alert.story.tsx b/src/mantine-core/src/Alert/Alert.story.tsx
index 2a4ada8a736..b6061ee3920 100644
--- a/src/mantine-core/src/Alert/Alert.story.tsx
+++ b/src/mantine-core/src/Alert/Alert.story.tsx
@@ -14,7 +14,13 @@ export function Variants() {
         Something terrible happened! You made a mistake and there is no going back, your data was
         lost forever!
       </Alert>
-      <Alert withCloseButton title="Bummer!" color="red" variant="outline" mt="xl">
+      <Alert
+        withCloseButton
+        title="Something terrible happened! You made a mistake and there is no going back, your data was lost forever!"
+        color="red"
+        variant="outline"
+        mt="xl"
+      >
         Something terrible happened! You made a mistake and there is no going back, your data was
         lost forever!
       </Alert>
diff --git a/src/mantine-core/src/Alert/Alert.styles.ts b/src/mantine-core/src/Alert/Alert.styles.ts
index 62594e61d6c..cf49320c5e1 100644
--- a/src/mantine-core/src/Alert/Alert.styles.ts
+++ b/src/mantine-core/src/Alert/Alert.styles.ts
@@ -75,6 +75,10 @@ export default createStyles((theme, { color, radius, variant }: AlertStylesParam
     lineHeight: theme.lineHeight,
     fontSize: theme.fontSizes.sm,
     fontWeight: 700,
+
+    '&[data-with-close-button]': {
+      paddingRight: theme.spacing.md,
+    },
   },
 
   label: {
@@ -111,7 +115,9 @@ export default createStyles((theme, { color, radius, variant }: AlertStylesParam
   },
 
   closeButton: {
-    marginTop: 2,
+    position: 'absolute',
+    top: theme.spacing.sm,
+    right: theme.spacing.sm,
     color: 'inherit',
   },
 }));
diff --git a/src/mantine-core/src/Alert/Alert.tsx b/src/mantine-core/src/Alert/Alert.tsx
index 0baf43e8a92..2ac7ad62282 100644
--- a/src/mantine-core/src/Alert/Alert.tsx
+++ b/src/mantine-core/src/Alert/Alert.tsx
@@ -92,24 +92,24 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props: AlertProps,
 
         <div className={classes.body}>
           {title && (
-            <div className={classes.title}>
+            <div className={classes.title} data-with-close-button={withCloseButton || undefined}>
               <span id={titleId} className={classes.label}>
                 {title}
               </span>
-
-              {withCloseButton && (
-                <CloseButton
-                  className={classes.closeButton}
-                  onClick={onClose}
-                  variant="transparent"
-                  size={16}
-                  iconSize={16}
-                  aria-label={closeButtonLabel}
-                />
-              )}
             </div>
           )}
 
+          {withCloseButton && (
+            <CloseButton
+              className={classes.closeButton}
+              onClick={onClose}
+              variant="transparent"
+              size={16}
+              iconSize={16}
+              aria-label={closeButtonLabel}
+            />
+          )}
+
           <div id={bodyId} className={classes.message}>
             {children}
           </div>