[@mantine/core] Alert: Fix incorrect styles when the component is use…

…d without children (#5196)
mantinedev · Nov 7, 2023 · d9c9c94 · d9c9c94
1 parent 233f924
commit d9c9c94
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 10 deletions.
diff --git a/src/mantine-core/src/components/Alert/Alert.module.css b/src/mantine-core/src/components/Alert/Alert.module.css
@@ -25,14 +25,13 @@
 }
 
 .title {
-  margin-bottom: var(--mantine-spacing-xs);
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: var(--mantine-font-size-sm);
   font-weight: 700;
 
-  &[data-with-clos-button] {
+  &[data-with-close-button] {
     padding-right: var(--mantine-spacing-md);
 
     @mixin rtl {
@@ -69,6 +68,7 @@
   overflow: hidden;
   font-size: var(--mantine-font-size-sm);
   color: var(--_message-color, var(--__message-color));
+  margin-top: var(--mantine-spacing-xs);
 
   @mixin light {
     --__message-color: var(--mantine-color-black);

diff --git a/src/mantine-core/src/components/Alert/Alert.story.tsx b/src/mantine-core/src/components/Alert/Alert.story.tsx
@@ -44,6 +44,14 @@ export function Unstyled() {
   );
 }
 
+export function WithoutDescription() {
+  return (
+    <div style={{ maxWidth: 500, margin: 'auto', padding: 40 }}>
+      <Alert icon="$" title="Bummer!" color="red" variant="light" withCloseButton></Alert>
+    </div>
+  );
+}
+
 export function CSSVariables() {
   return (
     <MantineThemeProvider

diff --git a/src/mantine-core/src/components/Alert/Alert.tsx b/src/mantine-core/src/components/Alert/Alert.tsx
@@ -146,9 +146,11 @@ export const Alert = factory<AlertFactory>((_props, ref) => {
             </div>
           )}
 
-          <div id={bodyId} {...getStyles('message')}>
-            {children}
-          </div>
+          {children && (
+            <div id={bodyId} {...getStyles('message')}>
+              {children}
+            </div>
+          )}
         </div>
 
         {withCloseButton && (

diff --git a/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.usage.tsx b/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.usage.tsx
@@ -30,7 +30,6 @@ export const usage: MantineDemo = {
   component: Wrapper,
   code,
   centered: true,
-  striped: true,
   controls: [
     interactiveVariantsControl,
     { prop: 'color', type: 'color', initialValue: 'blue', libraryValue: 'blue' },

diff --git a/src/mantine-demos/src/demos/core/Alert/Alert.demo.configurator.tsx b/src/mantine-demos/src/demos/core/Alert/Alert.demo.configurator.tsx
@@ -27,7 +27,6 @@ export const configurator: MantineDemo = {
   component: Wrapper,
   code,
   centered: true,
-  striped: true,
   maxWidth: 400,
   controls: [
     { ...(staticVariantsControl as any), initialValue: 'light' },

diff --git a/src/mantine-demos/src/demos/core/Avatar/Avatar.demo.configurator.tsx b/src/mantine-demos/src/demos/core/Avatar/Avatar.demo.configurator.tsx
@@ -14,7 +14,6 @@ export const configurator: MantineDemo = {
   type: 'configurator',
   component: Avatar,
   centered: true,
-  striped: true,
   code,
   controls: [
     staticVariantsControl,

diff --git a/src/mantine-demos/src/demos/core/Button/Button.demo.configurator.tsx b/src/mantine-demos/src/demos/core/Button/Button.demo.configurator.tsx
@@ -20,7 +20,6 @@ export const configurator: MantineDemo = {
   component: Wrapper,
   code,
   centered: true,
-  striped: true,
   controls: [
     interactiveVariantsControl,
     { type: 'color', prop: 'color', initialValue: 'blue', libraryValue: 'blue' },

diff --git a/src/mantine-demos/src/demos/core/ThemeIcon/ThemeIcon.demo.usage.tsx b/src/mantine-demos/src/demos/core/ThemeIcon/ThemeIcon.demo.usage.tsx
@@ -31,7 +31,6 @@ export const usage: MantineDemo = {
   component: Wrapper,
   code,
   centered: true,
-  striped: true,
   controls: [
     {
       prop: 'variant',