diff --git a/packages/manager/.changeset/pr-12387-changed-1750576427858.md b/packages/manager/.changeset/pr-12387-changed-1750576427858.md new file mode 100644 index 00000000000..79ba467bc90 --- /dev/null +++ b/packages/manager/.changeset/pr-12387-changed-1750576427858.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +TextField and Autocomplete components to wrap startAdornment and endAdornment props using InputAdornment ([#12387](https://github.com/linode/manager/pull/12387)) diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx index b527095664e..3f6c1220699 100644 --- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx +++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx @@ -1,4 +1,4 @@ -import { Box, TextField } from '@linode/ui'; +import { Box, InputAdornment, TextField } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -40,12 +40,14 @@ export const CopyableTextField = (props: CopyableTextFieldProps) => { disabled InputProps={{ endAdornment: hideIcons ? undefined : ( - - {showDownloadIcon && ( - - )} - - + + + {showDownloadIcon && ( + + )} + + + ), }} /> diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 5484b9a1672..a4347adc667 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -1,5 +1,5 @@ import { useAllAccountAvailabilitiesQuery } from '@linode/queries'; -import { Autocomplete } from '@linode/ui'; +import { Autocomplete, InputAdornment } from '@linode/ui'; import PublicIcon from '@mui/icons-material/Public'; import { createFilterOptions } from '@mui/material/Autocomplete'; import * as React from 'react'; @@ -148,22 +148,26 @@ export const RegionSelect = < textFieldProps={{ ...props.textFieldProps, InputProps: { - endAdornment: - isGeckoLAEnabled && selectedRegion && `(${selectedRegion?.id})`, + endAdornment: isGeckoLAEnabled && selectedRegion && ( + + ({selectedRegion?.id}) + + ), required, - startAdornment: - selectedRegion && - (selectedRegion.id === 'global' ? ( - - ) : ( - - )), + startAdornment: selectedRegion && ( + + {selectedRegion.id === 'global' ? ( + + ) : ( + + )} + + ), }, tooltipText, }} diff --git a/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx b/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx index f183ef9c01d..3b268ce95d7 100644 --- a/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx +++ b/packages/manager/src/features/Account/Quotas/QuotasIncreaseForm.tsx @@ -1,6 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { useCreateSupportTicketMutation, useProfile } from '@linode/queries'; -import { Select } from '@linode/ui'; +import { InputAdornment, Select } from '@linode/ui'; import { Accordion, ActionsPanel, @@ -142,21 +142,22 @@ export const QuotasIncreaseForm = (props: QuotasIncreaseFormProps) => { slotProps={{ input: { endAdornment: ( - ({ - color: theme.tokens.alias.Content.Text, - font: theme.font.bold, - fontSize: theme.tokens.font.FontSize.Xxxs, - mx: 1, - textTransform: 'uppercase', - userSelect: 'none', - whiteSpace: 'nowrap', - })} - > - {convertedResourceMetrics?.metric ?? - quota.resource_metric} - + + ({ + color: theme.tokens.alias.Content.Text, + font: theme.font.bold, + fontSize: theme.tokens.font.FontSize.Xxxs, + textTransform: 'uppercase', + userSelect: 'none', + whiteSpace: 'nowrap', + })} + > + {convertedResourceMetrics?.metric ?? + quota.resource_metric} + + ), }, }} diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx index 54c1a159a60..4385caa656d 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx @@ -1,4 +1,4 @@ -import { Autocomplete, Box } from '@linode/ui'; +import { Autocomplete, Box, InputAdornment } from '@linode/ui'; import Grid from '@mui/material/Grid'; import React from 'react'; @@ -77,11 +77,11 @@ export const DatabaseEngineSelect = (props: Props) => { textFieldProps={{ InputProps: { startAdornment: ( - - {selectedEngine?.flag} - + + + {selectedEngine?.flag} + + ), }, }} diff --git a/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx b/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx index 3e0ae7cf68d..438c099345c 100644 --- a/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx +++ b/packages/manager/src/features/Firewalls/components/FirewallSelect.tsx @@ -1,5 +1,5 @@ import { useAllFirewallsQuery } from '@linode/queries'; -import { Autocomplete } from '@linode/ui'; +import { Autocomplete, InputAdornment } from '@linode/ui'; import React, { useMemo } from 'react'; import { useDefaultFirewallChipInformation } from 'src/hooks/useDefaultFirewallChipInformation'; @@ -79,10 +79,12 @@ export const FirewallSelect = ( textFieldProps={{ InputProps: { endAdornment: isDefault && !hideDefaultChips && ( - + + + ), }, }} diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx index 08f4638fba2..dfc90e1328d 100644 --- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx +++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx @@ -88,7 +88,7 @@ const SupportSearchLanding = (props: AlgoliaProps) => { InputProps={{ className: classes.searchBar, startAdornment: ( - + ), diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx index db0d8dedb15..117645def60 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx @@ -307,7 +307,7 @@ export const PhoneVerification = ({ id="phone_number" InputProps={{ startAdornment: selectedCountry ? ( - + {selectedCountry.dialingCode} ) : undefined, diff --git a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx index 6fec0acd050..89f0f1fd309 100644 --- a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.tsx @@ -36,7 +36,7 @@ export const StackScriptForm = (props: Props) => { errorText={fieldState.error?.message} InputProps={{ startAdornment: ( - {username} / + {username} / ), }} inputRef={field.ref} diff --git a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx index a7904be6d59..ca6922d127e 100644 --- a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx @@ -3,7 +3,13 @@ import { useStackScriptsInfiniteQuery, } from '@linode/queries'; import { getAPIFilterFromQuery } from '@linode/search'; -import { CircleProgress, ErrorState, Stack, TooltipIcon } from '@linode/ui'; +import { + CircleProgress, + ErrorState, + InputAdornment, + Stack, + TooltipIcon, +} from '@linode/ui'; import { Hidden } from '@linode/ui'; import { useMatch, @@ -131,11 +137,13 @@ export const StackScriptLandingTable = (props: Props) => { searchParseError ? { endAdornment: ( - + + + ), } : {} diff --git a/packages/manager/src/features/Support/AttachFileListItem.tsx b/packages/manager/src/features/Support/AttachFileListItem.tsx index 7b671319c05..27be5cf41a0 100644 --- a/packages/manager/src/features/Support/AttachFileListItem.tsx +++ b/packages/manager/src/features/Support/AttachFileListItem.tsx @@ -75,7 +75,7 @@ export const AttachFileListItem = (props: Props) => { ), startAdornment: ( - + ), diff --git a/packages/ui/src/components/TextField/TextField.test.tsx b/packages/ui/src/components/TextField/TextField.test.tsx index 1958129d747..c9587433bc3 100644 --- a/packages/ui/src/components/TextField/TextField.test.tsx +++ b/packages/ui/src/components/TextField/TextField.test.tsx @@ -65,7 +65,7 @@ describe('TextField', () => { const { getByDisplayValue, getByTestId, getByText } = renderWithTheme( $, + startAdornment: $, }} label={'Money'} type={'number'}