@okta/odyssey-react-mui 1.24.0 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -58,7 +58,7 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.24.0",
+    "@okta/odyssey-design-tokens": "^1.24.1",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
@@ -73,5 +73,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "60a0ba720c9b7766c8f3599047f6c77b9470d33b"
+  "gitHead": "8706464f0aa2e07b37fb33c16d848758ea56dfdd"
 }

package/src/theme/components.tsx

@@ -623,6 +623,29 @@ 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 && {
+              width: "100%",
+              marginBlock: "0",
+              marginInline: "0",
+
+              "&:not(:last-child)": {
+                marginBlockEnd: odysseyTokens.Spacing4,
+              },
+            }),
+
             ...(ownerState.variant === "primary" && {
               color: odysseyTokens.HueNeutralWhite,
               backgroundColor: odysseyTokens.PalettePrimaryMain,
@@ -733,28 +756,81 @@ export const components = ({
                 color: odysseyTokens.TypographyColorDisabled,
               },
             }),
+
+            ...(ownerState.variant === "floatingAction" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+              },
+
+              "&:active": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+              },
+
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled,
+              },
+            }),
+
+            ...(ownerState.children === "" && {
+              minWidth: "auto",
+              padding: odysseyTokens.Spacing3,
+
+              [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
+                margin: "0",
+              },
+
+              ...(ownerState.size === "large" && {
+                padding: odysseyTokens.Spacing4,
+              }),
+
+              ...(ownerState.size === "small" && {
+                padding: odysseyTokens.Spacing2,
+              }),
+
+              ...(ownerState.size === "large" && {
+                padding: odysseyTokens.Spacing4,
+              }),
+            }),
           };
         },
 
-        endIcon: ({ ownerState }) => ({
-          display: "inline-flex",
-          margin: 0,
-          marginInlineStart: odysseyTokens.Spacing2,
+        endIcon: ({ ownerState }) => {
+          const hasNoChildren =
+            ownerState.children === "" ||
+            ownerState.children === undefined ||
+            ownerState.children === null;
 
-          ...(ownerState.children === undefined && {
-            marginInlineStart: 0,
-          }),
-        }),
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineStart: odysseyTokens.Spacing2,
 
-        startIcon: ({ ownerState }) => ({
-          display: "inline-flex",
-          margin: 0,
-          marginInlineEnd: odysseyTokens.Spacing2,
+            ...(hasNoChildren && {
+              marginInlineStart: 0,
+            }),
+          };
+        },
 
-          ...(ownerState.children === undefined && {
-            marginInlineEnd: 0,
-          }),
-        }),
+        startIcon: ({ ownerState }) => {
+          const hasNoChildren =
+            ownerState.children === "" ||
+            ownerState.children === undefined ||
+            ownerState.children === null;
+
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing2,
+
+            ...(hasNoChildren && {
+              marginInlineEnd: 0,
+            }),
+          };
+        },
       },
     },
     MuiButtonBase: {