@okta/odyssey-react-mui 1.24.0 → 1.24.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.24.1](https://github.com/okta/odyssey/compare/v1.24.0...v1.24.1) (2024-10-04)
+
+### Bug Fixes
+
+- **odyssey-react-mui:** add back margin removed in error ([e36cb89](https://github.com/okta/odyssey/commit/e36cb89d20daf7eb68cbc58d8391ea7cf512b281))
+- **odyssey-react-mui:** add back no children styling ([2a07fa3](https://github.com/okta/odyssey/commit/2a07fa37130d48206939aa94c42add4a3f105157))
+- **odyssey-react-mui:** add back size and full width styling ([11552fd](https://github.com/okta/odyssey/commit/11552fd7818d232535eb89c86d04c3ccc15896b3))
+- **odyssey-react-mui:** fix margin start ([478e20e](https://github.com/okta/odyssey/commit/478e20ef320ee26c1fd96e93a1dabb7131808d6f))
+- **odyssey-storybook:** add back floatingAction styles ([0b84954](https://github.com/okta/odyssey/commit/0b8495484de11e35e2959c2e3b6dba80394b6a3e))
+
 ## [1.24.0](https://github.com/okta/odyssey/compare/v1.20.0...v1.24.0) (2024-10-01)
 
 ### Features

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 02 Oct 2024 18:57:12 GMT
+ * Generated on Fri, 04 Oct 2024 18:01:40 GMT
  */
 
 $border-color-control: #8d8d8d !default;

package/dist/src/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAwC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,UAAU,4DAIpB;IACD,aAAa,EAAE,YAAY,CAAC;IAC5B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,KAAG,YAAY,CAAC,YAAY,CAg/F5B,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAwC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,eAAO,MAAM,UAAU,4DAIpB;IACD,aAAa,EAAE,YAAY,CAAC;IAC5B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,KAAG,YAAY,CAAC,YAAY,CA4jG5B,CAAC"}

package/dist/theme/components.js

@@ -561,6 +561,25 @@ export const components = ({
                 fontSize: `${odysseyTokens.TypographyLineHeightUi}em`
               }
             },
+            ...(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,
@@ -649,29 +668,65 @@ export const components = ({
                 backgroundColor: "transparent",
                 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,
-          ...(ownerState.children === undefined && {
-            marginInlineStart: 0
-          })
-        }),
+        }) => {
+          const hasNoChildren = ownerState.children === "" || ownerState.children === undefined || ownerState.children === null;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineStart: odysseyTokens.Spacing2,
+            ...(hasNoChildren && {
+              marginInlineStart: 0
+            })
+          };
+        },
         startIcon: ({
           ownerState
-        }) => ({
-          display: "inline-flex",
-          margin: 0,
-          marginInlineEnd: odysseyTokens.Spacing2,
-          ...(ownerState.children === undefined && {
-            marginInlineEnd: 0
-          })
-        })
+        }) => {
+          const hasNoChildren = ownerState.children === "" || ownerState.children === undefined || ownerState.children === null;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing2,
+            ...(hasNoChildren && {
+              marginInlineEnd: 0
+            })
+          };
+        }
       }
     },
     MuiButtonBase: {