@okta/odyssey-react-mui 0.21.2 → 0.21.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.3](https://github.com/okta/odyssey/compare/v0.21.2...v0.21.3) (2023-04-06)
+
+### Features
+
+- add Odyssey styles to Radio and Checkbox ([39ebde0](https://github.com/okta/odyssey/commit/39ebde08d4cb83f933a98d79000ac23ad15c12c9))
+- **odyssey-react-mui:** add transitions to form controls, update state ui ([7388c00](https://github.com/okta/odyssey/commit/7388c00e5ca112ff12d429e45996ab5aa557a36a))
+
+### Bug Fixes
+
+- **odyssey-react-mui:** make text disabled color more a11y-friendly ([372a010](https://github.com/okta/odyssey/commit/372a010b934efc8421c42c8fa7d3a9323af8182f))
+- upgraded loader-utils and fastify for security ([#1734](https://github.com/okta/odyssey/issues/1734)) ([d6f3d27](https://github.com/okta/odyssey/commit/d6f3d27daefd1994059463ad33f9adceb35e36a0))
+
 ## [0.21.2](https://github.com/okta/odyssey/compare/v0.21.1...v0.21.2) (2023-03-30)
 
 ### Features

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;AA4B7C,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAmxDjD,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;AA8B7C,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAs5DjD,CAAC"}

package/dist/theme/components.js

@@ -25,8 +25,9 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
-import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
+import { AlertTriangleFilledIcon, ArrowDownIcon, CheckIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon, SubtractIcon } from "../iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 export const components = {
   MuiAlert: {
     defaultProps: {
@@ -418,7 +419,10 @@ export const components = {
   },
   MuiCheckbox: {
     defaultProps: {
-      size: "small"
+      size: "small",
+      icon: _jsx(_Fragment, {}),
+      checkedIcon: _jsx(CheckIcon, {}),
+      indeterminateIcon: _jsx(SubtractIcon, {})
     },
     styleOverrides: {
       root: _ref17 => {
@@ -426,20 +430,69 @@ export const components = {
           theme
         } = _ref17;
         return {
-          borderRadius: "4px",
-          "&:hover": {
-            backgroundColor: "transparent"
-          },
+          width: `${theme.typography.ui.lineHeight}em`,
+          height: `${theme.typography.ui.lineHeight}em`,
+          borderRadius: theme.mixins.borderRadius,
+          borderWidth: theme.mixins.borderWidth,
+          borderStyle: theme.mixins.borderStyle,
+          borderColor: theme.palette.grey[500],
           padding: 0,
+          boxShadow: `0 0 0 0 transparent`,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: theme.transitions.duration.short
+          }),
+          ".MuiSvgIcon-root": {
+            color: theme.palette.common.white,
+            width: "0.5em",
+            height: "0.5em",
+            transition: theme.transitions.create(["color"], {
+              duration: theme.transitions.duration.short
+            })
+          },
+          "&.Mui-checked": {
+            backgroundColor: theme.palette.primary.main,
+            borderColor: theme.palette.primary.main,
+            ".MuiFormControlLabel-root:hover > &": {
+              backgroundColor: theme.palette.primary.dark,
+              borderColor: theme.palette.primary.dark
+            }
+          },
+          ".MuiFormControlLabel-root:hover > &": {
+            backgroundColor: "transparent",
+            borderColor: theme.palette.grey[900]
+          },
+          ".Mui-error:hover > &": {
+            borderColor: theme.palette.error.dark,
+            "&.Mui-checked": {
+              backgroundColor: theme.palette.error.dark,
+              borderColor: theme.palette.error.dark
+            }
+          },
           ".Mui-error > &": {
-            color: theme.palette.error.main,
-            "&:hover": {
-              color: theme.palette.error.dark
+            borderColor: theme.palette.error.main,
+            "&.Mui-checked": {
+              backgroundColor: theme.palette.error.main,
+              borderColor: theme.palette.error.main
+            },
+            "&.Mui-focusVisible": {
+              boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
             }
           },
-          ".Mui-error > &.Mui-checked": {
-            "&:hover": {
-              color: theme.palette.error.dark
+          "&.Mui-focusVisible": {
+            borderColor: theme.palette.grey[900],
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
+          },
+          "&.Mui-disabled": {
+            backgroundColor: theme.palette.grey[50],
+            borderColor: theme.palette.grey[300],
+            ".Mui-error > &": {
+              backgroundColor: theme.palette.grey[50],
+              borderColor: theme.palette.grey[300]
+            },
+            ".MuiSvgIcon-root": {
+              color: theme.palette.common.black
             }
           }
         };
@@ -1158,10 +1211,16 @@ export const components = {
           borderStyle: theme.mixins.borderStyle,
           borderRadius: theme.mixins.borderRadius,
           borderColor: theme.palette.grey[500],
+          boxShadow: `0 0 0 0 transparent`,
+          backgroundColor: theme.palette.common.white,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: theme.transitions.duration.short
+          }),
           ...(ownerState.fullWidth && {
             width: "100%"
           }),
           ...(ownerState.readOnly === true && {
+            borderColor: "transparent",
             backgroundColor: theme.palette.grey[50]
           }),
           [`&:hover`]: {
@@ -1444,7 +1503,9 @@ export const components = {
   },
   MuiRadio: {
     defaultProps: {
-      size: "small"
+      size: "small",
+      icon: _jsx(_Fragment, {}),
+      checkedIcon: _jsx(_Fragment, {})
     },
     styleOverrides: {
       root: _ref43 => {
@@ -1452,21 +1513,69 @@ export const components = {
           theme
         } = _ref43;
         return {
-          "&:hover": {
-            backgroundColor: "transparent"
-          },
+          width: `${theme.typography.ui.lineHeight}em`,
+          height: `${theme.typography.ui.lineHeight}em`,
+          borderRadius: `${theme.typography.ui.lineHeight}em`,
+          borderWidth: theme.mixins.borderWidth,
+          borderStyle: theme.mixins.borderStyle,
+          borderColor: theme.palette.grey[500],
           padding: 0,
+          boxShadow: `0 0 0 0 transparent`,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: theme.transitions.duration.short
+          }),
+          "&::before": {
+            content: "''",
+            position: "absolute",
+            width: "0.5em",
+            height: "0.5em",
+            borderRadius: "50%",
+            backgroundColor: "transparent",
+            transition: theme.transitions.create(["background-color"], {
+              duration: theme.transitions.duration.short
+            })
+          },
+          ".MuiFormControlLabel-root:hover > &": {
+            backgroundColor: "transparent",
+            borderColor: theme.palette.grey[900]
+          },
+          ".Mui-error:hover > &": {
+            backgroundColor: "transparent",
+            borderColor: theme.palette.error.dark,
+            "&::before": {
+              backgroundColor: theme.palette.error.dark
+            }
+          },
           ".Mui-error > &": {
-            color: theme.palette.error.main,
-            "&:hover": {
-              color: theme.palette.error.dark
+            borderColor: theme.palette.error.main,
+            "&::before": {
+              backgroundColor: theme.palette.error.main
+            },
+            "&.Mui-focusVisible": {
+              boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
             }
           },
           "&.Mui-focusVisible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: 0,
-            outlineStyle: "solid",
-            outlineWidth: "2px"
+            borderColor: theme.palette.grey[900],
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
+          },
+          "&.Mui-checked": {
+            position: "relative",
+            "&::before": {
+              backgroundColor: theme.palette.primary.main
+            }
+          },
+          ".Mui-error > &.Mui-checked::before": {
+            backgroundColor: theme.palette.error.main
+          },
+          "&.Mui-disabled": {
+            backgroundColor: theme.palette.grey[50],
+            borderColor: theme.palette.grey[300],
+            "&::before": {
+              backgroundColor: theme.palette.grey[300]
+            }
           }
         };
       }