From 5e476f1a1a97043ef64eb9c630a0b930a9a77549 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Wed, 12 Jul 2023 22:34:12 -0400
Subject: [PATCH] refactor: remove IconButton (#1865)

---
 .../odyssey-react-mui/src/PasswordField.tsx   | 14 ++++----
 packages/odyssey-react-mui/src/index.ts       |  2 --
 .../src/theme/components.tsx                  | 32 -------------------
 3 files changed, 7 insertions(+), 41 deletions(-)

diff --git a/packages/odyssey-react-mui/src/PasswordField.tsx b/packages/odyssey-react-mui/src/PasswordField.tsx
index dd3b1500d0..7265b8d3ef 100644
--- a/packages/odyssey-react-mui/src/PasswordField.tsx
+++ b/packages/odyssey-react-mui/src/PasswordField.tsx
@@ -21,7 +21,7 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./iconDictionary";
-import { IconButton } from "@mui/material";
+import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -122,13 +122,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                edge="end"
+              <Button
+                ariaLabel="toggle password visibility"
+                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
                 onClick={togglePasswordVisibility}
-              >
-                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
-              </IconButton>
+                size="small"
+                variant="floating"
+              />
             </InputAdornment>
           }
           id={id}
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
index 2d9445f02e..4bb8c9a1b2 100644
--- a/packages/odyssey-react-mui/src/index.ts
+++ b/packages/odyssey-react-mui/src/index.ts
@@ -24,7 +24,6 @@ export {
   FormGroup,
   FormHelperText,
   FormLabel,
-  IconButton,
   /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
   InputAdornment,
   /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextField`. */
@@ -60,7 +59,6 @@ export type {
   FormGroupProps,
   FormHelperTextProps,
   FormLabelProps,
-  IconButtonProps,
   /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
   InputAdornmentProps,
   /** @deprecated Will be removed in a future Odyssey version. Please switch to `TextFieldProps`. */
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index f62251f728..72019234be 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1315,38 +1315,6 @@ export const components = (
         },
       },
     },
-    MuiIconButton: {
-      styleOverrides: {
-        edgeEnd: {
-          marginInlineEnd: odysseyTokens.Spacing1,
-        },
-        root: {
-          padding: odysseyTokens.Spacing1,
-          fontSize: odysseyTokens.TypographySizeBody,
-          backgroundColor: "transparent",
-          color: odysseyTokens.TypographyColorBody,
-          borderColor: "transparent",
-          borderRadius: odysseyTokens.BorderRadiusMain,
-
-          "&:hover, &:focus-visible": {
-            backgroundColor: "rgba(29, 29, 33, 0.1)",
-            borderColor: "transparent",
-          },
-          "&:focus-visible": {
-            outlineColor: odysseyTokens.FocusOutlineColorPrimary,
-          },
-          "&:active": {
-            backgroundColor: "rgba(29, 29, 33, 0.2)",
-            borderColor: "transparent",
-          },
-          "&:disabled": {
-            backgroundColor: "rgba(235, 235, 237, 0.6)",
-            color: odysseyTokens.TypographyColorSub,
-            borderColor: "transparent",
-          },
-        },
-      },
-    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true,