@okta/odyssey-react-mui 1.9.17 → 1.9.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.17",
+  "version": "1.9.19",
   "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.17",
+    "@okta/odyssey-design-tokens": "1.9.19",
     "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": "07bb4b1c3e5aea704d7aa4cc49e5dcfa30116ccb"
+  "gitHead": "5ec32fa2c3affc33a0597293329a16f0edf82261"
 }

package/src/Badge.tsx

@@ -19,11 +19,13 @@ import {
 import { Box } from "./Box";
 import type { AllowedProps } from "./AllowedProps";
 
+export type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
+
 export const badgeTypeValues = ["default", "attention", "danger"] as const;
 
 export type BadgeProps = {
   badgeContent: number;
-  badgeContentMax?: number;
+  badgeContentMax?: BadgeContentMax;
   type?: (typeof badgeTypeValues)[number];
 } & AllowedProps;
 
@@ -44,7 +46,7 @@ const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
 
 const Badge = ({
   badgeContent,
-  badgeContentMax = 999,
+  badgeContentMax = 100,
   testId,
   translate,
   type = "default",

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

@@ -846,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 && {
@@ -872,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,
@@ -920,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}`]: {
@@ -2305,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%)",
+          },
         },
       },
     },