COM-355: Rework Alert component

.changeset/soft-hotels-rhyme.md

@@ -0,0 +1,10 @@
+---
+"@comet/admin-theme": minor
+"@comet/admin": minor
+---
+
+Rework `Alert` component
+
+-   Use theme wherever possible
+-   Move styles where they're more fitting
+-   Fix some paddings

packages/admin/admin-theme/src/componentsTheme/MuiAlert.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palette }) => ({
+export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palette, spacing, shadows }) => ({
     ...component,
     defaultProps: {
         variant: "outlined",
@@ -20,26 +20,30 @@ export const getMuiAlert: GetMuiComponentTheme<"MuiAlert"> = (component, { palet
     styleOverrides: mergeOverrideStyles<"MuiAlert">(component?.styleOverrides, {
         root: {},
         outlined: {
-            borderLeftWidth: 5,
-            backgroundColor: "#fff",
-            borderRadius: 4,
+            backgroundColor: palette.background.paper,
             color: palette.grey[800],
+            borderRadius: spacing(1),
+            borderLeftWidth: spacing(1),
+            boxShadow: shadows[2],
         },
         outlinedSuccess: {
-            borderColor: "#14CC33",
+            borderColor: palette.success.main,
         },
         outlinedInfo: {
-            borderColor: "#29B6F6",
+            borderColor: palette.info.main,
         },
         outlinedWarning: {
-            borderColor: "#FFB31A",
+            borderColor: palette.warning.main,
         },
         outlinedError: {
-            borderColor: "#D11700",
+            borderColor: palette.error.main,
         },
         icon: {
             marginRight: 0,
-            padding: 0,
+            padding: spacing("2px", 0),
+        },
+        message: {
+            padding: spacing(0, 0, 0, 2),
         },
     }),
 });

packages/admin/admin-theme/src/componentsTheme/MuiAlertTitle.tsx

@@ -0,0 +1,12 @@
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiAlertTitle: GetMuiComponentTheme<"MuiAlertTitle"> = (component, { spacing }) => ({
+    ...component,
+    styleOverrides: mergeOverrideStyles<"MuiAlertTitle">(component?.styleOverrides, {
+        root: {
+            marginBottom: spacing(1),
+            fontWeight: 600,
+        },
+    }),
+});

packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts

@@ -7,6 +7,7 @@ import { Spacing } from "@mui/system";
 
 import { getMuiAccordion } from "./MuiAccordion";
 import { getMuiAlert } from "./MuiAlert";
+import { getMuiAlertTitle } from "./MuiAlertTitle";
 import { getMuiAppBar } from "./MuiAppBar";
 import { getMuiAutocomplete } from "./MuiAutocomplete";
 import { getMuiButton } from "./MuiButton";
@@ -63,6 +64,8 @@ export type GetMuiComponentTheme<ClassesName extends keyof ComponentNameToClassK
 export const getComponentsTheme = (components: Components, themeData: ThemeData): ThemeOptions["components"] => ({
     ...components,
     MuiAccordion: getMuiAccordion(components.MuiAccordion, themeData),
+    MuiAlert: getMuiAlert(components.MuiAlert, themeData),
+    MuiAlertTitle: getMuiAlertTitle(components.MuiAlertTitle, themeData),
     MuiAppBar: getMuiAppBar(components.MuiAppBar, themeData),
     MuiAutocomplete: getMuiAutocomplete(components.MuiAutocomplete, themeData),
     MuiButton: getMuiButton(components.MuiButton, themeData),
@@ -78,20 +81,20 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiDialogTitle: getMuiDialogTitle(components.MuiDialogTitle, themeData),
     MuiDrawer: getMuiDrawer(components.MuiDrawer, themeData),
     MuiFormControlLabel: getMuiFormControlLabel(components.MuiFormControlLabel, themeData),
-    MuiFormLabel: getMuiFormLabel(components.MuiFormLabel, themeData),
     MuiFormHelperText: getMuiFormHelperText(components.MuiFormHelperText, themeData),
+    MuiFormLabel: getMuiFormLabel(components.MuiFormLabel, themeData),
     MuiIconButton: getMuiIconButton(components.MuiIconButton, themeData),
+    MuiInput: getMuiInput(components.MuiInput, themeData),
     MuiInputAdornment: getMuiInputAdornment(components.MuiInputAdornment, themeData),
     MuiInputBase: getMuiInputBase(components.MuiInputBase, themeData),
-    MuiInput: getMuiInput(components.MuiInput, themeData),
     MuiLinearProgress: getMuiLinearProgress(components.MuiLinearProgress, themeData),
     MuiLink: getMuiLink(components.MuiLink, themeData),
     MuiListItem: getMuiListItem(components.MuiListItem, themeData),
+    MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
     MuiPaper: getMuiPaper(components.MuiPaper, themeData),
     MuiPopover: getMuiPopover(components.MuiPopover, themeData),
     MuiRadio: getMuiRadio(components.MuiRadio, themeData),
     MuiSelect: getMuiSelect(components.MuiSelect, themeData),
-    MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
     MuiSvgIcon: getMuiSvgIcon(components.MuiSvgIcon, themeData),
     MuiSwitch: getMuiSwitch(components.MuiSwitch, themeData),
     MuiTab: getMuiTab(components.MuiTab, themeData),
@@ -102,5 +105,4 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiToggleButtonGroup: getMuiToggleButtonGroup(components.MuiToggleButtonGroup, themeData),
     MuiTooltip: getMuiTooltip(components.MuiTooltip, themeData),
     MuiTypography: getMuiTypography(components.MuiTypography, themeData),
-    MuiAlert: getMuiAlert(components.MuiAlert, themeData),
 });

packages/admin/admin/src/alert/Alert.tsx

@@ -13,40 +13,28 @@ export interface AlertProps {
     action?: React.ReactNode;
 }
 
-export type AlertClassKey = "root" | "message" | "title" | "text" | "action" | "closeIcon" | "hasTitle";
+export type AlertClassKey = "root" | "message" | "title" | "text" | "action" | "closeIcon" | "hasTitle" | "singleLine";
 
 const styles = (theme: Theme) =>
     createStyles<AlertClassKey, AlertProps>({
         root: {
-            display: "flex",
-            alignItems: "center",
-            backgroundColor: theme.palette.background.paper,
-            borderRadius: 4,
-            boxShadow: theme.shadows[2],
-            position: "relative",
-            padding: theme.spacing(2, "12px", 2, 4),
-            minHeight: 40, // to ensure consistent height for the content, regardless of the presence of a button or close icon, in order to set the outer padding correctly
+            padding: theme.spacing(4, "12px", 4, 4),
         },
         message: {
             display: "flex",
             alignItems: "center",
             flexGrow: 1,
-            padding: 0,
-            paddingLeft: theme.spacing(2),
-            marginBottom: 0,
-        },
-        title: {
-            fontWeight: 600,
-            marginBottom: theme.spacing(1),
         },
+        title: {},
         text: {
             flexGrow: 1,
-            marginRight: theme.spacing(4),
         },
         action: {},
         closeIcon: {},
         hasTitle: {
+            position: "relative",
             alignItems: "flex-start",
+            padding: theme.spacing(4, 6, "8px", 3),
 
             [`& .${buttonClasses.text}`]: {
                 marginLeft: -15,
@@ -58,27 +46,29 @@ const styles = (theme: Theme) =>
 
             "& $closeIcon": {
                 position: "absolute",
-                right: 10,
-                top: 10,
+                right: 2,
+                top: 2,
             },
             "& $message": {
                 flexDirection: "column",
                 alignItems: "flex-start",
             },
-            "&$root": {
-                paddingBottom: "6px",
-                paddingTop: theme.spacing(4),
-            },
+        },
+        singleLine: {
+            display: "flex",
+            alignItems: "center",
+            padding: theme.spacing(2, "12px", 2, 4),
         },
     });
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps & WithStyles<typeof styles>>(
     ({ severity = "info", title, children, classes, onClose, action }, ref) => {
+        const singleLine = !title && (action || onClose);
         return (
             <MuiAlert
                 ref={ref}
                 classes={{
-                    root: clsx(classes.root, Boolean(title) && classes.hasTitle),
+                    root: clsx(classes.root, Boolean(title) && classes.hasTitle, singleLine && classes.singleLine),
                     message: classes.message,
                 }}
                 severity={severity}
@@ -87,7 +77,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps & WithStyles<typeof st
                 <Typography className={classes.text} variant="body2">
                     {children}
                 </Typography>
-                <div className={classes.action}>{action}</div>
+                {action && <div className={classes.action}>{action}</div>}
                 {onClose && (
                     <IconButton className={classes.closeIcon} onClick={onClose}>
                         <Close />

packages/admin/cms-admin/src/pages/useSaveConflict.tsx

@@ -1,7 +1,5 @@
-import { useSnackbarApi } from "@comet/admin";
-// TODO Our Alert currently can't be used inside a Snackbar
-// eslint-disable-next-line no-restricted-imports
-import { Alert, Snackbar } from "@mui/material";
+import { Alert, useSnackbarApi } from "@comet/admin";
+import { Snackbar } from "@mui/material";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";