change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField)

packages/manager/.changeset/pr-11807-changed-1741397603714.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Enhance MUI Adornments: Unify Theme for Autocomplete and TextField Components via InputBase Styling ([#11807](https://github.com/linode/manager/pull/11807))

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -4,15 +4,18 @@ import {
   InputAdornment,
   TextField,
 } from '@linode/ui';
-import Clear from '@mui/icons-material/Clear';
-import Search from '@mui/icons-material/Search';
-import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
 
-import type { TextFieldProps } from '@linode/ui';
+import Close from 'src/assets/icons/close.svg';
+import Search from 'src/assets/icons/search.svg';
+
+import type { InputProps, TextFieldProps } from '@linode/ui';
 
 export interface DebouncedSearchProps extends TextFieldProps {
+  /**
+   * Class name to apply to the component.
+   */
   className?: string;
   /**
    * Whether to show a clear button at the end of the input.
@@ -23,9 +26,18 @@ export interface DebouncedSearchProps extends TextFieldProps {
    * @default 400
    */
   debounceTime?: number;
+  /**
+   * Default value of the input.
+   */
   defaultValue?: string;
+  /**
+   * Whether to hide the label.
+   */
   hideLabel?: boolean;
-
+  /**
+   * Custom props to apply to the input element.
+   */
+  inputSlotProps?: InputProps;
   /**
    * Determines if the textbox is currently searching for inputted query
    */
@@ -34,19 +46,25 @@ export interface DebouncedSearchProps extends TextFieldProps {
    * Function to perform when searching for query
    */
   onSearch: (query: string) => void;
+  /**
+   * Placeholder text for the input.
+   */
   placeholder?: string;
+  /**
+   * Value of the input.
+   */
   value: string;
 }
 
 export const DebouncedSearchTextField = React.memo(
   (props: DebouncedSearchProps) => {
     const {
-      InputProps,
       className,
       clearable,
       debounceTime,
       defaultValue,
       hideLabel,
+      inputSlotProps,
       isSearching,
       label,
       onSearch,
@@ -76,38 +94,35 @@ export const DebouncedSearchTextField = React.memo(
 
     return (
       <TextField
-        InputProps={{
-          endAdornment: isSearching ? (
-            <InputAdornment position="end">
-              <CircleProgress size="sm" />
-            </InputAdornment>
-          ) : (
-            clearable &&
-            textFieldValue && (
-              <IconButton
-                onClick={() => {
-                  setTextFieldValue('');
-                  onSearch('');
-                }}
-                aria-label="Clear"
-                size="small"
-              >
-                <Clear
-                  sx={(theme) => ({
-                    '&&': {
-                      color: theme.color.grey1,
-                    },
-                  })}
-                />
-              </IconButton>
-            )
-          ),
-          startAdornment: (
-            <InputAdornment position="end">
-              <StyledSearchIcon />
-            </InputAdornment>
-          ),
-          ...InputProps,
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">
+                {isSearching && <CircleProgress noPadding size="xs" />}
+                {clearable && Boolean(textFieldValue) && (
+                  <IconButton
+                    onClick={() => {
+                      setTextFieldValue('');
+                      onSearch('');
+                    }}
+                    sx={{
+                      padding: 0,
+                    }}
+                    aria-label="Clear"
+                    size="small"
+                  >
+                    <Close />
+                  </IconButton>
+                )}
+              </InputAdornment>
+            ),
+            startAdornment: (
+              <InputAdornment position="start">
+                <Search data-testid="SearchIcon" />
+              </InputAdornment>
+            ),
+            ...inputSlotProps,
+          },
         }}
         className={className}
         data-qa-debounced-search
@@ -122,9 +137,3 @@ export const DebouncedSearchTextField = React.memo(
     );
   }
 );
-
-const StyledSearchIcon = styled(Search)(({ theme }) => ({
-  '&&, &&:hover': {
-    color: theme.color.grey1,
-  },
-}));

packages/manager/src/components/ImageSelect/ImageSelect.tsx

@@ -1,4 +1,11 @@
-import { Autocomplete, Box, Notice, Stack, Typography } from '@linode/ui';
+import {
+  Autocomplete,
+  Box,
+  InputAdornment,
+  Notice,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import { DateTime } from 'luxon';
 import React, { useMemo } from 'react';
 
@@ -178,15 +185,15 @@ export const ImageSelect = (props: Props) => {
           InputProps: {
             startAdornment:
               !multiple && value && !Array.isArray(value) ? (
-                <OSIcon
-                  fontSize="24px"
-                  height="24px"
-                  os={value.vendor ?? ''}
-                  pl={1}
-                  position="relative"
-                  pr={2}
-                  top={1}
-                />
+                <InputAdornment position="start">
+                  <OSIcon
+                    fontSize="20px"
+                    height="20px"
+                    os={value.vendor ?? ''}
+                    position="relative"
+                    top={1}
+                  />
+                </InputAdornment>
               ) : null,
           },
         }}

packages/manager/src/components/PasswordInput/HideShowText.tsx

@@ -1,10 +1,10 @@
+import { InputAdornment } from '@linode/ui';
 import { TextField } from '@linode/ui';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import * as React from 'react';
 
 import type { TextFieldProps } from '@linode/ui';
-
 export const HideShowText = (props: TextFieldProps) => {
   const [hidden, setHidden] = React.useState(true);
 
@@ -13,16 +13,22 @@ export const HideShowText = (props: TextFieldProps) => {
   return (
     <TextField
       {...props}
-      InputProps={{
-        startAdornment: hidden ? (
-          <Visibility onClick={toggle} style={{ marginLeft: 14 }} />
-        ) : (
-          <VisibilityOff onClick={toggle} style={{ marginLeft: 14 }} />
-        ),
-      }}
       dataAttrs={{
         'data-qa-hide': hidden,
       }}
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position="start">
+              {hidden ? (
+                <Visibility onClick={toggle} />
+              ) : (
+                <VisibilityOff onClick={toggle} />
+              )}
+            </InputAdornment>
+          ),
+        },
+      }}
       autoComplete="off"
       type={hidden ? 'password' : 'text'}
     />

packages/manager/src/components/PasswordInput/StrengthIndicator.tsx

@@ -42,7 +42,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     [theme.breakpoints.down('sm')]: {
       textAlign: 'center',
     },
-    top: 2,
   },
 }));
 
@@ -53,15 +52,14 @@ export const StrengthIndicator = (props: Props) => {
 
   return (
     <Grid
-      className={classes.root}
-      container
-      data-qa-strength={strength}
-      spacing={1}
       sx={{
-        alignItems: 'flex-end',
+        alignItems: 'center',
         paddingLeft: 0,
         paddingRight: 0,
       }}
+      className={classes.root}
+      container
+      data-qa-strength={strength}
     >
       {Array.from(Array(3), (v, idx) => idx + 1).map((idx) => (
         <Grid className={classes.blockOuter} key={idx} size={3}>
@@ -76,7 +74,7 @@ export const StrengthIndicator = (props: Props) => {
           />
         </Grid>
       ))}
-      <Grid className="py0" size={3}>
+      <Grid paddingLeft={1} size={3}>
         <Typography
           className={classes.strengthText}
           data-qa-password-strength

packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx

@@ -1,9 +1,10 @@
 import { Autocomplete, InputAdornment, Notice } from '@linode/ui';
-import Search from '@mui/icons-material/Search';
 import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import { debounce } from 'throttle-debounce';
 
+import Search from 'src/assets/icons/search.svg';
+
 import withSearch from '../SearchHOC';
 import { SearchItem } from './SearchItem';
 
@@ -82,8 +83,7 @@ const AlgoliaSearchBar = (props: AlgoliaSearchBarProps) => {
         <Notice
           sx={(theme) => ({
             '& p': {
-              color: theme.color.white,
-              fontFamily: 'LatoWeb',
+              color: theme.tokens.color.Neutrals.White,
             },
           })}
           spacingTop={8}
@@ -102,32 +102,6 @@ const AlgoliaSearchBar = (props: AlgoliaSearchBarProps) => {
             />
           );
         }}
-        slotProps={{
-          paper: {
-            sx: (theme) => ({
-              '& .MuiAutocomplete-listbox': {
-                '&::-webkit-scrollbar': {
-                  display: 'none',
-                },
-                border: 'none !important',
-                msOverflowStyle: 'none',
-                scrollbarWidth: 'none',
-              },
-              '& .MuiAutocomplete-option': {
-                ':hover': {
-                  backgroundColor:
-                    theme.name == 'light'
-                      ? `${theme.tokens.color.Brand[10]} !important`
-                      : `${theme.tokens.color.Neutrals[80]} !important`,
-                  color: theme.color.black,
-                  transition: 'background-color 0.2s',
-                },
-              },
-              boxShadow: '0px 2px 8px 0px rgba(58, 59, 63, 0.18)',
-              marginTop: 0.5,
-            }),
-          },
-        }}
         sx={(theme) => ({
           maxHeight: 500,
           [theme.breakpoints.up('md')]: {
@@ -139,23 +113,9 @@ const AlgoliaSearchBar = (props: AlgoliaSearchBarProps) => {
           InputProps: {
             startAdornment: (
               <InputAdornment position="start">
-                <Search
-                  sx={(theme) => ({
-                    color: `${theme.tokens.search.Default.SearchIcon} !important`,
-                  })}
-                  data-qa-search-icon
-                />
+                <Search data-qa-search-icon />
               </InputAdornment>
             ),
-            sx: (theme) => ({
-              '&.Mui-focused': {
-                borderColor: `${theme.tokens.color.Brand[70]} !important`,
-                boxShadow: 'none',
-              },
-              ':hover': {
-                borderColor: theme.tokens.search.Hover.Border,
-              },
-            }),
           },
           hideLabel: true,
         }}

packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx

@@ -452,8 +452,11 @@ export const ImagesLanding = () => {
         InputProps={{
           endAdornment: query && (
             <InputAdornment position="end">
-              {isFetching && <CircleProgress size="sm" />}
+              {isFetching && <CircleProgress noPadding size="xs" />}
               <IconButton
+                sx={{
+                  padding: 0,
+                }}
                 aria-label="Clear"
                 data-testid="clear-images-search"
                 onClick={resetSearch}

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx

@@ -46,11 +46,11 @@ export const AppSelect = (props: Props) => {
         )}
         <Stack direction="row" flexWrap="wrap" gap={1}>
           <DebouncedSearchTextField
-            InputProps={{ sx: { maxWidth: 'unset !important' } }}
             containerProps={{ flexGrow: 1 }}
             disabled={isLoading}
             fullWidth
             hideLabel
+            inputSlotProps={{ sx: { maxWidth: 'unset !important' } }}
             label="Search marketplace"
             loading={isLoading}
             noMarginTop