refactor: [M3-6391] - MUI v5 Migration - Components > SingleTextFieldForm

packages/manager/.changeset/pr-9292-tech-stories-1687376650053.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - Components > SingleTextFieldForm ([#9292](https://github.com/linode/manager/pull/9292))

packages/manager/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Reload from 'src/assets/icons/reload.svg';
 import _Button, { ButtonProps } from '@mui/material/Button';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
-import { useTheme, styled } from '@mui/material/styles';
+import { useTheme, styled, Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import { isPropValid } from '../../utilities/isPropValid';
 import { rotate360 } from '../../styles/keyframes';
@@ -15,7 +15,7 @@ export interface Props extends ButtonProps {
   /** Additional css class to pass to the component */
   className?: string;
   /** The `sx` prop can be either object or function */
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
   /** Reduce the padding on the x-axis */
   compactX?: boolean;
   /** Reduce the padding on the y-axis */

packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.test.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import SingleTextFieldForm, { Props } from './SingleTextFieldForm';
+import { SingleTextFieldForm } from './SingleTextFieldForm';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('SingleTextFieldForm', () => {
-  const props: Props = {
+  const props = {
     label: 'Username',
     submitForm: jest.fn(() => Promise.resolve()),
     initialValue: 'jane-doe',

packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx

@@ -3,49 +3,20 @@ import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
 import Box from 'src/components/core/Box';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
 import { Notice } from 'src/components/Notice/Notice';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    [theme.breakpoints.down('md')]: {
-      flexDirection: 'column',
-    },
-  },
-  input: {
-    minWidth: 415,
-    [theme.breakpoints.down('md')]: {
-      minWidth: 'auto',
-    },
-  },
-  button: {
-    minWidth: 180,
-    [theme.breakpoints.up('md')]: {
-      marginTop: 16,
-    },
-  },
-}));
-
-export interface Props {
-  label: string;
+interface Props extends TextFieldProps {
   fieldName?: string;
   submitForm: (value: string) => Promise<any>;
   initialValue?: string;
-  disabled?: boolean;
-  tooltipText?: string;
   successMessage?: string;
   errorMessage?: string;
   successCallback?: () => void;
 }
 
-export const SingleTextFieldForm: React.FC<Props & TextFieldProps> = (
-  props
-) => {
-  const classes = useStyles();
-
+export const SingleTextFieldForm = React.memo((props: Props) => {
   const {
     label,
     fieldName,
@@ -96,11 +67,20 @@ export const SingleTextFieldForm: React.FC<Props & TextFieldProps> = (
       <Box
         display="flex"
         justifyContent="space-between"
-        className={classes.root}
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            flexDirection: 'column',
+          },
+        })}
       >
         <TextField
           {...textFieldProps}
-          className={classes.input}
+          sx={(theme) => ({
+            minWidth: 415,
+            [theme.breakpoints.down('md')]: {
+              minWidth: 'auto',
+            },
+          })}
           label={label}
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -110,7 +90,12 @@ export const SingleTextFieldForm: React.FC<Props & TextFieldProps> = (
         />
         <ActionsPanel>
           <Button
-            className={classes.button}
+            sx={(theme) => ({
+              minWidth: 180,
+              [theme.breakpoints.up('md')]: {
+                marginTop: 2,
+              },
+            })}
             buttonType="primary"
             onClick={handleSubmit}
             disabled={disabled || value === initialValue}
@@ -133,6 +118,4 @@ export const SingleTextFieldForm: React.FC<Props & TextFieldProps> = (
       ) : null}
     </>
   );
-};
-
-export default React.memo(SingleTextFieldForm);
+});

packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx

@@ -132,7 +132,7 @@ export const DisplaySettings = () => {
         inputRef={emailRef}
         type="email"
       />
-      <Divider spacingTop={24} spacingBottom={16} />
+      <Divider spacingTop={24} spacingBottom={8} />
       <TimezoneForm loggedInAsCustomer={loggedInAsCustomer} />
     </Paper>
   );