Merge pull request #1941 from okta/ee/icon-button

refactor(odyssey-react-mui): use IconButton within Form Fields
okta · Aug 22, 2023 · 58611b2 · 58611b2
2 parents 267aeab + 2e4825c
commit 58611b2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/packages/odyssey-react-mui/src/PasswordField.tsx b/packages/odyssey-react-mui/src/PasswordField.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -21,7 +21,6 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./icons.generated";
-import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -122,13 +121,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <Button
-                ariaLabel="toggle password visibility"
-                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              <IconButton
+                aria-label="toggle password visibility"
                 onClick={togglePasswordVisibility}
-                size="small"
-                variant="floating"
-              />
+              >
+                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              </IconButton>
             </InputAdornment>
           }
           id={id}

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -23,7 +23,6 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -123,15 +122,14 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           endAdornment={
             uncontrolledValue && (
               <InputAdornment position="end">
-                <Button
-                  ariaLabel="Clear"
-                  isDisabled={isDisabled}
-                  label=""
+                <IconButton
+                  aria-label="Clear"
+                  disabled={isDisabled}
                   onClick={onClear}
                   size="small"
-                  startIcon={<CloseCircleFilledIcon />}
-                  variant="floating"
-                />
+                >
+                  <CloseCircleFilledIcon />
+                </IconButton>
               </InputAdornment>
             )
           }

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1352,6 +1352,13 @@ export const components = (
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1,
+        },
+      },
+    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true,