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'}