Skip to content

Commit

Permalink
Polish Toast and Callout (#2061)
Browse files Browse the repository at this point in the history 
* fix: align Toast with Figma

* fix: align callout with Figma

* fix: update types

* fix: update types
  • Loading branch information
@jordankoschei-okta
jordankoschei-okta authored Jan 11, 2024
1 parent 5948a86 commit ea87b95
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 60 deletions.
49 changes: 46 additions & 3 deletions packages/odyssey-react-mui/src/Callout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { ScreenReaderText } from "./ScreenReaderText";
import { useTranslation } from "react-i18next";

import type { AllowedProps } from "./AllowedProps";
import { Link } from "./Link";
import { Paragraph } from "./Typography";

export const calloutRoleValues = ["status", "alert"] as const;
export const calloutSeverityValues = [
Expand All @@ -29,7 +31,7 @@ export type CalloutProps = {
/**
* The contents of the Callout
*/
children: ReactNode;
children?: ReactNode;
/**
* Sets the ARIA role of the Callout
* ("status" for something that dynamically updates, "alert" for errors, null for something
Expand All @@ -40,17 +42,52 @@ export type CalloutProps = {
* Determine the color and icon of the Callout
*/
severity: (typeof calloutSeverityValues)[number];
/**
* The text content of the Callout
*/
text?: string;
/**
* The title of the Callout
*/
title?: string;
} & AllowedProps;
} & (
| {
text: string;
children?: never;
}
| {
text?: never;
children: ReactNode;
}
) &
(
| {
/**
* If linkUrl is not undefined, this is the text of the link.
* If left blank, it defaults to "Learn more".
* Note that linkText does nothing if linkUrl is not defined
*/
linkUrl: string;
/**
* If defined, the Toast will include a link to the URL
*/
linkText: string;
}
| {
linkUrl?: never;
linkText?: never;
}
) &
AllowedProps;

const Callout = ({
children,
linkText,
linkUrl,
role,
severity,
testId,
text,
title,
translate,
}: CalloutProps) => {
Expand All @@ -62,7 +99,13 @@ const Callout = ({
{t(`severity.${severity}`)}
</ScreenReaderText>
{title && <AlertTitle translate={translate}>{title}</AlertTitle>}
<Box component="div">{children}</Box>
{children && <Box component="div">{children}</Box>}
{text && <Paragraph>{text}</Paragraph>}
{linkUrl && (
<Link href={linkUrl} variant="monochrome">
{linkText}
</Link>
)}
</Alert>
);
};
Expand Down
40 changes: 36 additions & 4 deletions packages/odyssey-react-mui/src/theme/components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { formLabelClasses } from "@mui/material/FormLabel";
import { formGroupClasses } from "@mui/material/FormGroup";
import { inputAdornmentClasses } from "@mui/material/InputAdornment";
import { inputBaseClasses } from "@mui/material/InputBase";
import { linkClasses } from "@mui/material/Link";
import { listItemIconClasses } from "@mui/material/ListItemIcon";
import { listItemTextClasses } from "@mui/material/ListItemText";
import { menuItemClasses } from "@mui/material/MenuItem";
Expand Down Expand Up @@ -220,6 +221,10 @@ export const components = ({
...(ownerState.variant === "banner" && {
marginBlockEnd: 0,
}),
...(ownerState.variant === "callout" && {
fontSize: odysseyTokens.TypographySizeHeading5,
lineHeight: odysseyTokens.TypographyLineHeightHeading5,
}),
},

// Alert variant styling
Expand All @@ -235,6 +240,7 @@ export const components = ({
}),
...(ownerState.variant === "callout" && {
borderRadius: odysseyTokens.BorderRadiusMain,
padding: odysseyTokens.Spacing5,
"&:not(:last-child)": {
marginBottom: odysseyTokens.Spacing6,
},
Expand All @@ -243,7 +249,10 @@ export const components = ({
maxWidth: odysseyTokens.TypographyLineLengthMax,
borderRadius: odysseyTokens.BorderRadiusOuter,
position: "relative",
alignItems: "center",
paddingInlineStart: odysseyTokens.Spacing5,
paddingInlineEnd: odysseyTokens.Spacing4,
paddingBlock: odysseyTokens.Spacing3,
alignItems: "flex-start",
backdropFilter: "blur(10px)",
}),
}),
Expand All @@ -258,8 +267,18 @@ export const components = ({
}),
...(ownerState.variant === "toast" && {
padding: 0,
marginInlineStart: 0,
marginInlineEnd: 0,
marginInline: 0,
marginBlock: 1,

[`& .${buttonClasses.root}`]: {
"&:hover, &:focus": {
backgroundColor: odysseyTokens.PaletteNeutralDark.concat("11"),
},

"&:active": {
backgroundColor: odysseyTokens.PaletteNeutralDark.concat("22"),
},
},
}),
}),
icon: ({ ownerState }) => ({
Expand All @@ -277,7 +296,15 @@ export const components = ({
color: odysseyTokens.PaletteSuccessMain,
}),
...(ownerState.severity === "warning" && {
color: odysseyTokens.PaletteWarningDark,
color: odysseyTokens.HueYellow400,
}),

...(ownerState.variant === "toast" && {
marginBlock: odysseyTokens.Spacing2,
}),

...(ownerState.variant === "callout" && {
marginBlock: 1.5,
}),

[`& .${svgIconClasses.root}`]: {
Expand All @@ -295,7 +322,12 @@ export const components = ({
}),
...(ownerState.variant === "toast" && {
flexGrow: 1,
marginBlock: odysseyTokens.Spacing2,
}),
[`& .${linkClasses.root}`]: {
display: "inline-block",
marginTop: odysseyTokens.Spacing5,
},
}),
},
},
Expand Down
91 changes: 38 additions & 53 deletions packages/odyssey-storybook/src/components/odyssey-mui/Callout/Callout.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,37 @@ import {
CalloutProps,
calloutRoleValues,
calloutSeverityValues,
Link,
Paragraph,
} from "@okta/odyssey-react-mui";
import { MuiThemeDecorator } from "../../../../.storybook/components";

const storybookMeta: Meta<CalloutProps> = {
title: "MUI Components/Callout",
component: Callout,
argTypes: {
children: {
control: null,
description: "The contents of the alert",
linkText: {
control: "text",
description:
"If linkUrl is defined, this is the text of the link. If left blank, it defaults to 'Learn more'. Note that linkText does nothing if linkUrl is not defined",
table: {
type: {
summary: "ReactNode",
summary: "string",
},
},
type: {
required: true,
name: "other",
value: "ReactNode",
},
linkUrl: {
control: "text",
description: "If defined, the Callout will include a link to the URL",
table: {
type: {
summary: "string",
},
},
},
role: {
options: calloutRoleValues,
control: { type: "radio" },
description:
"Sets the ARIA role of the alert ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",
"Sets the ARIA role of the Callout ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",
table: {
type: {
summary: calloutRoleValues.join(" | "),
Expand All @@ -53,21 +56,32 @@ const storybookMeta: Meta<CalloutProps> = {
severity: {
options: calloutSeverityValues,
control: { type: "radio" },
description: "Determine the color and icon of the alert",
description: "Determine the color and icon of the Callout",
table: {
type: {
summary: calloutSeverityValues.join(" | "),
},
},
type: {
required: true,
name: "other",
value: "radio",
},
},
text: {
control: "text",
description: "The text content of the Callout",
table: {
type: {
summary: "string",
},
},
type: {
name: "string",
},
},
title: {
control: "text",
description: "The title of the alert",
description: "The title of the Callout",
table: {
type: {
summary: "string",
Expand All @@ -76,11 +90,7 @@ const storybookMeta: Meta<CalloutProps> = {
},
},
args: {
children: (
<Paragraph>
You're signed in from Moonbase Alpha-6, located on Luna.
</Paragraph>
),
text: "You're signed in from Moonbase Alpha-6, located on Luna.",
severity: "info",
},
decorators: [MuiThemeDecorator],
Expand All @@ -91,71 +101,46 @@ export default storybookMeta;

export const Info: StoryObj<CalloutProps> = {
args: {
children: (
<Paragraph>
You're signed in from Moonbase Alpha-6, located on Luna.
</Paragraph>
),
severity: "info",
title: "Authentication status",
text: "You're signed in from Moonbase Alpha-6, located on Luna.",
},
};

export const Error: StoryObj<CalloutProps> = {
args: {
children: (
<Paragraph>
Reconfigure the fuel mixture ratios and perform safety checks again.
</Paragraph>
),
role: "alert",
severity: "error",
title: "Safety checks failed",
text: "Reconfigure the fuel mixture ratios and perform safety checks again.",
},
};

export const Warning: StoryObj<CalloutProps> = {
args: {
children: (
<Paragraph>
Complete all safety checks before requesting approval to launch your
mission.
</Paragraph>
),
role: "status",
severity: "warning",
title: "Safety checks incomplete",
text: "Complete all safety checks before requesting approval to launch your mission.",
},
};

export const Success: StoryObj<CalloutProps> = {
args: {
children: (
<Paragraph>
Safety checks are complete. Your mission is ready for liftoff.
</Paragraph>
),
role: "status",
severity: "success",
title: "Approved for launch",
text: "Safety checks are complete. Your mission is ready for liftoff.",
},
};

export const BlockLink: StoryObj<CalloutProps> = {
export const WithLink: StoryObj<CalloutProps> = {
args: {
children: (
<>
<Paragraph>
There is an issue with the fuel mixture ratios. Reconfigure the fuel
mixture and perform the safety checks again.
</Paragraph>

<Link href="#" variant="monochrome">
Visit fueling console
</Link>
</>
),
role: "alert",
severity: "error",
title: "Safety checks failed",
text: "There is an issue with the fuel mixture ratios. Reconfigure the fuel mixture and perform the safety checks again.",
linkText: "Visit fueling console",
linkUrl: "#",
},
};

0 comments on commit ea87b95

Please sign in to comment.