@okta/odyssey-react-mui 1.13.6 → 1.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.6",
+  "version": "1.13.7",
   "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.13.6",
+    "@okta/odyssey-design-tokens": "1.13.7",
     "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": "cab3fb1def0c2b9cfbc1699b54230489f626a758"
+  "gitHead": "30c72beca0bda76f3872f13621c5e27407bebcc4"
 }

package/src/Button.tsx

@@ -32,7 +32,6 @@ export const buttonTypeValues = ["button", "submit", "reset"] as const;
 export const buttonVariantValues = [
   "primary",
   "secondary",
-  "tertiary",
   "danger",
   "floating",
 ] as const;
@@ -112,7 +111,7 @@ export type ButtonProps = {
   /**
    * The variant of the Button
    */
-  variant: (typeof buttonVariantValues)[number];
+  variant: (typeof buttonVariantValues)[number] | "tertiary";
 } & (
   | {
       endIcon?: ReactElement;
@@ -150,9 +149,13 @@ const Button = ({
   tooltipText,
   translate,
   type = "button",
-  variant,
+  variant: variantProp,
 }: ButtonProps) => {
   const muiProps = useMuiProps();
+
+  // We're deprecating the "tertiary" variant, so map it to
+  // "secondary" in lieu of making a breaking change
+  const variant = variantProp === "tertiary" ? "secondary" : variantProp;
   const localButtonRef = useRef<HTMLButtonElement>(null);
 
   useImperativeHandle(

package/src/theme/components.tsx

@@ -540,6 +540,7 @@ export const components = ({
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
           display: "inline-flex",
+          height: odysseyTokens.Spacing7,
           position: "relative",
           marginBlock: "0",
           marginInline: "0",
@@ -552,7 +553,7 @@ export const components = ({
           borderRadius: odysseyTokens.BorderRadiusMain,
           borderColor: "transparent",
           fontSize: odysseyTokens.TypographySizeBody,
-          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
           fontFamily: odysseyTokens.TypographyFamilyButton,
           lineHeight: odysseyTokens.TypographyLineHeightUi,
           whiteSpace: "nowrap",
@@ -617,26 +618,6 @@ export const components = ({
             },
           }),
 
-          ...(ownerState.variant === "tertiary" && {
-            backgroundColor: odysseyTokens.HueNeutral100,
-            color: odysseyTokens.HueNeutral700,
-
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
-              color: odysseyTokens.HueNeutral800,
-            },
-
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral300,
-              color: odysseyTokens.HueNeutral800,
-            },
-
-            "&:disabled": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              color: odysseyTokens.TypographyColorDisabled,
-            },
-          }),
-
           ...(ownerState.variant === "danger" && {
             backgroundColor: odysseyTokens.PaletteDangerMain,
             color: odysseyTokens.HueNeutralWhite,
@@ -676,16 +657,17 @@ export const components = ({
             },
           }),
           ...(ownerState.size === "small" && {
+            height: odysseyTokens.Spacing6,
             paddingBlock: odysseyTokens.Spacing2,
             paddingInline: odysseyTokens.Spacing3,
             fontSize: odysseyTokens.TypographySizeBody,
           }),
           ...(ownerState.size === "large" && {
+            height: odysseyTokens.Spacing8,
             paddingBlock: odysseyTokens.Spacing4,
             paddingInline: odysseyTokens.Spacing4,
           }),
           ...(ownerState.fullWidth === true && {
-            display: "block",
             width: "100%",
             marginBlock: "0",
             marginInline: "0",
@@ -705,6 +687,10 @@ export const components = ({
             ...(ownerState.size === "small" && {
               padding: odysseyTokens.Spacing2,
             }),
+
+            ...(ownerState.size === "large" && {
+              padding: odysseyTokens.Spacing4,
+            }),
           }),
         }),