diff --git a/packages/manager/.changeset/pr-9292-tech-stories-1687376650053.md b/packages/manager/.changeset/pr-9292-tech-stories-1687376650053.md new file mode 100644 index 00000000000..0a75419bec3 --- /dev/null +++ b/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)) diff --git a/packages/manager/src/components/Button/Button.tsx b/packages/manager/src/components/Button/Button.tsx index 75b670e242b..920986ad1ec 100644 --- a/packages/manager/src/components/Button/Button.tsx +++ b/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; /** Reduce the padding on the x-axis */ compactX?: boolean; /** Reduce the padding on the y-axis */ diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.test.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.test.tsx index b61d7312b7c..4d0e27f38ea 100644 --- a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.test.tsx +++ b/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', diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx index 0894b34b72a..7dbdb4380a6 100644 --- a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx +++ b/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; initialValue?: string; - disabled?: boolean; - tooltipText?: string; successMessage?: string; errorMessage?: string; successCallback?: () => void; } -export const SingleTextFieldForm: React.FC = ( - props -) => { - const classes = useStyles(); - +export const SingleTextFieldForm = React.memo((props: Props) => { const { label, fieldName, @@ -96,11 +67,20 @@ export const SingleTextFieldForm: React.FC = ( ({ + [theme.breakpoints.down('md')]: { + flexDirection: 'column', + }, + })} > ({ + 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 = ( />