@okta/odyssey-react-mui 1.13.7 → 1.13.9

package/package.json

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

package/src/Accordion.tsx

@@ -35,10 +35,6 @@ export type AccordionProps = {
    * The label text for the AccordionSummary
    */
   label: string;
-  /**
-   * If true, the Accordion item will have a shadow.
-   */
-  hasShadow?: boolean;
   /**
    * Whether the item is expanded by default
    */
@@ -70,7 +66,6 @@ export type AccordionProps = {
 const Accordion = ({
   children,
   label,
-  hasShadow = true,
   id: idOverride,
   isDefaultExpanded,
   isDisabled,
@@ -88,7 +83,6 @@ const Accordion = ({
       disableGutters
       expanded={isExpanded}
       onChange={onChange}
-      className={hasShadow ? `hasShadow` : undefined}
     >
       <MuiAccordionSummary
         aria-controls={contentId}

package/src/Button.tsx

@@ -132,7 +132,10 @@ export type ButtonProps = {
   HtmlProps;
 
 const Button = ({
+  ariaControls,
   ariaDescribedBy,
+  ariaExpanded,
+  ariaHasPopup,
   ariaLabel,
   ariaLabelledBy,
   buttonRef,
@@ -177,9 +180,12 @@ const Button = ({
       return (
         <MuiButton
           {...muiProps}
+          aria-controls={ariaControls}
+          aria-describedby={ariaDescribedBy}
+          aria-expanded={ariaExpanded}
+          aria-haspopup={ariaHasPopup}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
-          aria-describedby={ariaDescribedBy}
           data-se={testId}
           disabled={isDisabled}
           endIcon={endIcon}
@@ -199,7 +205,10 @@ const Button = ({
       );
     },
     [
+      ariaControls,
       ariaDescribedBy,
+      ariaExpanded,
+      ariaHasPopup,
       ariaLabel,
       ariaLabelledBy,
       endIcon,

package/src/theme/components.tsx

@@ -62,15 +62,13 @@ export const components = ({
       styleOverrides: {
         root: () => ({
           backgroundColor: odysseyTokens.HueNeutralWhite,
-          borderWidth: 1,
-          borderInlineStyle: "solid",
-          borderColor: odysseyTokens.HueNeutral100,
+          border: 0,
+          borderBottomColor: odysseyTokens.BorderColorDisplay,
+          borderBottomStyle: "solid",
+          borderBottomWidth: odysseyTokens.BorderWidthMain,
+          borderRadius: 0,
           boxShadow: "none",
 
-          "&.hasShadow": {
-            boxShadow: odysseyTokens.DepthLow,
-          },
-
           "&.Mui-disabled": {
             backgroundColor: odysseyTokens.HueNeutralWhite,
             color: odysseyTokens.TypographyColorDisabled,
@@ -81,21 +79,18 @@ export const components = ({
             },
           },
 
-          "&::before": {
-            backgroundColor: odysseyTokens.BorderColorDisplay,
-            opacity: "1 !important",
-          },
-
           "&:first-of-type": {
-            borderTopLeftRadius: odysseyTokens.BorderRadiusMain,
-            borderTopRightRadius: odysseyTokens.BorderRadiusMain,
-            borderBlockStartStyle: "solid",
+            borderRadius: 0,
+            borderTopColor: odysseyTokens.BorderColorDisplay,
+            borderTopStyle: "solid",
+            borderTopWidth: odysseyTokens.BorderWidthMain,
           },
 
           "&:last-of-type": {
-            borderBottomLeftRadius: odysseyTokens.BorderRadiusMain,
-            borderBottomRightRadius: odysseyTokens.BorderRadiusMain,
-            borderBlockEndStyle: "solid",
+            borderRadius: 0,
+            borderBottomColor: odysseyTokens.BorderColorDisplay,
+            borderBottomStyle: "solid",
+            borderBottomWidth: odysseyTokens.BorderWidthMain,
           },
         }),
       },
@@ -106,26 +101,12 @@ export const components = ({
           paddingBlock: odysseyTokens.Spacing4,
           paddingInline: odysseyTokens.Spacing3,
 
-          ".MuiAccordion-root:first-of-type &": {
-            borderTopLeftRadius: odysseyTokens.BorderRadiusMain,
-            borderTopRightRadius: odysseyTokens.BorderRadiusMain,
-          },
-
-          ".MuiAccordion-root:last-of-type &": {
-            borderBottomLeftRadius: odysseyTokens.BorderRadiusMain,
-            borderBottomRightRadius: odysseyTokens.BorderRadiusMain,
-          },
-
-          ".MuiAccordion-root.Mui-expanded &": {
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-          },
-
-          "&:hover, &:focus": {
+          "&:hover": {
             backgroundColor: odysseyTokens.HueNeutral50,
           },
 
           "&:focus-visible": {
+            backgroundColor: odysseyTokens.HueNeutral50,
             outlineColor: odysseyTokens.PalettePrimaryMain,
             outlineWidth: 2,
             outlineStyle: "solid",