Adapt Alert styling (#2891)

Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky Smith <jamesricky@me.com>
vivid-planet · Dec 18, 2024 · b374300 · b374300
1 parent 4361ec6
commit b374300
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/.changeset/fifty-buses-hope.md b/.changeset/fifty-buses-hope.md
@@ -0,0 +1,21 @@
+---
+"@comet/admin": major
+---
+
+Adapt the styling of `Alert` to match the updated Comet design
+
+Remove styling for the `text` variant of buttons used in `Alert`.
+Use buttons with the `outlined` variant instead to adhere to the Comet design guidelines.
+
+```diff
+ <Alert
+     // ...
+     action={
+-        <Button variant="text" startIcon={<ArrowRight />}>
++        <Button variant="outlined" startIcon={<ArrowRight />}>
+             Action Text
+         </Button>
+     }
+     // ...
+ >
+```
diff --git a/packages/admin/admin/src/alert/Alert.tsx b/packages/admin/admin/src/alert/Alert.tsx
@@ -1,6 +1,6 @@
 import { Close } from "@comet/admin-icons";
 // eslint-disable-next-line no-restricted-imports
-import { Alert as MuiAlert, alertClasses, AlertTitle, buttonClasses, IconButton, Typography } from "@mui/material";
+import { Alert as MuiAlert, alertClasses, AlertTitle, IconButton, Typography } from "@mui/material";
 import { css, useThemeProps } from "@mui/material/styles";
 import { forwardRef, ReactNode } from "react";
 
@@ -86,11 +86,7 @@ const Root = createComponentSlot(MuiAlert)<AlertClassKey, OwnerState>({
         css`
             position: relative;
             align-items: flex-start;
-            padding: ${theme.spacing(4, 6, "8px", 3)};
-
-            & .${buttonClasses.text} {
-                margin-left: -15px;
-            }
+            padding: ${theme.spacing(4, 6, 4, 4)};
 
             & .${alertClasses.message} {
                 flex-direction: column;
@@ -102,7 +98,7 @@ const Root = createComponentSlot(MuiAlert)<AlertClassKey, OwnerState>({
         css`
             display: flex;
             align-items: center;
-            padding: ${theme.spacing(2, "12px", 2, 4)};
+            padding: ${theme.spacing(2, 4, 2, 4)};
         `}
     `,
 );
@@ -144,6 +140,11 @@ const CloseIcon = createComponentSlot(IconButton)<AlertClassKey, OwnerState>({
             right: 2px;
             top: 2px;
         `}
+
+        ${ownerState.renderAsSingleRow &&
+        css`
+            padding: 10px;
+        `}
     `,
 );
 

diff --git a/storybook/src/admin/alert/Alert.stories.tsx b/storybook/src/admin/alert/Alert.stories.tsx
@@ -20,7 +20,7 @@ export const Alerts = () => {
                             severity="info"
                             title="Title"
                             action={
-                                <Button variant="text" startIcon={<ArrowRight />}>
+                                <Button variant="outlined" startIcon={<ArrowRight />}>
                                     Action Text
                                 </Button>
                             }
@@ -34,7 +34,7 @@ export const Alerts = () => {
                             severity="warning"
                             title="Title"
                             action={
-                                <Button variant="text" startIcon={<ArrowRight />}>
+                                <Button variant="outlined" startIcon={<ArrowRight />}>
                                     Action Text
                                 </Button>
                             }
@@ -50,7 +50,7 @@ export const Alerts = () => {
                             severity="error"
                             title="Title"
                             action={
-                                <Button variant="text" startIcon={<ArrowRight />}>
+                                <Button variant="outlined" startIcon={<ArrowRight />}>
                                     Action Text
                                 </Button>
                             }
@@ -105,7 +105,7 @@ export const Alerts = () => {
                         <Alert
                             severity="success"
                             action={
-                                <Button variant="text" startIcon={<ArrowRight />}>
+                                <Button variant="outlined" startIcon={<ArrowRight />}>
                                     Action Text
                                 </Button>
                             }
@@ -132,7 +132,7 @@ export const Alerts = () => {
                         <Alert
                             severity="warning"
                             action={
-                                <Button variant="text" startIcon={<ArrowRight />}>
+                                <Button variant="outlined" startIcon={<ArrowRight />}>
                                     Action Text
                                 </Button>
                             }