@okta/odyssey-react-mui 1.9.16 → 1.9.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.16",
+  "version": "1.9.18",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.9.16",
+    "@okta/odyssey-design-tokens": "1.9.18",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "5948a86c771db59b932f4985db0b576eb14877e1"
+  "gitHead": "8a77d836848d7af0e8f42dd010ffc3f11c535ca7"
 }

package/src/Callout.tsx

@@ -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 = [
@@ -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
@@ -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) => {
@@ -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>
   );
 };

package/src/Status.tsx

@@ -21,7 +21,6 @@ export const statusSeverityValues = [
   "success",
   "warning",
 ] as const;
-export const statusVariantValues = ["lamp", "pill"] as const;
 
 export type StatusProps = {
   /**
@@ -32,19 +31,9 @@ export type StatusProps = {
    * Determine the color and icon of the Status
    */
   severity: (typeof statusSeverityValues)[number];
-  /**
-   * The style of the Status indicator
-   */
-  variant?: (typeof statusVariantValues)[number];
 } & AllowedProps;
 
-export const Status = ({
-  label,
-  severity,
-  testId,
-  translate,
-  variant = "lamp",
-}: StatusProps) => {
+export const Status = ({ label, severity, testId, translate }: StatusProps) => {
   const muiProps = useMuiProps();
 
   return (
@@ -54,7 +43,7 @@ export const Status = ({
       data-se={testId}
       label={label}
       translate={translate}
-      variant={variant}
+      variant="pill"
     />
   );
 };

package/src/Tabs.tsx

@@ -157,6 +157,7 @@ const Tabs = ({
           data-se={testId}
           disabled={isDisabled}
           icon={startIcon}
+          tabIndex={0}
           label={
             <TabLabel
               label={label}
@@ -176,7 +177,11 @@ const Tabs = ({
 
   return (
     <MuiTabContext value={tabState}>
-      <MuiTabList onChange={onChange} aria-label={ariaLabel}>
+      <MuiTabList
+        onChange={onChange}
+        aria-label={ariaLabel}
+        variant="scrollable"
+      >
         {tabs.map((tab, index) => renderTab(tab, index))}
       </MuiTabList>
       {tabs.map((tab, index) => (

package/src/theme/components.tsx

@@ -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";
@@ -220,6 +221,10 @@ export const components = ({
             ...(ownerState.variant === "banner" && {
               marginBlockEnd: 0,
             }),
+            ...(ownerState.variant === "callout" && {
+              fontSize: odysseyTokens.TypographySizeHeading5,
+              lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+            }),
           },
 
           // Alert variant styling
@@ -235,6 +240,7 @@ export const components = ({
           }),
           ...(ownerState.variant === "callout" && {
             borderRadius: odysseyTokens.BorderRadiusMain,
+            padding: odysseyTokens.Spacing5,
             "&:not(:last-child)": {
               marginBottom: odysseyTokens.Spacing6,
             },
@@ -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)",
           }),
         }),
@@ -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 }) => ({
@@ -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}`]: {
@@ -295,7 +322,12 @@ export const components = ({
           }),
           ...(ownerState.variant === "toast" && {
             flexGrow: 1,
+            marginBlock: odysseyTokens.Spacing2,
           }),
+          [`& .${linkClasses.root}`]: {
+            display: "inline-block",
+            marginTop: odysseyTokens.Spacing5,
+          },
         }),
       },
     },
@@ -814,8 +846,12 @@ export const components = ({
           [`&.${chipClasses.disabled}`]: {
             opacity: 1,
             pointerEvents: "none",
-            backgroundColor: odysseyTokens.HueNeutral200,
+            borderColor: odysseyTokens.BorderColorDisabled,
             color: odysseyTokens.TypographyColorDisabled,
+
+            [`& .${chipClasses.deleteIcon}`]: {
+              color: odysseyTokens.HueNeutral300,
+            },
           },
 
           ...(ownerState.clickable && {
@@ -840,45 +876,6 @@ export const components = ({
             marginInlineEnd: odysseyTokens.Spacing1,
           },
 
-          ...(ownerState.variant === "lamp" && {
-            paddingBlock: 0,
-            paddingInline: 0,
-            borderRadius: 0,
-            border: 0,
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorBody,
-
-            "&::before": {
-              content: "''",
-              width: ".64em",
-              height: ".64em",
-              marginInlineEnd: odysseyTokens.Spacing2,
-              borderRadius: "100%",
-              backgroundColor: odysseyTokens.HueNeutral600,
-            },
-
-            [`&.${chipClasses.colorError}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteDangerMain,
-              },
-            },
-
-            [`&.${chipClasses.colorSuccess}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteSuccessMain,
-              },
-            },
-
-            [`&.${chipClasses.colorWarning}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.HueYellow200,
-              },
-            },
-          }),
-
           ...(ownerState.variant === "pill" && {
             paddingBlock: odysseyTokens.Spacing1,
             paddingInline: odysseyTokens.Spacing2,
@@ -888,15 +885,16 @@ export const components = ({
             lineHeight: odysseyTokens.TypographyLineHeightOverline,
             backgroundColor: odysseyTokens.HueNeutral50,
             color: odysseyTokens.TypographyColorSubordinate,
-            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontSize: "0.71428571rem",
+            textTransform: "uppercase",
 
             "&::before": {
               content: "''",
-              width: ".64em",
-              height: ".64em",
-              marginInlineEnd: odysseyTokens.Spacing1,
+              width: "0.42857143rem",
+              height: "0.42857143rem",
+              marginInlineEnd: odysseyTokens.Spacing2,
               borderRadius: "100%",
-              backgroundColor: odysseyTokens.HueNeutral600,
+              backgroundColor: odysseyTokens.HueNeutral400,
             },
 
             [`&.${chipClasses.colorError}`]: {
@@ -2273,9 +2271,43 @@ export const components = ({
           marginBottom: odysseyTokens.Spacing5,
         },
 
+        scroller: {
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`,
+        },
+
         flexContainer: {
           gap: odysseyTokens.Spacing5,
-          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`,
+        },
+
+        scrollButtons: {
+          zIndex: 1,
+          transitionProperty: "opacity",
+          transitionDuration: odysseyTokens.TransitionDurationMain,
+          transitionTimingFunction: odysseyTokens.TransitionTimingMain,
+
+          "& svg": {
+            width: odysseyTokens.Spacing4,
+            height: odysseyTokens.Spacing4,
+            color: odysseyTokens.PaletteNeutralDark,
+          },
+
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            width: odysseyTokens.Spacing3,
+          },
+          "&:first-of-type::after": {
+            right: `-${odysseyTokens.Spacing3}`,
+            background:
+              "linear-gradient(90deg, #FFF 0%, #FFF 72.49%, rgba(255, 255, 255, 0.70) 86.5%, rgba(255, 255, 255, 0.00) 100%)",
+          },
+          "&:last-of-type::after": {
+            left: `-${odysseyTokens.Spacing3}`,
+            background:
+              "linear-gradient(-90deg, #FFF 0%, #FFF 72.49%, rgba(255, 255, 255, 0.70) 86.5%, rgba(255, 255, 255, 0.00) 100%)",
+          },
         },
       },
     },