refactor: remove IconButton (#1865)

okta · Jul 13, 2023 · 5e476f1 · 5e476f1
1 parent 6b07b85
commit 5e476f1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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,