@okta/odyssey-react-mui 1.9.12 → 1.9.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.9.12",
+  "version": "1.9.13",
   "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.12",
+    "@okta/odyssey-design-tokens": "1.9.13",
     "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": "42787825aa3492c1e9f6bb4f6389691a7ff83522"
+  "gitHead": "747861bf33f9c65b901782e306c16b0ccf26a942"
 }

package/src/Badge.tsx

@@ -51,20 +51,17 @@ const Badge = ({
 }: BadgeProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
-  const threeDigitLimitedMax =
-    greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
-  const isOverContentMax = Boolean(
-    badgeContent && badgeContent > threeDigitLimitedMax
-  );
-  const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
-  const formattedContent = isOverContentMax
-    ? overContentMaxMessage
-    : badgeContent;
-  const contentIsLongerThanOneChar = formattedContent?.toString()?.length > 1;
+  const renderBadge = useMemo(() => {
+    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
+    const threeDigitLimitedMax =
+      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
+    const isOverContentMax = badgeContent > threeDigitLimitedMax;
+    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
+    const formattedContent = isOverContentMax
+      ? overContentMaxMessage
+      : badgeContent.toString();
 
-  const badgeStyles = useMemo<CSSProperties>(
-    () => ({
+    const badgeStyles: CSSProperties = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -72,31 +69,38 @@ const Badge = ({
       height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
       minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
       // 6px horizontal padding per design requirements
-      padding: `0 calc(${odysseyDesignTokens.Spacing1} * 1.5)`,
+      padding: "0 6px",
       backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
       color: badgeTypeColors(odysseyDesignTokens)[type].font,
-      borderRadius: contentIsLongerThanOneChar
-        ? `${odysseyDesignTokens.BorderRadiusOuter}`
-        : "50%",
+      borderRadius:
+        formattedContent.length > 1
+          ? `${odysseyDesignTokens.BorderRadiusOuter}`
+          : "50%",
       fontSize: `${odysseyDesignTokens.TypographyScale0}`,
       fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
       fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
       lineHeight: 1,
-    }),
-    [type, contentIsLongerThanOneChar, odysseyDesignTokens]
-  );
+      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,
+      transitionProperty: `background-color, color`,
+    };
 
-  const shouldHideBadge = badgeContent <= 0 || !badgeContent;
+    const hasNotificationCount = badgeContent && badgeContent > 0;
 
-  if (shouldHideBadge) {
-    return null;
-  }
+    return hasNotificationCount ? (
+      <Box sx={badgeStyles} data-se={testId} translate={translate}>
+        {formattedContent}
+      </Box>
+    ) : null;
+  }, [
+    badgeContent,
+    badgeContentMax,
+    odysseyDesignTokens,
+    testId,
+    translate,
+    type,
+  ]);
 
-  return (
-    <Box sx={badgeStyles} data-se={testId} translate={translate}>
-      {formattedContent}
-    </Box>
-  );
+  return renderBadge;
 };
 
 const MemoizedBadge = memo(Badge);

package/src/Tabs.tsx

@@ -10,13 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  TabContext as MuiTabContext,
-  TabList as MuiTabList,
-  TabListProps as MuiTabListProps,
-  TabPanel as MuiTabPanel,
-} from "@mui/lab";
-import { Tab as MuiTab } from "@mui/material";
 import {
   ReactElement,
   ReactNode,
@@ -25,7 +18,18 @@ import {
   useEffect,
   useState,
 } from "react";
+import {
+  TabContext as MuiTabContext,
+  TabList as MuiTabList,
+  TabListProps as MuiTabListProps,
+  TabPanel as MuiTabPanel,
+} from "@mui/lab";
+import { Tab as MuiTab } from "@mui/material";
+
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+import { Badge, BadgeProps } from "./Badge";
 import { AllowedProps } from "./AllowedProps";
+import { Box } from "./Box";
 
 export type TabItemProps = {
   /**
@@ -48,6 +52,9 @@ export type TabItemProps = {
    * The value associated with the TabItem
    */
   value?: string;
+} & {
+  notificationCount?: BadgeProps["badgeContent"];
+  notificationCountMax?: BadgeProps["badgeContentMax"];
 } & AllowedProps;
 
 export type TabsProps = {
@@ -74,6 +81,42 @@ export type TabsProps = {
   onChange?: MuiTabListProps["onChange"];
 };
 
+const TabLabel = ({
+  label,
+  notificationCount,
+  notificationCountMax,
+  tabState,
+  value,
+}: Pick<
+  TabItemProps,
+  "label" | "notificationCount" | "notificationCountMax" | "value"
+> & {
+  tabState: string;
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <>
+      {label}
+      {notificationCount !== undefined && notificationCount > 0 && (
+        <Box
+          sx={{
+            marginInlineStart: notificationCount
+              ? odysseyDesignTokens.Spacing2
+              : 0,
+          }}
+        >
+          <Badge
+            badgeContent={notificationCount}
+            badgeContentMax={notificationCountMax}
+            type={value === tabState ? "attention" : "default"}
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
 const Tabs = ({
   ariaLabel,
   initialValue,
@@ -97,19 +140,44 @@ const Tabs = ({
     }
   }, [value]);
 
+  const renderTab = useCallback(
+    (tab, index) => {
+      const {
+        testId,
+        isDisabled,
+        label,
+        startIcon,
+        value,
+        notificationCount,
+        notificationCountMax,
+      } = tab;
+
+      return (
+        <MuiTab
+          data-se={testId}
+          disabled={isDisabled}
+          icon={startIcon}
+          label={
+            <TabLabel
+              label={label}
+              notificationCount={notificationCount}
+              notificationCountMax={notificationCountMax}
+              tabState={tabState}
+              value={value}
+            />
+          }
+          value={value ? value : index.toString()}
+          key={value ? value : index.toString()}
+        />
+      );
+    },
+    [tabState]
+  );
+
   return (
     <MuiTabContext value={tabState}>
       <MuiTabList onChange={onChange} aria-label={ariaLabel}>
-        {tabs.map((tab, index) => (
-          <MuiTab
-            data-se={tab.testId}
-            disabled={tab.isDisabled}
-            icon={tab.startIcon}
-            label={tab.label}
-            value={tab.value ? tab.value : index.toString()}
-            key={tab.value ? tab.value : index.toString()}
-          />
-        ))}
+        {tabs.map((tab, index) => renderTab(tab, index))}
       </MuiTabList>
       {tabs.map((tab, index) => (
         <MuiTabPanel

package/src/theme/components.tsx

@@ -2208,7 +2208,7 @@ export const components = ({
         root: ({ ownerState }) => ({
           maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
           minWidth: "unset",
-          minHeight: "unset",
+          minHeight: odysseyTokens.Spacing9,
           padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
           fontSize: odysseyTokens.TypographySizeHeading6,
           fontFamily: odysseyTokens.TypographyFamilyHeading,