refactor: [M3-6788] - MUI v5 Migration - Components > TextField (#9314

)

* initial `TextField` refactor

* update storybook story

* rename `Props` ➡️ `TextFieldProps`

* clean up the mdx

* fix broken storybook build

* feedback @mjac0bs

* add some defaults

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/src/components/CopyableAndDownloadableTextField.tsx

@@ -4,7 +4,7 @@ import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import DownloadTooltip from 'src/components/DownloadTooltip';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import TextField, { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 
 const useStyles = makeStyles((theme: Theme) => ({
   removeDisabledStyles: {

packages/manager/src/components/CopyableTextField/CopyableTextField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { styled } from '@mui/material/styles';
-import TextField, { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 
 type CopyableTextFieldProps = TextFieldProps & {
   className?: string;

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { CircleProgress } from 'src/components/CircleProgress';
 import InputAdornment from 'src/components/core/InputAdornment';
 import { styled } from '@mui/material/styles';
-import TextField, { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 
 import usePrevious from 'src/hooks/usePrevious';
 

packages/manager/src/components/Drawer/Drawer.stories.mdx

@@ -2,7 +2,7 @@ import React from 'react';
 import Button from 'src/components/Button';
 import Typography from 'src/components/core/Typography';
 import ActionsPanel from '../ActionsPanel';
-import TextField from '../TextField';
+import { TextField } from '../TextField';
 import Drawer from './Drawer';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 

packages/manager/src/components/EditableEntityLabel/EditableInput.tsx

@@ -7,9 +7,8 @@ import Button from 'src/components/Button';
 import ClickAwayListener from 'src/components/core/ClickAwayListener';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import { TextFieldProps } from 'src/components/core/TextField';
 import Typography from 'src/components/core/Typography';
-import TextField from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 
 const useStyles = makeStyles((theme: Theme) => ({
   '@keyframes fadeIn': {
@@ -139,7 +138,7 @@ interface Props {
   loading: boolean;
 }
 
-type PassThroughProps = Props & TextFieldProps;
+type PassThroughProps = Props & Omit<TextFieldProps, 'label'>;
 
 type FinalProps = PassThroughProps;
 

packages/manager/src/components/EditableText/EditableText.tsx

@@ -7,10 +7,9 @@ import { Link } from 'react-router-dom';
 import Button from 'src/components/Button';
 import { H1Header } from 'src/components/H1Header/H1Header';
 import ClickAwayListener from 'src/components/core/ClickAwayListener';
-import { TextFieldProps } from 'src/components/core/TextField';
 import { fadeIn } from 'src/styles/keyframes';
 import { makeStyles } from 'tss-react/mui';
-import TextField from '../TextField';
+import { TextField, TextFieldProps } from '../TextField';
 
 const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
   (theme: Theme, _params, classes) => ({
@@ -111,7 +110,7 @@ interface Props {
   className?: string;
 }
 
-type PassThroughProps = Props & TextFieldProps;
+type PassThroughProps = Props & Omit<TextFieldProps, 'label'>;
 
 export const EditableText = (props: PassThroughProps) => {
   const { classes } = useStyles();

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx

@@ -3,7 +3,7 @@ import Minus from 'src/assets/icons/LKEminusSign.svg';
 import Plus from 'src/assets/icons/LKEplusSign.svg';
 import Button from 'src/components/Button';
 import { styled } from '@mui/material/styles';
-import TextField from 'src/components/TextField';
+import { TextField } from 'src/components/TextField';
 import Box from '@mui/material/Box';
 
 const sxTextFieldBase = {

packages/manager/src/components/EnhancedSelect/Select.tsx

@@ -9,7 +9,7 @@ import ReactSelect, {
 import CreatableSelect, {
   CreatableProps as CreatableSelectProps,
 } from 'react-select/creatable';
-import { Props as TextFieldProps } from 'src/components/TextField';
+import { TextFieldProps } from 'src/components/TextField';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 import { reactSelectStyles, useStyles } from './Select.styles';
 import { DropdownIndicator } from './components/DropdownIndicator';

packages/manager/src/components/EnhancedSelect/components/SelectControl.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlProps } from 'react-select';
 
-import TextField from 'src/components/TextField';
+import { TextField } from 'src/components/TextField';
 
 interface Props extends ControlProps<any, any> {}
 

packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Paper from 'src/components/core/Paper';
-import TextField, { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 import { Notice } from 'src/components/Notice/Notice';
 import { TagsInput, TagsInputProps } from 'src/components/TagsInput/TagsInput';
 import { useTheme } from '@mui/material/styles';

packages/manager/src/components/LinodeMultiSelect/LinodeMultiSelect.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import Autocomplete from '@mui/material/Autocomplete';
 import Popper from '@mui/material/Popper';
-import TextField from 'src/components/TextField';
+import { TextField } from 'src/components/TextField';
 
 export interface Props {
   allowedRegions?: string[];

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -10,7 +10,7 @@ import Typography from 'src/components/core/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import { Notice } from 'src/components/Notice/Notice';
-import TextField from 'src/components/TextField';
+import { TextField } from 'src/components/TextField';
 import { ExtendedIP } from 'src/utilities/ipUtils';
 
 const useStyles = makeStyles()((theme: Theme) => ({

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import TextField from '../TextField';
-import { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from '../TextField';
 
 export const HideShowText = (props: TextFieldProps) => {
   const [hidden, setHidden] = React.useState(true);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Grid from '@mui/material/Unstable_Grid2';
 import zxcvbn from 'zxcvbn';
 import { StrengthIndicator } from '../PasswordInput/StrengthIndicator';
-import { Props as TextFieldProps } from 'src/components/TextField';
+import { TextFieldProps } from 'src/components/TextField';
 import { HideShowText } from './HideShowText';
 
 interface Props extends TextFieldProps {

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

@@ -4,7 +4,7 @@ import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
 import Box from 'src/components/core/Box';
 import { Notice } from 'src/components/Notice/Notice';
-import TextField, { Props as TextFieldProps } from 'src/components/TextField';
+import { TextField, TextFieldProps } from 'src/components/TextField';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 
 interface Props extends TextFieldProps {

packages/manager/src/components/TextField.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs';
+import * as TextFieldStories from './TextField.stories';
+
+<Meta of={TextFieldStories} />
+
+# Text Field
+
+<Canvas of={TextFieldStories.Default} />
+
+### Overview
+
+Text fields allow users to enter text into a UI.
+
+### Usage
+
+- Input fields should be sized to the data being entered (ex. the entry for a street address should be wider than a zip code).
+- Ensure that the field can accommodate at least one more character than the maximum number to be entered.
+
+### Rules
+
+- Every input must have a descriptive label of what that field is.
+- Required fields should include the text “(Required)” as part of the input label.
+- If most fields are required, then indicate the optional fields with the text “(Optional)” instead.
+- Avoid long labels; use succinct, short and descriptive labels (a word or two) so users can quickly scan your form. <br/> Label text shouldn’t take up multiple lines.
+- Placeholder text is the text that users see before they interact with a field. It should be a useful guide to the input type and format <br/> Don’t make the user guess what format they should use for the field. Tell this information up front.
+
+### Best Practices
+
+- A single column form with input fields stacked sequentially is the easiest to understand and leads to the highest success rate. Input fields in multiple columns can be overlooked or add unnecessary visual clutter.
+- Grouping related inputs (ex. mailing address) under a subhead or rule can add meaning and make the form feel more manageable.
+- Avoid breaking a single form into multiple “papers” unless those sections are truly independent of each other.
+- Consider sizing the input field to the data being entered (ex. the field for a street address should be wider than the field for a zip code). Balance this goal with the visual benefits of fields of the same length. A somewhat outsized input that aligns with the fields above and below it might be the best choice.
+
+## Error
+
+### Overview
+
+Error messages are an indicator of system status: they let users know that a hurdle was encountered and give solutions to fix it. Users should not have to memorize instructions in order to fix the error.
+
+### Main Principles
+
+- Should be easy to notice and understand.
+- Should give solutions to how to fix the error.
+- Users should not have to memorize instructions in order to fix the error.
+- Long error messages for short text fields can extend beyond the text field.
+- When the user has finished filling in a field and clicks the submit button, an indicator should appear if the field contains an error. Use red to differentiate error fields from normal ones.
+
+<Canvas of={TextFieldStories.Error} />
+
+## Number
+
+### Overview
+
+Number Text Fields are used for strictly numerical input
+
+<Canvas of={TextFieldStories.Number} />
+
+## Component API
+
+<Canvas of={TextFieldStories.Default} />
+
+<Controls />