From 27a58257a26805e18754731bb917b5a0b1fdc9be Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 10:56:00 -0400 Subject: [PATCH 1/7] initial `TextField` refactor --- .../CopyableAndDownloadableTextField.tsx | 2 +- .../CopyableTextField/CopyableTextField.tsx | 2 +- .../DebouncedSearchTextField.tsx | 2 +- .../EditableEntityLabel/EditableInput.tsx | 5 +- .../components/EditableText/EditableText.tsx | 5 +- .../EnhancedNumberInput.tsx | 2 +- .../components/SelectControl.tsx | 2 +- .../LabelAndTagsPanel/LabelAndTagsPanel.tsx | 2 +- .../LinodeMultiSelect/LinodeMultiSelect.tsx | 2 +- .../MultipleIPInput/MultipleIPInput.tsx | 2 +- .../components/PasswordInput/HideShowText.tsx | 3 +- .../SingleTextFieldForm.tsx | 2 +- .../src/components/TextField.stories.mdx | 2 +- packages/manager/src/components/TextField.tsx | 48 ++++++++----------- .../TypeToConfirm/TypeToConfirm.tsx | 2 +- .../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/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/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 | 2 +- .../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 +- 88 files changed, 107 insertions(+), 128 deletions(-) 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..ea2b2e7a0ea 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, Props as 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..389c4e27925 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, Props as 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..fd0e894c671 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, Props as TextFieldProps } from 'src/components/TextField'; import usePrevious from 'src/hooks/usePrevious'; diff --git a/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx b/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx index ed13b8083cc..a6d193edde1 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, Props as 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..2bc50049912 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, Props as 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/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..94b19f64acf 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, Props as 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..64683d18308 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, Props as TextFieldProps } from '../TextField'; export const HideShowText = (props: TextFieldProps) => { const [hidden, setHidden] = React.useState(true); diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx index 7dbdb4380a6..cefa401f9ca 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, Props as TextFieldProps } from 'src/components/TextField'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; interface Props extends TextFieldProps { diff --git a/packages/manager/src/components/TextField.stories.mdx b/packages/manager/src/components/TextField.stories.mdx index 2725d81ba3d..bac2d6b2d61 100644 --- a/packages/manager/src/components/TextField.stories.mdx +++ b/packages/manager/src/components/TextField.stories.mdx @@ -1,5 +1,5 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import TextField from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 16eb94e7f9a..275912c762a 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,7 +65,7 @@ const useStyles = makeStyles((theme: Theme) => ({ })); interface BaseProps { - className?: any; + className?: string; dataAttrs?: Record; editable?: boolean; errorGroup?: string; @@ -97,20 +98,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 Props = BaseProps & TextFieldPropsOverrides & ToolTipProps; -type CombinedProps = Props & WithTheme; - -export const LinodeTextField: React.FC = (props) => { - const classes = useStyles(); +export const TextField = (props: Props) => { + const { classes, cx } = useStyles(); const { children, @@ -138,8 +134,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 +216,14 @@ export const LinodeTextField: React.FC = (props) => { return (
= (props) => { )}
- = (props) => { ), - className: classNames( + className: cx( 'input', { [classes.expand]: expand, @@ -312,7 +306,7 @@ export const LinodeTextField: React.FC = (props) => { }, ...SelectProps, }} - className={classNames( + className={cx( { [classes.root]: true, [classes.helpWrapperTextField]: Boolean(tooltipText), @@ -322,7 +316,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..532ec889c5b 100644 --- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx +++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Link from 'src/components/Link'; -import TextField, { Props } from 'src/components/TextField'; +import { TextField, Props } from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; export interface TypeToConfirmProps extends Omit { 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 f3fee96f052..4ba7547e00e 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/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 c10c590fcb4..6c9cdc54432 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/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 87ecc1b056a..5eacdcb4ee1 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -5,7 +5,7 @@ import Chip from 'src/components/core/Chip'; 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 { ConfigNodeIPSelect } from './ConfigNodeIPSelect'; import { getErrorMap } from 'src/utilities/errorUtils'; 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..8e8b580aa5e 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, Props as 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 bae6261d462..4c0ad03d3e7 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.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 { useCreateSSHKeyMutation } from 'src/queries/profile'; import { useFormik } from 'formik'; 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 { From e53fb4038590b3ef1b796683ce1d66bb3b038bf5 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 12:01:07 -0400 Subject: [PATCH 2/7] update storybook story --- packages/manager/src/components/TextField.mdx | 68 ++++++ .../src/components/TextField.stories.mdx | 223 ------------------ .../src/components/TextField.stories.tsx | 39 +++ packages/manager/src/components/TextField.tsx | 48 +++- 4 files changed, 153 insertions(+), 225 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 diff --git a/packages/manager/src/components/TextField.mdx b/packages/manager/src/components/TextField.mdx new file mode 100644 index 00000000000..5c8cab7d692 --- /dev/null +++ b/packages/manager/src/components/TextField.mdx @@ -0,0 +1,68 @@ +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. +- The size of the field should be proportional to the expected user input. +- 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 bac2d6b2d61..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 275912c762a..132f79282fe 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -65,25 +65,69 @@ const useStyles = makeStyles()((theme: Theme) => ({ })); interface BaseProps { + /** + * 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 + */ 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 + */ expand?: boolean; + /** + * Makes the error text have the absolute positioning + */ hasAbsoluteError?: boolean; + /** + * Placement of the `helperText` + */ helperTextPosition?: 'top' | 'bottom'; + /** + * Hides the `label` + */ hideLabel?: boolean; + /** + * Allows you to manually set an htmlFor input id. One will automaticly be generated by the `label` if this is unset + */ inputId?: string; + /** + * Displays a loading spinner at the end of the Text Field + */ 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; + /** + * Removed the default top margin (16px) + */ noMarginTop?: boolean; + /** + * Adds `(optional)` to the Label + */ optional?: boolean; + /** + * Adds `(required)` to the Label + */ required?: boolean; value?: Value; } From e12d5ae749fa08b24367374b50379d1cf1ff1d35 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 12:04:48 -0400 Subject: [PATCH 3/7] =?UTF-8?q?rename=20`Props`=20=E2=9E=A1=EF=B8=8F=20`Te?= =?UTF-8?q?xtFieldProps`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CopyableAndDownloadableTextField.tsx | 2 +- .../src/components/CopyableTextField/CopyableTextField.tsx | 2 +- .../DebouncedSearchTextField/DebouncedSearchTextField.tsx | 2 +- .../src/components/EditableEntityLabel/EditableInput.tsx | 2 +- packages/manager/src/components/EditableText/EditableText.tsx | 2 +- packages/manager/src/components/EnhancedSelect/Select.tsx | 2 +- .../src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx | 2 +- .../manager/src/components/PasswordInput/HideShowText.tsx | 2 +- .../manager/src/components/PasswordInput/PasswordInput.tsx | 2 +- .../components/SingleTextFieldForm/SingleTextFieldForm.tsx | 2 +- packages/manager/src/components/TextField.tsx | 4 ++-- .../manager/src/components/TypeToConfirm/TypeToConfirm.tsx | 4 ++-- .../src/features/Linodes/LinodeSelect/LinodeSelect.tsx | 2 +- .../manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx | 2 +- .../manager/src/features/NodeBalancers/NodeBalancerSelect.tsx | 2 +- 15 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/manager/src/components/CopyableAndDownloadableTextField.tsx b/packages/manager/src/components/CopyableAndDownloadableTextField.tsx index ea2b2e7a0ea..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 389c4e27925..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 fd0e894c671..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/EditableEntityLabel/EditableInput.tsx b/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx index a6d193edde1..39bce5210a9 100644 --- a/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx +++ b/packages/manager/src/components/EditableEntityLabel/EditableInput.tsx @@ -8,7 +8,7 @@ import ClickAwayListener from 'src/components/core/ClickAwayListener'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import { TextField, Props as TextFieldProps } from 'src/components/TextField'; +import { TextField, TextFieldProps } from 'src/components/TextField'; const useStyles = makeStyles((theme: Theme) => ({ '@keyframes fadeIn': { diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index 2bc50049912..3a3ccb686cf 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -9,7 +9,7 @@ import { H1Header } from 'src/components/H1Header/H1Header'; import ClickAwayListener from 'src/components/core/ClickAwayListener'; import { fadeIn } from 'src/styles/keyframes'; import { makeStyles } from 'tss-react/mui'; -import { TextField, Props as TextFieldProps } from '../TextField'; +import { TextField, TextFieldProps } from '../TextField'; const useStyles = makeStyles()( (theme: Theme, _params, classes) => ({ 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/LabelAndTagsPanel/LabelAndTagsPanel.tsx b/packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx index 94b19f64acf..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/PasswordInput/HideShowText.tsx b/packages/manager/src/components/PasswordInput/HideShowText.tsx index 64683d18308..3b3e1846349 100644 --- a/packages/manager/src/components/PasswordInput/HideShowText.tsx +++ b/packages/manager/src/components/PasswordInput/HideShowText.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; -import { TextField, Props as TextFieldProps } from '../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 cefa401f9ca..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.tsx b/packages/manager/src/components/TextField.tsx index 132f79282fe..26d59d2b6d9 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -147,9 +147,9 @@ interface TextFieldPropsOverrides extends StandardTextFieldProps { label: string; } -export type Props = BaseProps & TextFieldPropsOverrides & ToolTipProps; +export type TextFieldProps = BaseProps & TextFieldPropsOverrides & ToolTipProps; -export const TextField = (props: Props) => { +export const TextField = (props: TextFieldProps) => { const { classes, cx } = useStyles(); const { diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx index 532ec889c5b..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/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/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/NodeBalancerSelect.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx index 8e8b580aa5e..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'; From c38a7f0cb751f2fd257a2a59ee8d599f1be19dc3 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 12:09:56 -0400 Subject: [PATCH 4/7] clean up the mdx --- packages/manager/src/components/TextField.mdx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/manager/src/components/TextField.mdx b/packages/manager/src/components/TextField.mdx index 5c8cab7d692..25723c2d68b 100644 --- a/packages/manager/src/components/TextField.mdx +++ b/packages/manager/src/components/TextField.mdx @@ -55,13 +55,9 @@ Error messages are an indicator of system status: they let users know that a hur Number Text Fields are used for strictly numerical input - - -### Component API - ---- +## Component API From 9d47a710ab7072756516af028c11c185f54c0de4 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 12:21:46 -0400 Subject: [PATCH 5/7] fix broken storybook build --- packages/manager/src/components/Drawer/Drawer.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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'; From 6d833b8897ce2f625ef68eaae51484231f154ce9 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 15:26:57 -0400 Subject: [PATCH 6/7] feedback @mjac0bs --- packages/manager/src/components/TextField.mdx | 6 ++---- packages/manager/src/components/TextField.tsx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/components/TextField.mdx b/packages/manager/src/components/TextField.mdx index 25723c2d68b..dbd4739c48b 100644 --- a/packages/manager/src/components/TextField.mdx +++ b/packages/manager/src/components/TextField.mdx @@ -16,13 +16,11 @@ Text fields allow users to enter text into a UI. - 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. -- The size of the field should be proportional to the expected user input. +- 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. @@ -39,7 +37,7 @@ Text fields allow users to enter text into a UI. 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 +### Main Principles - Should be easy to notice and understand. - Should give solutions to how to fix the error. diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 26d59d2b6d9..fb8c39d8dec 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -102,7 +102,7 @@ interface BaseProps { */ hideLabel?: boolean; /** - * Allows you to manually set an htmlFor input id. One will automaticly be generated by the `label` if this is unset + * Allows you to manually set an htmlFor input id. One will automatically be generated by the `label` if this is unset */ inputId?: string; /** @@ -118,7 +118,7 @@ interface BaseProps { */ min?: number; /** - * Removed the default top margin (16px) + * Removes the default top margin (16px) */ noMarginTop?: boolean; /** From 197686ed64801eeff682ba68ac99b4380a710d25 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Mon, 26 Jun 2023 16:37:49 -0400 Subject: [PATCH 7/7] add some defaults --- packages/manager/src/components/TextField.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index fb8c39d8dec..4f778babfb7 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -75,6 +75,7 @@ interface BaseProps { dataAttrs?: Record; /** * Applies editable styles + * @default false */ editable?: boolean; /** @@ -87,18 +88,22 @@ interface BaseProps { 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; /** @@ -107,6 +112,7 @@ interface BaseProps { inputId?: string; /** * Displays a loading spinner at the end of the Text Field + * @default false */ loading?: boolean; /** @@ -119,10 +125,12 @@ interface BaseProps { min?: number; /** * Removes the default top margin (16px) + * @default false */ noMarginTop?: boolean; /** * Adds `(optional)` to the Label + * @default false */ optional?: boolean; /**