feat(odyssey-react-mui): theme Select and refactor InputBase styles t…

…o support Select
okta · Dec 6, 2022 · 0538fb1 · 0538fb1
1 parent 3549bb0
commit 0538fb1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -44,6 +44,7 @@ export {
   InputAdornment,
   InputBase,
   InputLabel,
+  MenuItem,
   Radio,
   RadioGroup,
   Select,
@@ -87,6 +88,7 @@ export type {
   InputAdornmentProps,
   InputBaseProps,
   InputLabelProps,
+  MenuItemProps,
   RadioGroupProps,
   RadioProps,
   SelectProps,

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -15,6 +15,7 @@ import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
+import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
 import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
@@ -27,6 +28,7 @@ import {
   AlertTriangleFilledIcon,
   ArrowDownIcon,
   CheckCircleFilledIcon,
+  ChevronDownIcon,
   CloseCircleFilledIcon,
   InformationCircleFilledIcon,
 } from "../iconDictionary";
@@ -141,7 +143,7 @@ export const components: ThemeOptions["components"] = {
   MuiBackdrop: {
     styleOverrides: {
       root: {
-        backgroundColor: "rgba(29,29,33,0.75)",
+        //backgroundColor: "rgba(29,29,33,0.75)",
       },
     },
   },
@@ -690,16 +692,17 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         display: "flex",
-        minWidth: "1em",
+        minWidth: "1.25em",
         maxHeight: "unset",
+        margin: 0,
         alignItems: "center",
         whiteSpace: "nowrap",
         color: theme.palette.action.active,
         ...(ownerState.position === "start" && {
-          marginInlineEnd: theme.spacing(2),
+          marginInlineStart: theme.spacing(2),
         }),
         ...(ownerState.position === "end" && {
-          marginInlineStart: theme.spacing(2),
+          marginInlineEnd: theme.spacing(2),
         }),
         ...(ownerState.disablePointerEvents === true && {
           pointerEvents: "none",
@@ -723,17 +726,6 @@ export const components: ThemeOptions["components"] = {
         borderStyle: theme.mixins.borderStyle,
         borderRadius: theme.mixins.borderRadius,
         borderColor: theme.palette.grey[500],
-        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-        paddingInline: theme.spacing(3),
-
-        ...(ownerState.multiline && {
-          paddingBlock: theme.spacing(3),
-          paddingInline: theme.spacing(3),
-          ...(ownerState.size === "small" && {
-            paddingBlock: theme.spacing(3),
-            paddingInline: theme.spacing(3),
-          }),
-        }),
 
         ...(ownerState.fullWidth && {
           width: "100%",
@@ -779,14 +771,18 @@ export const components: ThemeOptions["components"] = {
       input: ({ theme }) => ({
         boxSizing: "border-box",
         height: "auto",
-        paddingBlock: 0,
-        paddingInline: 0,
+        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+        paddingInline: theme.spacing(3),
 
         [`.${inputBaseClasses.disabled} &`]: {
           pointerEvents: "auto",
           cursor: "not-allowed",
         },
 
+        [`.${inputAdornmentClasses.root} + &`]: {
+          paddingInlineStart: theme.spacing(2),
+        },
+
         [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
           "&::placeholder": {
             color: theme.palette.text.secondary,
@@ -901,6 +897,13 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiPopover: {
+    styleOverrides: {
+      paper: ({ theme }) => ({
+        marginBlockStart: theme.spacing(1),
+      }),
+    },
+  },
   MuiRadio: {
     defaultProps: {
       size: "small",
@@ -937,9 +940,19 @@ export const components: ThemeOptions["components"] = {
   MuiSelect: {
     defaultProps: {
       variant: "standard",
+      IconComponent: ChevronDownIcon,
     },
     styleOverrides: {
+      select: ({ theme }) => ({
+        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+        paddingInline: theme.spacing(3),
+
+        "&:focus": {
+          backgroundColor: "transparent",
+        },
+      }),
       icon: ({ theme }) => ({
+        insetInlineEnd: theme.spacing(3),
         color: theme.palette.text.primary,
       }),
     },