MEN-7838 - text input appearance

frontend/src/js/common-ui/AsyncAutocomplete.tsx

@@ -13,8 +13,7 @@
 //    limitations under the License.
 import React, { useEffect, useState } from 'react';
 
-import { Autocomplete, TextField } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { Autocomplete, TextField, useTheme } from '@mui/material';
 
 import { TIMEOUTS } from '@northern.tech/store/constants';
 import { useDebounce } from '@northern.tech/utils/debouncehook';
@@ -85,14 +84,16 @@ export const AsyncAutocomplete = ({
           label={label}
           placeholder={placeholder}
           style={styles.textField}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading && <Loader show small table style={{ marginTop: theme.spacing(-4) }} />}
-                {params.InputProps.endAdornment}
-              </>
-            )
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <Loader show small table style={{ marginTop: theme.spacing(-4) }} />}
+                  {params.InputProps.endAdornment}
+                </>
+              )
+            }
           }}
         />
       )}

frontend/src/js/common-ui/ChipSelect.tsx

@@ -18,7 +18,7 @@ import { Autocomplete, TextField } from '@mui/material';
 
 import { duplicateFilter, unionizeStrings } from '@northern.tech/utils/helpers';
 
-export const ChipSelect = ({ className = '', name, disabled = false, inputRef, label = '', options = [], placeholder = '' }) => {
+export const ChipSelect = ({ className = '', name, disabled = false, helperText, inputRef, label = '', options = [], placeholder = '' }) => {
   const [value, setValue] = useState('');
 
   const { control, getValues } = useFormContext();
@@ -72,13 +72,17 @@ export const ChipSelect = ({ className = '', name, disabled = false, inputRef, l
             <TextField
               {...params}
               fullWidth
-              inputProps={{ ...params.inputProps, value }}
-              InputProps={{ ...params.InputProps, disableUnderline: disabled }}
+              slotProps={{
+                htmlInput: { ...params.inputProps, value },
+                input: { ...params.InputProps, disableUnderline: disabled }
+              }}
               key={`${name}-input`}
               label={label}
+              variant={disabled ? 'standard' : 'outlined'}
               onBlur={e => onTextInputLeave(e.target.value, formOnChange)}
               onChange={e => onTextInputChange(e.target.value, 'input', formOnChange)}
               placeholder={currentSelection.length ? '' : placeholder}
+              helperText={helperText}
               inputRef={inputRef}
             />
           )}

frontend/src/js/common-ui/DeviceNameInput.tsx

@@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 // material ui
-import { Input, InputAdornment } from '@mui/material';
+import { InputAdornment, OutlinedInput } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import { setDeviceTags } from '@northern.tech/store/thunks';
@@ -71,7 +71,7 @@ export const DeviceNameInput = ({ device, isHovered }) => {
   const onInputClick = e => e.stopPropagation();
 
   return (
-    <Input
+    <OutlinedInput
       id={`${device.id}-id-input`}
       className={classes.input}
       disabled={!isEditing}

frontend/src/js/common-ui/Search.tsx

@@ -16,21 +16,12 @@ import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-fo
 
 import { Search as SearchIcon } from '@mui/icons-material';
 import { InputAdornment, TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 
 import { TIMEOUTS } from '@northern.tech/store/constants';
 import { useDebounce } from '@northern.tech/utils/debouncehook';
 
 import Loader from './Loader';
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    input: {
-      fontSize: '13px'
-    }
-  }
-}));
-
 const endAdornment = (
   <InputAdornment position="end">
     <Loader show small style={{ marginTop: -10 }} />
@@ -46,8 +37,7 @@ const startAdornment = (
 // due to search not working reliably for single letter searches, only start at 2
 const MINIMUM_SEARCH_LENGTH = 2;
 
-export const ControlledSearch = ({ isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => {
-  const { classes } = useStyles();
+export const ControlledSearch = ({ className = '', isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => {
   const { control, watch } = useFormContext();
   const inputRef = useRef();
   const focusLockRef = useRef(true);
@@ -102,8 +92,8 @@ export const ControlledSearch = ({ isSearching, name = 'search', onSearch, place
       control={control}
       render={({ field }) => (
         <TextField
-          className={classes.root}
-          InputProps={adornments}
+          className={className}
+          slotProps={{ input: adornments }}
           onKeyUp={onTriggerSearch}
           onFocus={onFocus}
           placeholder={placeholder}
@@ -120,13 +110,13 @@ export const ControlledSearch = ({ isSearching, name = 'search', onSearch, place
 ControlledSearch.displayName = 'ConnectedSearch';
 
 const Search = props => {
-  const { searchTerm, onSearch, trigger } = props;
+  const { className = '', searchTerm, onSearch, trigger } = props;
   const methods = useForm({ mode: 'onChange', defaultValues: { search: searchTerm ?? '' } });
   const { handleSubmit } = methods;
   const onSubmit = useCallback(search => onSearch(search, !trigger), [onSearch, trigger]);
   return (
     <FormProvider {...methods}>
-      <form noValidate onSubmit={handleSubmit(({ search }) => onSearch(search, !trigger))}>
+      <form className={className} noValidate onSubmit={handleSubmit(({ search }) => onSearch(search, !trigger))}>
         <ControlledSearch {...props} onSearch={onSubmit} />
         <input className="hidden" type="submit" />
       </form>

frontend/src/js/common-ui/__snapshots__/DeviceNameInput.test.tsx.snap

@@ -19,6 +19,8 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
@@ -28,73 +30,30 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-0::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-0.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-0.Mui-error::before,
-.emotion-0.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-0::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-0:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-0:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-0:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-0:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-0.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-0::after {
-  border-bottom: 2px solid #337a87;
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-0:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-0.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-0:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-0:after {
-  border-bottom: 2px solid #337a87;
+.emotion-0.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-1 {
@@ -115,6 +74,8 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-1::-webkit-input-placeholder {
@@ -186,6 +147,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-1:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -341,11 +306,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div
-  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-0"
+  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-0"
 >
   <input
-    class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-1"
+    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-1"
     disabled=""
     id="a1-id-input"
     placeholder="a1..."
@@ -380,5 +373,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
       Edit
     </button>
   </div>
+  <fieldset
+    aria-hidden="true"
+    class="MuiOutlinedInput-notchedOutline emotion-6"
+  >
+    <legend
+      class="emotion-7"
+    >
+      <span
+        aria-hidden="true"
+        class="notranslate"
+      >
+        ​
+      </span>
+    </legend>
+  </fieldset>
 </div>
 `;