From 070732ec3225417fcbeb4be5e8329abad23c7a82 Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Mon, 26 Jun 2023 18:27:01 -0400 Subject: [PATCH] refactor: [M3-6788] - MUI v5 Migration - `Components > TextField` (#9314) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../CopyableAndDownloadableTextField.tsx | 2 +- .../CopyableTextField/CopyableTextField.tsx | 2 +- .../DebouncedSearchTextField.tsx | 2 +- .../src/components/Drawer/Drawer.stories.mdx | 2 +- .../EditableEntityLabel/EditableInput.tsx | 5 +- .../components/EditableText/EditableText.tsx | 5 +- .../EnhancedNumberInput.tsx | 2 +- .../src/components/EnhancedSelect/Select.tsx | 2 +- .../components/SelectControl.tsx | 2 +- .../LabelAndTagsPanel/LabelAndTagsPanel.tsx | 2 +- .../LinodeMultiSelect/LinodeMultiSelect.tsx | 2 +- .../MultipleIPInput/MultipleIPInput.tsx | 2 +- .../components/PasswordInput/HideShowText.tsx | 3 +- .../PasswordInput/PasswordInput.tsx | 2 +- .../SingleTextFieldForm.tsx | 2 +- packages/manager/src/components/TextField.mdx | 62 +++++ .../src/components/TextField.stories.mdx | 223 ------------------ .../src/components/TextField.stories.tsx | 39 +++ packages/manager/src/components/TextField.tsx | 104 +++++--- .../TypeToConfirm/TypeToConfirm.tsx | 4 +- .../manager/src/components/core/TextField.ts | 8 - .../features/Account/CloseAccountDialog.tsx | 2 +- .../PaymentDrawer/PaymentDrawer.tsx | 2 +- .../BillingSummary/PromoDialog.tsx | 2 +- .../UpdateContactInformationForm.tsx | 2 +- .../AddCreditCardForm.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.tsx | 2 +- .../features/Domains/CloneDomainDrawer.tsx | 2 +- .../Domains/CreateDomain/CreateDomain.tsx | 2 +- .../features/Domains/DomainRecordDrawer.tsx | 2 +- .../Domains/DomainZoneImportDrawer.tsx | 2 +- .../src/features/Domains/EditDomainDrawer.tsx | 2 +- .../TransferControls.tsx | 2 +- .../FirewallDetail/Rules/FirewallRuleForm.tsx | 2 +- .../FirewallLanding/CreateFirewallDrawer.tsx | 2 +- .../SupportSearchLanding.tsx | 2 +- .../src/features/Images/ImageUpload.tsx | 2 +- .../Images/ImagesCreate/CreateImageTab.tsx | 2 +- .../src/features/Images/ImagesDrawer.tsx | 2 +- .../CreateCluster/CreateCluster.tsx | 2 +- .../NodePoolsDisplay/AutoscalePoolDialog.tsx | 2 +- .../Linodes/LinodeSelect/LinodeSelect.tsx | 2 +- .../Linodes/LinodeSelect/LinodeSelectV2.tsx | 2 +- .../UserDataAccordion/UserDataAccordion.tsx | 2 +- .../LinodeBackup/CaptureSnapshot.tsx | 2 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 2 +- .../LinodeNetworking/EditIPRDNSDrawer.tsx | 2 +- .../LinodeNetworking/EditRangeRDNSDrawer.tsx | 2 +- .../LinodeNetworking/IPSharing.tsx | 2 +- .../LinodeSettings/AlertSection.tsx | 2 +- .../LinodeSettings/InterfaceSelect.tsx | 2 +- .../LinodeSettingsLabelPanel.tsx | 2 +- .../LinodeStorage/CreateDiskDrawer.tsx | 2 +- .../LinodeStorage/RenameDiskDrawer.tsx | 2 +- .../LinodeStorage/ResizeDiskDrawer.tsx | 2 +- .../DetailTabs/Processes/ProcessesLanding.tsx | 2 +- .../Managed/Contacts/ContactsDrawer.tsx | 2 +- .../Credentials/AddCredentialDrawer.tsx | 2 +- .../Credentials/UpdateCredentialDrawer.tsx | 2 +- .../src/features/Managed/MonitorDrawer.tsx | 2 +- .../Managed/SSHAccess/EditSSHAccessDrawer.tsx | 2 +- .../NodeBalancers/ConfigNodeIPSelect.tsx | 2 +- .../NodeBalancers/NodeBalancerActiveCheck.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 2 +- .../NodeBalancers/NodeBalancerCreate.tsx | 2 +- .../NodeBalancerSettings.tsx | 2 +- .../NodeBalancers/NodeBalancerSelect.tsx | 2 +- .../AccessKeyLanding/AccessKeyDrawer.tsx | 2 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 2 +- .../BucketDetail/CreateFolderDrawer.tsx | 2 +- .../BucketLanding/CreateBucketDrawer.tsx | 2 +- .../APITokens/CreateAPITokenDrawer.tsx | 2 +- .../Profile/APITokens/EditAPITokenDrawer.tsx | 2 +- .../PhoneVerification.styles.ts | 2 +- .../PhoneVerification/PhoneVerification.tsx | 2 +- .../SecurityQuestions/Answer.tsx | 2 +- .../TwoFactor/ConfirmToken.tsx | 2 +- .../Profile/LishSettings/LishSettings.tsx | 2 +- .../OAuthClients/CreateOAuthClientDrawer.tsx | 2 +- .../OAuthClients/EditOAuthClientDrawer.tsx | 2 +- .../Profile/SSHKeys/CreateSSHKeyDrawer.tsx | 4 +- .../Profile/SSHKeys/EditSSHKeyDrawer.tsx | 2 +- .../StackScriptForm/StackScriptForm.tsx | 2 +- .../FieldTypes/UserDefinedSelect.tsx | 2 +- .../FieldTypes/UserDefinedText.tsx | 2 +- .../features/Support/AttachFileListItem.tsx | 2 +- .../TabbedReply/TicketReply.tsx | 2 +- .../SupportTickets/SupportTicketDrawer.tsx | 2 +- .../SupportTicketSMTPFields.tsx | 2 +- .../src/features/Users/CreateUserDrawer.tsx | 2 +- .../src/features/Users/UserProfile.tsx | 2 +- .../Volumes/VolumeDrawer/LabelField.tsx | 2 +- .../Volumes/VolumeDrawer/SizeField.tsx | 2 +- .../Volumes/VolumeDrawer/VolumeSelect.tsx | 2 +- 95 files changed, 268 insertions(+), 359 deletions(-) create mode 100644 packages/manager/src/components/TextField.mdx delete mode 100644 packages/manager/src/components/TextField.stories.mdx create mode 100644 packages/manager/src/components/TextField.stories.tsx delete mode 100644 packages/manager/src/components/core/TextField.ts diff --git a/packages/manager/src/components/CopyableAndDownloadableTextField.tsx b/packages/manager/src/components/CopyableAndDownloadableTextField.tsx index 4eaf8e275d0..a04f7a85181 100644 --- a/packages/manager/src/components/CopyableAndDownloadableTextField.tsx +++ b/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: { diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx index 72d07c99093..3b2e7b2f677 100644 --- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx +++ b/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; diff --git a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx index 6fe9f043fdf..aadd5418a8e 100644 --- a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx +++ b/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'; diff --git a/packages/manager/src/components/Drawer/Drawer.stories.mdx b/packages/manager/src/components/Drawer/Drawer.stories.mdx index 3f78a76b07f..9d406150e60 100644 --- a/packages/manager/src/components/Drawer/Drawer.stories.mdx +++ b/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'; diff --git a/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx b/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx index ed13b8083cc..39bce5210a9 100644 --- a/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx +++ b/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; type FinalProps = PassThroughProps; diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index 5746d0820e4..3a3ccb686cf 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/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()( (theme: Theme, _params, classes) => ({ @@ -111,7 +110,7 @@ interface Props { className?: string; } -type PassThroughProps = Props & TextFieldProps; +type PassThroughProps = Props & Omit; export const EditableText = (props: PassThroughProps) => { const { classes } = useStyles(); diff --git a/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx b/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx index 4a7feb10ac3..4e70e271be4 100644 --- a/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx +++ b/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 = { diff --git a/packages/manager/src/components/EnhancedSelect/Select.tsx b/packages/manager/src/components/EnhancedSelect/Select.tsx index 774c68491fc..05fab2e913c 100644 --- a/packages/manager/src/components/EnhancedSelect/Select.tsx +++ b/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'; diff --git a/packages/manager/src/components/EnhancedSelect/components/SelectControl.tsx b/packages/manager/src/components/EnhancedSelect/components/SelectControl.tsx index 2c0f22a771c..f668683cd2d 100644 --- a/packages/manager/src/components/EnhancedSelect/components/SelectControl.tsx +++ b/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 {} diff --git a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx index 1915e4aa1cd..bb2977318ab 100644 --- a/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx +++ b/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'; diff --git a/packages/manager/src/components/LinodeMultiSelect/LinodeMultiSelect.tsx b/packages/manager/src/components/LinodeMultiSelect/LinodeMultiSelect.tsx index ef617c27934..4a3f4556779 100644 --- a/packages/manager/src/components/LinodeMultiSelect/LinodeMultiSelect.tsx +++ b/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[]; diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index 60818d52f22..85f9865b854 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/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) => ({ diff --git a/packages/manager/src/components/PasswordInput/HideShowText.tsx b/packages/manager/src/components/PasswordInput/HideShowText.tsx index ff504de8f53..3b3e1846349 100644 --- a/packages/manager/src/components/PasswordInput/HideShowText.tsx +++ b/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); diff --git a/packages/manager/src/components/PasswordInput/PasswordInput.tsx b/packages/manager/src/components/PasswordInput/PasswordInput.tsx index 1aafdb60df6..ad01e857bd9 100644 --- a/packages/manager/src/components/PasswordInput/PasswordInput.tsx +++ b/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 { diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx index 7dbdb4380a6..4991112aa19 100644 --- a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx +++ b/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 { diff --git a/packages/manager/src/components/TextField.mdx b/packages/manager/src/components/TextField.mdx new file mode 100644 index 00000000000..dbd4739c48b --- /dev/null +++ b/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'; + + + +# Text Field + + + +### 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.
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
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. + + + +## Number + +### Overview + +Number Text Fields are used for strictly numerical input + + + +## Component API + + + + \ No newline at end of file diff --git a/packages/manager/src/components/TextField.stories.mdx b/packages/manager/src/components/TextField.stories.mdx deleted file mode 100644 index 2725d81ba3d..00000000000 --- a/packages/manager/src/components/TextField.stories.mdx +++ /dev/null @@ -1,223 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import TextField from 'src/components/TextField'; - - - -# Text Field - -### Overview - ---- - -Text fields allow users to enter text into a UI. - -| Elements | Guidelines | -| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Input Field | The size of the field should be proportional to the expected user input. | -| Label | Avoid long labels; use succinct, short and descriptive labels (a word or two) so users can quickly scan your form.
Label text shouldn’t take up multiple lines. | -| Placeholder | Placeholder is the text that users see before they interact with a field. It should be a useful guide to the input type and format
Don’t make the user guess what format they should use for the field. Tell this information up front. | - -### 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. - -### 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. - -#### Error messages for short text fields: - -Long error messages for short text fields can extend beyond the text field. - -#### Inline validation - -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. - - - - - - - -### Component API - ---- - -export const Template = (args) => ( - -); - - - - {Template.bind({})} - - - - diff --git a/packages/manager/src/components/TextField.stories.tsx b/packages/manager/src/components/TextField.stories.tsx new file mode 100644 index 00000000000..5b0b0c38f44 --- /dev/null +++ b/packages/manager/src/components/TextField.stories.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import { TextField } from './TextField'; + +const meta: Meta = { + title: 'Components/TextField', + component: TextField, +}; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , + args: { + label: 'Label', + placeholder: 'Placeholder', + noMarginTop: true, + }, +}; + +export const Error: Story = { + render: (args) => , + args: { + label: 'Label for Error', + errorText: 'This input needs further attention!', + noMarginTop: true, + }, +}; + +export const Number: Story = { + render: (args) => , + args: { + type: 'number', + label: 'Label for Number', + noMarginTop: true, + }, +}; + +export default meta; diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 16eb94e7f9a..4f778babfb7 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -1,20 +1,21 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; -import classNames from 'classnames'; import { clamp } from 'ramda'; import * as React from 'react'; -import { compose } from 'recompose'; import { CircleProgress } from 'src/components/CircleProgress'; import FormHelperText from 'src/components/core/FormHelperText'; import InputAdornment from 'src/components/core/InputAdornment'; import InputLabel from 'src/components/core/InputLabel'; -import { makeStyles, WithTheme } from '@mui/styles'; +import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; -import TextField, { TextFieldProps } from 'src/components/core/TextField'; +import { + default as _TextField, + StandardTextFieldProps, +} from '@mui/material/TextField'; import { TooltipProps as _TooltipProps } from 'src/components/core/Tooltip'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import { convertToKebabCase } from 'src/utilities/convertToKebobCase'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ helpWrapper: { display: 'flex', alignItems: 'flex-end', @@ -64,25 +65,77 @@ const useStyles = makeStyles((theme: Theme) => ({ })); interface BaseProps { - className?: any; + /** + * className to apply to the underlying TextField component + */ + className?: string; + /** + * Data attributes are applied to the underlying TextField component for testing purposes + */ dataAttrs?: Record; + /** + * Applies editable styles + * @default false + */ editable?: boolean; + /** + * Adds error grouping to TextField + */ errorGroup?: string; + /** + * When defined, makes the input show an error state with the defined text + */ errorText?: string; + /** + * Makes the TextField use 100% of the available width + * @default false + */ expand?: boolean; + /** + * Makes the error text have the absolute positioning + * @default false + */ hasAbsoluteError?: boolean; + /** + * Placement of the `helperText` + * @default bottom + */ helperTextPosition?: 'top' | 'bottom'; + /** + * Hides the `label` + * @default false + */ hideLabel?: boolean; + /** + * Allows you to manually set an htmlFor input id. One will automatically be generated by the `label` if this is unset + */ inputId?: string; + /** + * Displays a loading spinner at the end of the Text Field + * @default false + */ loading?: boolean; /** - * The number amounts allowed in TextField and - * the "type" prop must also be set to "number" + * The maximum number allowed in TextField. The "type" prop must also be set to `number` */ max?: number; + /** + * The minimum number allowed in TextField. The "type" prop must also be set to `number` + */ min?: number; + /** + * Removes the default top margin (16px) + * @default false + */ noMarginTop?: boolean; + /** + * Adds `(optional)` to the Label + * @default false + */ optional?: boolean; + /** + * Adds `(required)` to the Label + */ required?: boolean; value?: Value; } @@ -97,20 +150,15 @@ interface ToolTipProps { tooltipOnMouseEnter?: React.MouseEventHandler; } -interface TextFieldPropsOverrides extends TextFieldProps { +interface TextFieldPropsOverrides extends StandardTextFieldProps { // We override this prop to make it required label: string; } -export type Props = BaseProps & - TextFieldProps & - TextFieldPropsOverrides & - ToolTipProps; +export type TextFieldProps = BaseProps & TextFieldPropsOverrides & ToolTipProps; -type CombinedProps = Props & WithTheme; - -export const LinodeTextField: React.FC = (props) => { - const classes = useStyles(); +export const TextField = (props: TextFieldProps) => { + const { classes, cx } = useStyles(); const { children, @@ -138,8 +186,6 @@ export const LinodeTextField: React.FC = (props) => { optional, required, SelectProps, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - theme, tooltipPosition, tooltipText, tooltipClasses, @@ -222,14 +268,14 @@ export const LinodeTextField: React.FC = (props) => { return (
= (props) => { )}
- = (props) => { ), - className: classNames( + className: cx( 'input', { [classes.expand]: expand, @@ -312,7 +358,7 @@ export const LinodeTextField: React.FC = (props) => { }, ...SelectProps, }} - className={classNames( + className={cx( { [classes.root]: true, [classes.helpWrapperTextField]: Boolean(tooltipText), @@ -322,7 +368,7 @@ export const LinodeTextField: React.FC = (props) => { type={type} > {children} - + {tooltipText && ( = (props) => {
{errorText && ( = (props) => {
); }; - -export default compose(React.memo)( - LinodeTextField -) as React.ComponentType; diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx index df967f14379..3c58536c121 100644 --- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx +++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import Link from 'src/components/Link'; -import TextField, { Props } from 'src/components/TextField'; +import { TextField, TextFieldProps } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; -export interface TypeToConfirmProps extends Omit { +export interface TypeToConfirmProps extends Omit { confirmationText?: JSX.Element | string; textFieldStyle?: React.CSSProperties; typographyStyle?: React.CSSProperties; diff --git a/packages/manager/src/components/core/TextField.ts b/packages/manager/src/components/core/TextField.ts deleted file mode 100644 index 83fba63d533..00000000000 --- a/packages/manager/src/components/core/TextField.ts +++ /dev/null @@ -1,8 +0,0 @@ -import TextField, { - StandardTextFieldProps as _TextFieldProps, -} from '@mui/material/TextField'; - -/* tslint:disable-next-line:no-empty-interface */ -export type TextFieldProps = _TextFieldProps; - -export default TextField; diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx index f879320be6c..8fb152fc207 100644 --- a/packages/manager/src/features/Account/CloseAccountDialog.tsx +++ b/packages/manager/src/features/Account/CloseAccountDialog.tsx @@ -10,7 +10,7 @@ import { Theme } from '@mui/material/styles'; import { Notice } from 'src/components/Notice/Notice'; import Typography from 'src/components/core/Typography'; import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useProfile } from 'src/queries/profile'; interface Props { diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index 0ceb9bf8bd0..4bdc1fc57a6 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -17,7 +17,7 @@ import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import { LinearProgress } from 'src/components/LinearProgress'; import { Notice } from 'src/components/Notice/Notice'; import { SupportLink } from 'src/components/SupportLink'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import PayPalErrorBoundary from 'src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalErrorBoundary'; import { useAccount } from 'src/queries/account'; import { queryKey } from 'src/queries/accountBilling'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx index caabbf4cf18..56ebbf2a84a 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx @@ -5,7 +5,7 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati import { makeStyles } from 'tss-react/mui'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { addPromotion } from '@linode/api-v4/lib'; import { queryKey } from 'src/queries/account'; diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx index c98865c9471..543c4be0de6 100644 --- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx @@ -7,7 +7,7 @@ import { makeStyles } from 'tss-react/mui'; import EnhancedSelect, { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getErrorMap } from 'src/utilities/errorUtils'; import { Country } from './types'; import { useAccount, useMutateAccount } from 'src/queries/account'; diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx index dab66eeae6b..77a56bccdff 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx @@ -3,7 +3,7 @@ import { useFormik, yupToFormErrors } from 'formik'; import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import { addPaymentMethod } from '@linode/api-v4/lib'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 723dca6934c..64e00a6ba5b 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -39,7 +39,7 @@ import { Notice } from 'src/components/Notice/Notice'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { Radio } from 'src/components/Radio/Radio'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { databaseEngineMap } from 'src/features/Databases/DatabaseLanding/DatabaseRow'; import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils'; import PlansPanel, { diff --git a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx index 9c0c7f9b13f..f2c4b5da342 100644 --- a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Drawer from 'src/components/Drawer/Drawer'; import RadioGroup from 'src/components/core/RadioGroup'; import FormControlLabel from 'src/components/core/FormControlLabel'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Radio } from 'src/components/Radio/Radio'; import ActionsPanel from 'src/components/ActionsPanel/ActionsPanel'; import Button from 'src/components/Button/Button'; diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx index a155440b308..150bb55e195 100644 --- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx +++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx @@ -22,7 +22,7 @@ import LandingHeader from 'src/components/LandingHeader'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import FormControlLabel from 'src/components/core/FormControlLabel'; import FormHelperText from 'src/components/core/FormHelperText'; import Paper from 'src/components/core/Paper'; diff --git a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx index 54bf05e6264..272288fef89 100644 --- a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx @@ -26,7 +26,7 @@ import Drawer from 'src/components/Drawer'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import { diff --git a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx index 6ac4f2fe73c..1d005e712a9 100644 --- a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx @@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { ImportZonePayload } from '@linode/api-v4/lib/domains'; import { useFormik } from 'formik'; import { useHistory } from 'react-router-dom'; diff --git a/packages/manager/src/features/Domains/EditDomainDrawer.tsx b/packages/manager/src/features/Domains/EditDomainDrawer.tsx index c08e2c14877..07c661ae099 100644 --- a/packages/manager/src/features/Domains/EditDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/EditDomainDrawer.tsx @@ -8,7 +8,7 @@ import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput' import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useFormik } from 'formik'; import { useUpdateDomainMutation } from 'src/queries/domains'; import { getErrorMap } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.tsx index b7cb7f86203..e67e3fbc1ef 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.tsx @@ -7,7 +7,7 @@ import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import ConfirmTransferDialog from './ConfirmTransferDialog'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx index 84792ae24e4..6cb78cd6ac5 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx @@ -6,7 +6,7 @@ import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput' import { Radio } from 'src/components/Radio/Radio'; import RadioGroup from 'src/components/core/RadioGroup'; import Select from 'src/components/EnhancedSelect'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { capitalize } from 'src/utilities/capitalize'; import { ipFieldPlaceholder } from 'src/utilities/ipUtils'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index 7d6c68145d3..9cf20f46a0c 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -6,7 +6,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { LinodeSelectV2 } from 'src/features/Linodes/LinodeSelect/LinodeSelectV2'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useCreateFirewall } from 'src/queries/firewalls'; diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx index 9c82996ddde..91ca5ba9c27 100644 --- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx +++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx @@ -9,7 +9,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import Box from '@mui/material/Box'; import { H1Header } from 'src/components/H1Header/H1Header'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { COMMUNITY_SEARCH_URL, DOCS_SEARCH_URL } from 'src/constants'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import withSearch, { AlgoliaState as AlgoliaProps } from '../SearchHOC'; diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx index de79f5cc1a0..d9362921df2 100644 --- a/packages/manager/src/features/Images/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImageUpload.tsx @@ -14,7 +14,7 @@ import Link from 'src/components/Link'; import { LinodeCLIModal } from 'src/components/LinodeCLIModal/LinodeCLIModal'; import { Notice } from 'src/components/Notice/Notice'; import { Prompt } from 'src/components/Prompt/Prompt'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Paper from 'src/components/core/Paper'; import Typography from 'src/components/core/Typography'; import { useMetadataCustomerTag } from 'src/features/Images/utils'; diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx index 0a819de40d1..7b9b6a7ad26 100644 --- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx @@ -13,7 +13,7 @@ import Paper from 'src/components/core/Paper'; import Typography from 'src/components/core/Typography'; import Link from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { resetEventsPolling } from 'src/eventsPolling'; import { useMetadataCustomerTag } from 'src/features/Images/utils'; import DiskSelect from 'src/features/Linodes/DiskSelect'; diff --git a/packages/manager/src/features/Images/ImagesDrawer.tsx b/packages/manager/src/features/Images/ImagesDrawer.tsx index 5a1a5b2f32a..66ee69d82ad 100644 --- a/packages/manager/src/features/Images/ImagesDrawer.tsx +++ b/packages/manager/src/features/Images/ImagesDrawer.tsx @@ -13,7 +13,7 @@ import Typography from 'src/components/core/Typography'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; import SectionErrorBoundary from 'src/components/SectionErrorBoundary'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { IMAGE_DEFAULT_LIMIT } from 'src/constants'; import { resetEventsPolling } from 'src/eventsPolling'; import DiskSelect from 'src/features/Linodes/DiskSelect'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 96a4bf4e5ca..7af5172d471 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -18,7 +18,7 @@ import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelec import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Notice } from 'src/components/Notice/Notice'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { reportAgreementSigningError, useMutateAccountAgreements, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx index 16a0902a284..781138bb98f 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx @@ -12,7 +12,7 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati import Grid from '@mui/material/Unstable_Grid2'; import Link from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle'; import { AutoscaleSettings, KubeNodePoolResponse } from '@linode/api-v4'; import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx b/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx index a0373aa1cb9..a211651a71c 100644 --- a/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx @@ -9,7 +9,7 @@ import EnhancedSelect, { Item, } from 'src/components/EnhancedSelect/Select'; import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard'; -import { Props as TextFieldProps } from 'src/components/TextField'; +import { TextFieldProps } from 'src/components/TextField'; import withLinodes from 'src/containers/withLinodes.container'; import { useReduxLoad } from 'src/hooks/useReduxLoad'; import { useRegionsQuery } from 'src/queries/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelectV2.tsx b/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelectV2.tsx index 2c0ef9275fc..26a1bcb1f32 100644 --- a/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelectV2.tsx +++ b/packages/manager/src/features/Linodes/LinodeSelect/LinodeSelectV2.tsx @@ -9,7 +9,7 @@ import CloseIcon from '@mui/icons-material/Close'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import { Autocomplete, Box } from '@mui/material'; import React from 'react'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useInfiniteLinodesQuery } from 'src/queries/linodes/linodes'; import { mapIdsToLinodes } from 'src/utilities/mapIdsToLinodes'; import { CustomPopper, RemoveIcon, SelectedIcon } from './LinodeSelect.styles'; diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx index b22494e1044..89b6c576bca 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx @@ -3,7 +3,7 @@ import Box from 'src/components/core/Box'; import Accordion from 'src/components/Accordion'; import Link from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { UserDataAccordionHeading } from './UserDataAccordionHeading'; import { useExpandIconStyles } from './UserDataAccordion.styles'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx index b1ec29b6dfd..95fb7c6ed67 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx @@ -8,7 +8,7 @@ import { makeStyles } from 'tss-react/mui'; import { useLinodeBackupSnapshotMutation } from 'src/queries/linodes/backups'; import { useSnackbar } from 'notistack'; import { useFormik } from 'formik'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { CaptureSnapshotConfirmationDialog } from './CaptureSnapshotConfirmationDialog'; import Button from 'src/components/Button'; import { resetEventsPolling } from 'src/eventsPolling'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index b0dada89c08..e71693dddad 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -29,7 +29,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle'; import DeviceSelection from 'src/features/Linodes/LinodesDetail/LinodeRescue/DeviceSelection'; import { titlecase } from 'src/features/Linodes/presentation'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx index bbc5805089f..1eae2da143b 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx @@ -4,7 +4,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; import Drawer from 'src/components/Drawer'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getErrorMap } from 'src/utilities/errorUtils'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx index d60424a0efa..6168164005d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx @@ -6,7 +6,7 @@ import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Drawer from 'src/components/Drawer'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getErrorMap } from 'src/utilities/errorUtils'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx index c9a18c547d5..7d894b0b82a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx @@ -15,7 +15,7 @@ import { Dialog } from 'src/components/Dialog/Dialog'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import useFlags from 'src/hooks/useFlags'; import { API_MAX_PAGE_SIZE } from 'src/constants'; import { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx index 53a59a89731..b1bbe20be3d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx @@ -5,7 +5,7 @@ import InputAdornment from 'src/components/core/InputAdornment'; import Typography from 'src/components/core/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import Box from '@mui/material/Box'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle'; import { useTheme } from '@mui/material/styles'; import { fadeIn } from 'src/styles/keyframes'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx index f1da5641e6f..35684ee2ac7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx @@ -8,7 +8,7 @@ import { makeStyles } from '@mui/styles'; import { Theme, useTheme } from '@mui/material/styles'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useVlansQuery } from 'src/queries/vlans'; import { sendLinodeCreateDocsEvent } from 'src/utilities/analytics'; import useMediaQuery from '@mui/material/useMediaQuery'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx index 651cb86fa12..10522e6862a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx @@ -5,7 +5,7 @@ import Accordion from 'src/components/Accordion'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getErrorMap } from 'src/utilities/errorUtils'; import { useLinodeQuery, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx index cc79422ecee..8baccf810b0 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CreateDiskDrawer.tsx @@ -8,7 +8,7 @@ import Drawer from 'src/components/Drawer'; import { Item } from 'src/components/EnhancedSelect/Select'; import { ModeSelect, Mode } from 'src/components/ModeSelect/ModeSelect'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import FormHelperText from 'src/components/core/FormHelperText'; import InputAdornment from 'src/components/core/InputAdornment'; import MenuItem from 'src/components/core/MenuItem'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/RenameDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/RenameDiskDrawer.tsx index 515b304218d..2e2582cc524 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/RenameDiskDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/RenameDiskDrawer.tsx @@ -5,7 +5,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { object, string } from 'yup'; import { useLinodeDiskUpdateMutation } from 'src/queries/linodes/disks'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx index 974f4e2652e..9ecd71a31b7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx @@ -11,7 +11,7 @@ import { Theme } from '@mui/material/styles'; import Drawer from 'src/components/Drawer'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { TextTooltip } from 'src/components/TextTooltip'; import { sendEvent } from 'src/utilities/analytics'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Processes/ProcessesLanding.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Processes/ProcessesLanding.tsx index d1800938e9c..4b02a43be58 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Processes/ProcessesLanding.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Processes/ProcessesLanding.tsx @@ -5,7 +5,7 @@ import Box from 'src/components/core/Box'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Grid from 'src/components/Grid'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { LongviewProcesses, WithStartAndEnd, diff --git a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx index 4205239e190..d1606e87829 100644 --- a/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx +++ b/packages/manager/src/features/Managed/Contacts/ContactsDrawer.tsx @@ -9,7 +9,7 @@ import Drawer from 'src/components/Drawer'; import Select from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useCreateContactMutation, useUpdateContactMutation, diff --git a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx index bc47212e7a5..67900b0b16a 100644 --- a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx @@ -6,7 +6,7 @@ import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; import SuspenseLoader from 'src/components/SuspenseLoader'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { creationSchema } from './credential.schema'; const PasswordInput = React.lazy( diff --git a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx index f40f4da28fb..7433a1f0444 100644 --- a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx @@ -6,7 +6,7 @@ import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; import SuspenseLoader from 'src/components/SuspenseLoader'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { updateLabelSchema, updatePasswordSchema } from './credential.schema'; const PasswordInput = React.lazy( diff --git a/packages/manager/src/features/Managed/MonitorDrawer.tsx b/packages/manager/src/features/Managed/MonitorDrawer.tsx index 7d38d2b92de..f93c9e53441 100644 --- a/packages/manager/src/features/Managed/MonitorDrawer.tsx +++ b/packages/manager/src/features/Managed/MonitorDrawer.tsx @@ -15,7 +15,7 @@ import Drawer from 'src/components/Drawer'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; export interface Props { mode: 'create' | 'edit'; diff --git a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx index 8b49292adef..771aac68341 100644 --- a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx @@ -11,7 +11,7 @@ import Drawer from 'src/components/Drawer'; import Grid from '@mui/material/Unstable_Grid2'; import { IPSelect } from 'src/components/IPSelect/IPSelect'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle'; import { handleFieldErrors, diff --git a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx index 0aed6f1563c..409835af650 100644 --- a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx +++ b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import LinodeSelect from 'src/features/Linodes/LinodeSelect'; import { Linode } from '@linode/api-v4/lib/linodes'; import { privateIPRegex } from 'src/utilities/ipUtils'; -import type { Props as TextFieldProps } from 'src/components/TextField'; +import type { TextFieldProps } from 'src/components/TextField'; interface ConfigNodeIPSelectProps { selectedRegion?: string; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx index 95f4f42d0bc..8bc4984e2cf 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx @@ -3,7 +3,7 @@ import FormHelperText from 'src/components/core/FormHelperText'; import Grid from '@mui/material/Unstable_Grid2'; import InputAdornment from 'src/components/core/InputAdornment'; import Select from 'src/components/EnhancedSelect/Select'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { setErrorMap } from './utils'; import type { Item } from 'src/components/EnhancedSelect'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index 405d8b6a681..c436ac46d0f 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -4,7 +4,7 @@ import Button from 'src/components/Button'; import Divider from 'src/components/core/Divider'; import Grid from '@mui/material/Unstable_Grid2'; import MenuItem from 'src/components/core/MenuItem'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { Chip } from 'src/components/core/Chip'; import { ConfigNodeIPSelect } from './ConfigNodeIPSelect'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx index 7432c2a05c4..e0c8ebb869b 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -6,7 +6,7 @@ import FormHelperText from 'src/components/core/FormHelperText'; import Grid from '@mui/material/Unstable_Grid2'; import Link from 'src/components/Link'; import Select from 'src/components/EnhancedSelect/Select'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { ActiveCheck } from './NodeBalancerActiveCheck'; import { NodeBalancerConfigNode } from './NodeBalancerConfigNode'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index 1551fb74226..01d0cdf12d7 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -8,7 +8,7 @@ import Box from 'src/components/core/Box'; import Accordion from 'src/components/Accordion'; import Paper from 'src/components/core/Paper'; import LandingHeader from 'src/components/LandingHeader'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel'; import getAPIErrorFor from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx index 666276bd650..2afcd7fa584 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx @@ -3,7 +3,7 @@ import Accordion from 'src/components/Accordion'; import Button from 'src/components/Button'; import FormHelperText from 'src/components/core/FormHelperText'; import InputAdornment from 'src/components/core/InputAdornment'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useTheme } from '@mui/material'; import { useParams } from 'react-router-dom'; import { NodeBalancerDeleteDialog } from '../NodeBalancerDeleteDialog'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx index 5365b41dc56..5fe0ffa27fb 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import TextField, { Props as TextFieldProps } from 'src/components/TextField'; +import { TextField, TextFieldProps } from 'src/components/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import { useInfiniteNodebalancersQuery } from 'src/queries/nodebalancers'; import { NodeBalancer } from '@linode/api-v4'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx index 02d31a02754..2834f628461 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { CircleProgress } from 'src/components/CircleProgress'; import { confirmObjectStorage } from '../utilities'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index d8ad2ff281c..8fcc10c68a8 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -5,7 +5,7 @@ import Paper from 'src/components/core/Paper'; import Typography from 'src/components/core/Typography'; import ExternalLink from 'src/components/ExternalLink'; import Grid from '@mui/material/Unstable_Grid2'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/CreateFolderDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/CreateFolderDrawer.tsx index 9e5f329ffb0..b1c7173c4e1 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/CreateFolderDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/CreateFolderDrawer.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import Drawer from 'src/components/Drawer/Drawer'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import ActionsPanel from 'src/components/ActionsPanel'; import { useFormik } from 'formik'; import { useCreateObjectUrlMutation } from 'src/queries/objectStorage'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx index b0a05eccb3e..8f2562e4eb8 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx @@ -5,7 +5,7 @@ import ClusterSelect from './ClusterSelect'; import Drawer from 'src/components/Drawer'; import EnableObjectStorageModal from '../EnableObjectStorageModal'; import EUAgreementCheckbox from 'src/features/Account/Agreements/EUAgreementCheckbox'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getErrorMap } from 'src/utilities/errorUtils'; import { isEURegion } from 'src/utilities/formatRegion'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx index f375dc925b8..2ade2686d39 100644 --- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx @@ -5,7 +5,7 @@ import Drawer from 'src/components/Drawer'; import FormControl from 'src/components/core/FormControl'; import FormHelperText from 'src/components/core/FormHelperText'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { DateTime } from 'luxon'; import { getErrorMap } from 'src/utilities/errorUtils'; import { ISO_DATETIME_NO_TZ_FORMAT } from 'src/constants'; diff --git a/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx index b3a858fb7d5..78e18b3a1c5 100644 --- a/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx @@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Token, TokenRequest } from '@linode/api-v4/lib/profile/types'; import { useFormik } from 'formik'; import { useUpdatePersonalAccessTokenMutation } from 'src/queries/tokens'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts index 4ab5c64217a..06f8f673f69 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts +++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts @@ -1,7 +1,7 @@ import Box from 'src/components/core/Box'; import FormHelperText from 'src/components/core/FormHelperText'; import Select from 'src/components/EnhancedSelect/Select'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { styled } from '@mui/material/styles'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx index 0a130dab28e..59d2a29b10d 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from 'src/components/core/Box'; import Button from 'src/components/Button'; import InputAdornment from 'src/components/core/InputAdornment'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { APIError } from '@linode/api-v4/lib/types'; import { countries } from './countries'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Answer.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Answer.tsx index 9e560f473e9..ca33b363e54 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Answer.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Answer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { SecurityQuestion } from '@linode/api-v4/lib/profile'; interface Props { diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx index dc5c9cffdcf..a5cccbb8ed1 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from 'src/components/core/Box'; import Button from 'src/components/Button'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { Notice } from 'src/components/Notice/Notice'; import { styled } from '@mui/material/styles'; diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx index 400afc577e4..2c185589f42 100644 --- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx +++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx @@ -7,7 +7,7 @@ import getAPIErrorFor from 'src/utilities/getAPIErrorFor'; import Paper from 'src/components/core/Paper'; import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView'; import Select, { Item } from 'src/components/EnhancedSelect/Select'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { APIError } from '@linode/api-v4/lib/types'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; diff --git a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx index 66356dc2d0b..2b4068aa46d 100644 --- a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx @@ -6,7 +6,7 @@ import FormControl from 'src/components/core/FormControl'; import FormControlLabel from 'src/components/core/FormControlLabel'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import { useFormik } from 'formik'; import { useCreateOAuthClientMutation } from 'src/queries/accountOAuth'; diff --git a/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx index 4fc36cb98d8..02d1d9ea6a0 100644 --- a/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx @@ -6,7 +6,7 @@ import FormControl from 'src/components/core/FormControl'; import FormControlLabel from 'src/components/core/FormControlLabel'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import { useFormik } from 'formik'; import { useUpdateOAuthClientMutation } from 'src/queries/accountOAuth'; diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx index 3ed5ece6494..ee0e6a179cd 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; +import { Notice } from 'src/components/Notice/Notice'; +import { TextField } from 'src/components/TextField'; import getAPIErrorFor from 'src/utilities/getAPIErrorFor'; import Link from 'src/components/Link'; -import TextField from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; import { Code } from 'src/components/Code/Code'; -import { Notice } from 'src/components/Notice/Notice'; import { useCreateSSHKeyMutation } from 'src/queries/profile'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx index 8184b8c679f..244664b30f4 100644 --- a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx @@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import getAPIErrorFor from 'src/utilities/getAPIErrorFor'; import { useUpdateSSHKeyMutation } from 'src/queries/profile'; import { useFormik } from 'formik'; diff --git a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx index 32582a78eb3..6381e38a0e9 100644 --- a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx @@ -11,7 +11,7 @@ import Typography from 'src/components/core/Typography'; import { Item } from 'src/components/EnhancedSelect/Select'; import Grid from '@mui/material/Unstable_Grid2'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import ImageSelect from 'src/features/Images/ImageSelect'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import { imageToItem } from 'src/utilities/imageToItem'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx index c66997c289e..6e13afae179 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx @@ -7,7 +7,7 @@ import { Theme } from '@mui/material/styles'; import MenuItem from 'src/components/MenuItem'; import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; const useStyles = makeStyles((theme: Theme) => ({ root: { diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx index 579823f12bd..7dc91f50463 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import AccessPanel from 'src/components/AccessPanel/AccessPanel'; import { createStyles, withStyles, WithStyles } from '@mui/styles'; import RenderGuard from 'src/components/RenderGuard'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; type ClassNames = 'accessPanel' | 'marginTop'; diff --git a/packages/manager/src/features/Support/AttachFileListItem.tsx b/packages/manager/src/features/Support/AttachFileListItem.tsx index a98d8ceeaa1..0b68bb0ca01 100644 --- a/packages/manager/src/features/Support/AttachFileListItem.tsx +++ b/packages/manager/src/features/Support/AttachFileListItem.tsx @@ -7,7 +7,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { LinearProgress } from 'src/components/LinearProgress'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { FileAttachment } from './index'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TicketReply.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TicketReply.tsx index 28bc3e575b2..24d68a5156d 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TicketReply.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TicketReply.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { createStyles, withStyles, WithStyles } from '@mui/styles'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; type ClassNames = 'replyField'; diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDrawer.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDrawer.tsx index d7a9fa6f8d5..d973a58ae29 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDrawer.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDrawer.tsx @@ -19,7 +19,7 @@ import Select, { Item } from 'src/components/EnhancedSelect/Select'; import { Notice } from 'src/components/Notice/Notice'; import SectionErrorBoundary from 'src/components/SectionErrorBoundary'; import { EntityForTicketDetails } from 'src/components/SupportLink/SupportLink'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import useEntities, { Entity } from 'src/hooks/useEntities'; import { useAccount } from 'src/queries/account'; import { useAllDatabasesQuery } from 'src/queries/databases'; diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketSMTPFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketSMTPFields.tsx index 644061b40d7..2b4c16c5774 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketSMTPFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketSMTPFields.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; export interface Props { handleChange: (e: React.ChangeEvent) => void; diff --git a/packages/manager/src/features/Users/CreateUserDrawer.tsx b/packages/manager/src/features/Users/CreateUserDrawer.tsx index e5e7d3ecfa1..41c392dddac 100644 --- a/packages/manager/src/features/Users/CreateUserDrawer.tsx +++ b/packages/manager/src/features/Users/CreateUserDrawer.tsx @@ -7,7 +7,7 @@ import Button from 'src/components/Button'; import FormControlLabel from 'src/components/core/FormControlLabel'; import Drawer from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Users/UserProfile.tsx b/packages/manager/src/features/Users/UserProfile.tsx index fa959fc9312..0dc2dd4e6e6 100644 --- a/packages/manager/src/features/Users/UserProfile.tsx +++ b/packages/manager/src/features/Users/UserProfile.tsx @@ -13,7 +13,7 @@ import Typography from 'src/components/core/Typography'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; 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 { useProfile } from 'src/queries/profile'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LabelField.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LabelField.tsx index 2ae27aff03c..6df30f0549d 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LabelField.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LabelField.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { TooltipProps } from 'src/components/core/Tooltip'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; interface Props { onBlur: (e: any) => void; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx index 3b4797e0ff5..488eacd85f7 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx @@ -3,7 +3,7 @@ import FormHelperText from 'src/components/core/FormHelperText'; import InputAdornment from 'src/components/core/InputAdornment'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { MAX_VOLUME_SIZE } from 'src/constants'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/VolumeSelect.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/VolumeSelect.tsx index a9b709c0dc3..1e954f267f6 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/VolumeSelect.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/VolumeSelect.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Autocomplete from '@mui/material/Autocomplete'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { useInfiniteVolumesQuery } from 'src/queries/volumes'; interface Props {