From 37885b87a321f6677514ec56b3f7da40d4b850d6 Mon Sep 17 00:00:00 2001 From: Edbury Enegren Date: Thu, 8 Jun 2023 11:21:54 -0700 Subject: [PATCH] refactor(odyssey-react-mui): update all Alert styles to match rebrand --- .../odyssey-design-tokens/src/typography.json | 1 - packages/odyssey-react-mui/src/Banner.tsx | 4 +- .../src/theme/components.tsx | 92 ++++++++++++------- .../odyssey-mui/Infobox/Infobox.stories.tsx | 34 +++++-- 4 files changed, 88 insertions(+), 43 deletions(-) diff --git a/packages/odyssey-design-tokens/src/typography.json b/packages/odyssey-design-tokens/src/typography.json index b9e2c71cd0..1639bbe2de 100644 --- a/packages/odyssey-design-tokens/src/typography.json +++ b/packages/odyssey-design-tokens/src/typography.json @@ -21,7 +21,6 @@ "value": "{hue.neutral.300.value}" }, "action": { - "comment": "Branded text color, primarily used within button", "value": "{palette.primary.text.value}" }, "danger": { diff --git a/packages/odyssey-react-mui/src/Banner.tsx b/packages/odyssey-react-mui/src/Banner.tsx index 1b4a50aa57..4dabb140ad 100644 --- a/packages/odyssey-react-mui/src/Banner.tsx +++ b/packages/odyssey-react-mui/src/Banner.tsx @@ -12,7 +12,7 @@ import { AlertColor, AlertProps } from "@mui/material"; import { memo } from "react"; -import { Alert, Link, ScreenReaderText } from "./"; +import { Alert, AlertTitle, Link, ScreenReaderText } from "./"; import { useTranslation } from "react-i18next"; export type BannerProps = { @@ -60,7 +60,7 @@ const Banner = ({ return ( {t(`severity.${severity}`)}: - {text} + {text} {linkUrl && ( {linkText} diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 52d05e8f47..5bab15e1dd 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -12,7 +12,7 @@ import { ThemeOptions } from "@mui/material"; import type {} from "@mui/lab/themeAugmentation"; -//import radioClasses from "@mui/material"; +import { alertTitleClasses } from "@mui/material/AlertTitle"; import { buttonClasses } from "@mui/material/Button"; import { chipClasses } from "@mui/material/Chip"; import { dialogActionsClasses } from "@mui/material/DialogActions"; @@ -59,43 +59,70 @@ export const components = ( }, styleOverrides: { root: ({ ownerState, theme }) => ({ - padding: theme.spacing(4), - gap: theme.spacing(4), + padding: odysseyTokens.Spacing4, + gap: odysseyTokens.Spacing4, color: odysseyTokens.TypographyColorBody, - ...(ownerState.severity && { - backgroundColor: theme.palette[ownerState.severity].lighter, - borderColor: theme.palette[ownerState.severity].light, + border: 0, + ...(ownerState.severity === "success" && { + backgroundColor: odysseyTokens.HueGreen100, + + [`& .${alertTitleClasses.root}`]: { + color: odysseyTokens.PaletteSuccessHeading, + }, + }), + ...(ownerState.severity === "info" && { + backgroundColor: odysseyTokens.HueBlue100, + + [`& .${alertTitleClasses.root}`]: { + color: odysseyTokens.PalettePrimaryHeading, + }, + }), + ...(ownerState.severity === "error" && { + backgroundColor: odysseyTokens.HueRed100, + + [`& .${alertTitleClasses.root}`]: { + color: odysseyTokens.PaletteDangerHeading, + }, + }), + ...(ownerState.severity === "warning" && { + backgroundColor: odysseyTokens.HueYellow100, + + [`& .${alertTitleClasses.root}`]: { + color: odysseyTokens.PaletteWarningHeading, + }, }), ...(ownerState.variant === "banner" && { position: "relative", justifyContent: "center", alignItems: "center", - borderWidth: 0, - borderRadius: 0, }), ...(ownerState.variant === "infobox" && { - borderStyle: theme.mixins.borderStyle, - borderWidth: theme.mixins.borderWidth, - borderRadius: odysseyTokens.BorderRadiusMain, + borderRadius: odysseyTokens.BorderRadiusOuter, "&:not(:last-child)": { marginBottom: theme.spacing(4), }, + + [`& .${alertTitleClasses.root}`]: { + marginBlockEnd: odysseyTokens.Spacing2, + + [`&:last-child`]: { + marginBlockEnd: 0, + }, + }, }), ...(ownerState.variant === "toast" && { maxWidth: theme.mixins.maxWidth, - borderStyle: theme.mixins.borderStyle, - borderWidth: theme.mixins.borderWidth, - borderRadius: theme.mixins.borderRadius, + borderRadius: odysseyTokens.BorderRadiusOuter, position: "relative", alignItems: "center", }), }), - action: ({ ownerState, theme }) => ({ + action: ({ ownerState }) => ({ ...(ownerState.variant === "banner" && { padding: 0, marginInlineEnd: 0, top: "50%", - right: theme.spacing(4), + right: odysseyTokens.Spacing2, position: "absolute", transform: "translateY(-50%)", }), @@ -108,7 +135,7 @@ export const components = ( icon: ({ ownerState, theme }) => ({ marginInlineEnd: 0, padding: 0, - fontSize: "inherit", + height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`, opacity: 1, ...(ownerState.severity && { color: theme.palette[ownerState.severity].main, @@ -118,7 +145,8 @@ export const components = ( }), [`& .${svgIconClasses.root}`]: { - fontSize: "1.429rem", + alignSelf: "center", + fontSize: odysseyTokens.TypographySizeHeading6, }, }), message: ({ ownerState, theme }) => ({ @@ -138,17 +166,13 @@ export const components = ( }, MuiAlertTitle: { styleOverrides: { - root: ({ theme }) => ({ - marginTop: 0, - marginBottom: theme.spacing(1), - lineHeight: theme.typography.h6.lineHeight, - fontSize: theme.typography.h6.fontSize, - fontWeight: theme.typography.fontWeightBold, - - "&:last-child": { - marginBlockEnd: 0, - }, - }), + root: { + marginBlock: 0, + lineHeight: odysseyTokens.TypographyLineHeightHeading6, + fontSize: odysseyTokens.TypographySizeHeading6, + fontWeight: odysseyTokens.TypographyWeightHeading, + fontFamily: odysseyTokens.TypographyFamilyHeading, + }, }, }, MuiAutocomplete: { @@ -2157,9 +2181,13 @@ export const components = ( }, }, styleOverrides: { - paragraph: ({ theme }) => ({ - marginBottom: theme.spacing(4), - }), + paragraph: { + marginBlockEnd: odysseyTokens.Spacing4, + + [`&:last-child`]: { + marginBlockEnd: 0, + }, + }, }, }, }; diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx index 743da05957..66e8f41147 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.stories.tsx @@ -39,8 +39,11 @@ const storybookMeta: Meta = { }, }, args: { - children: - "You are currently logged in from Moonbase Alpha-6, located on Luna.", + children: ( + + You're signed in from Moonbase Alpha-6, located on Luna. + + ), severity: "info", }, decorators: [MuiThemeDecorator], @@ -50,15 +53,22 @@ export default storybookMeta; export const Info: StoryObj = { args: { - children: "You're signed in from Moonbase Alpha-6, located on Luna.", + children: ( + + You're signed in from Moonbase Alpha-6, located on Luna. + + ), severity: "info", }, }; export const Error: StoryObj = { args: { - children: - "Reconfigure the fuel mixture ratios and perform safety checks again.", + children: ( + + Reconfigure the fuel mixture ratios and perform safety checks again. + + ), role: "alert", severity: "error", title: "Safety checks failed", @@ -67,8 +77,12 @@ export const Error: StoryObj = { export const Warning: StoryObj = { args: { - children: - "Complete all safety checks before requesting approval to launch your mission.", + children: ( + + Complete all safety checks before requesting approval to launch your + mission. + + ), role: "status", severity: "warning", title: "Safety checks incomplete", @@ -77,7 +91,11 @@ export const Warning: StoryObj = { export const Success: StoryObj = { args: { - children: "Safety checks are complete. Your mission is ready for liftoff.", + children: ( + + Safety checks are complete. Your mission is ready for liftoff. + + ), role: "status", severity: "success", title: "Approved for launch",