[@mantine/core] Alert: Allow usage of close button when title is not …

…set (#1348)
mantinedev · Aug 12, 2022 · f4dbc3c · f4dbc3c
1 parent e3e5e1f
commit f4dbc3c
Show file tree

Hide file tree

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