change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField) #11807

jaalah-akamai · 2025-03-07T20:34:57Z

Description 📝

Update the search field components (DebouncedSearchTextField) to conform to the new Akamai Design System specifications. This includes standard inputs, adornments, and all relevant states. This PR prioritizes DebouncedSearchTextField, with other component modifications resulting from necessary adjustments to the broader MuiInputBase theme.

Note

Both Autocomplete and TextField components inherit from the same underlying components: MuiInputBase and MuiInputAdornment. I've consolidated the core styling in these shared components to minimize duplication. For component-specific styling, use the dedicated theme overrides: MuiAutocomplete and MuiTextField.

Changes 🔄

Foundations

MuiInputAdornment: Both TextField and Autocomplete use identical adornment components, which should maintain 20×20 pixel dimensions, with the sole exception of the clear/close icon which requires a smaller 16×16 pixel size.
MuiInputBase: Contains core input styling for both TextField and Autocomplete for all relevant component states.
MuiOutlinedInput: Removed since this was unused along with other dead styles.

Components

Autocomplete: New ChevronDownIcon and reduced adornment size
DebouncedSearchTextField:
- InputProps is deprecated; changed to slotProps and using inputSlotProps for the component prop.
- Ensure InputAdornment is being used for all adornments
- New close and search icons
- Removed styled components
StrengthIndicator: Fixed a minor spacing regression from the MUIv6 update affecting the grid-wrapped strength indicator divs. All elements have been properly centered for consistent alignment.
HideShowText: InputProps is deprecated; changed to slotProps
AlgoliaSearchBar: Cleanup - styles handled by theme
SearchBar: A unique implementation of our search (Autocomplete) with custom styling and options container. It will require further cleanup/refactoring at another time.

Target release date 🗓️

3/25

Preview 📷

Just a sample - there are lots of instances

Before	After

How to test 🧪

See ticket details for figma files for various states
There will definitely be one-off styles in various components, the goal is to find them.

Verification steps

Anywhere we're using TextFields or Autocompletes
Ensure Autocomplete component height can expand when multiple options are selected
Check both light/dark mode
Check Top Menu search
Check Algolia search on Support landing

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

jaalah-akamai · 2025-03-10T13:22:35Z

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

 export const DebouncedSearchTextField = React.memo(
  (props: DebouncedSearchProps) => {
    const {
-      InputProps,


Deprecated - using slotProps

jaalah-akamai · 2025-03-10T13:23:58Z

packages/manager/src/components/ImageSelect/ImageSelect.tsx

-                  pr={2}
-                  top={1}
-                />
+                <InputAdornment position="start">


When using adornments, let's ensure we use InputAdornment to wrap things for proper theme-level styling.

Should we create a ticket for this? Found several adornments not wrapped in InputAdornment in the codebase:

CopyableTextField

RegionSelect

DatabaseEngineSelect

StackScriptLandingTable

jaalah-akamai · 2025-03-10T13:25:16Z

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

    [theme.breakpoints.down('sm')]: {
      textAlign: 'center',
    },
-    top: 2,


Removed since alignItems: 'center' made more sense.

jaalah-akamai · 2025-03-10T13:27:17Z

packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx

-                      color: theme.tokens.header.Search.Text.Placeholder,
-                      fontStyle: 'italic',
+                slotProps={{
+                  htmlInput: {


slotProps.htmlInput is the equivalent of inputProps
slotProps.input is the equivalent of InputProps
slots.paper is the equivalent of PaperComponent

jaalah-akamai · 2025-03-10T13:28:45Z

packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx

+                    sx: {
+                      '&:active, &:focus, &.Mui-focused, &.Mui-focused:hover': {
+                        backgroundColor: theme.tokens.header.Search.Background,
+                        borderColor: theme.tokens.header.Search.Border.Active,
+                        color: theme.tokens.header.Search.Text.Filled,
+                      },
+                      '&:hover': {
+                        backgroundColor: theme.tokens.header.Search.Background,
+                        borderColor: theme.tokens.header.Search.Border.Hover,
+                        color: theme.tokens.header.Search.Text.Filled,
+                      },
+                      backgroundColor: theme.tokens.header.Search.Background,
+                      borderColor: theme.tokens.header.Search.Border.Default,
+                      color: theme.tokens.header.Search.Text.Filled,
+                      maxWidth: '100%',


As noted in the description, the Top Menu search represents a unique styling implementation. While we can revisit this later, these modifications effectively serve as theme overrides.

hkhalil-akamai

✅ TextFields and Autocompletes across the app look as expected in light and dark mode
✅ Input adornments appearing as expected
✅ Tested multiple variations of the above components as well as LinodeSelect and RegionSelect in storybook -- verified these match the Figma mockups

hkhalil-akamai · 2025-03-11T20:25:31Z

packages/manager/src/components/ImageSelect/ImageSelect.tsx

-                  pr={2}
-                  top={1}
-                />
+                <InputAdornment position="start">


Should we create a ticket for this? Found several adornments not wrapped in InputAdornment in the codebase:

CopyableTextField

RegionSelect

DatabaseEngineSelect

StackScriptLandingTable

jaalah-akamai · 2025-03-12T13:56:07Z

@hkhalil-akamai Yes those will need to be updated. Since there's no serious regressions with most of those, I'll tackle in a follow-up.

github-actions · 2025-03-12T14:23:49Z

Coverage Report: ❌
Base Coverage: 79.82%
Current Coverage: 79.81%

bnussman-akamai

The Autocomplete Loading state is a bit broken

Screen.Recording.2025-03-12.at.5.22.13.PM.mov

bnussman-akamai · 2025-03-13T23:59:13Z

The spinner is still a bit wonky.

Screen.Recording.2025-03-13.at.7.53.02.PM.mov

I wonder if we should remove this or change the CSS selector to apply to any child (.MuiInputAdornment-positionEnd > *) other than svgs. Looks like the MUI spinner is wrapped in a span for whatever reason

bnussman-akamai

Looks good! Thanks for fixing that loading state issue 🙏

Not blocking: The endAdornment icons are much smaller now (and closer together) which makes them seem a bit harder to click/press

jaalah-akamai · 2025-03-17T20:42:30Z

Yea the icons only have 4px padding between them and have been reduced in size by design. I will most likely be revisiting this in follow-ups as I have discussions with the UX team. I'll continue to do refinements as I tackle TextField next which is related to this.

Edit: The down chevron icon needed to be replaced in the UI package. It's still smaller, but larger than is was 16px > 20px (still a reduction from the 28px that it was)

jaalah-akamai · 2025-03-17T21:04:03Z

These tests appear somewhat flaky. All pass except Clone Linode, which I'm looking into.

linode-gh-bot · 2025-03-17T22:08:45Z

Cloud Manager UI test results

🔺 2 failing tests on test run #16 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`2 Failing`	`537 Passing`	`3 Skipped`	`121m 41s`

Details

Failing Tests
	Spec	Test
❌	`google-pay.spec.ts`	Google Pay » adds google pay method
❌	`google-pay.spec.ts`	Google Pay » tests make payment flow - google pay

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/billing/google-pay.spec.ts"

jaalah added 6 commits February 27, 2025 17:40

Saving...

1f3c6a8

Saving...

76ddcfd

Merge branch 'develop' of github.com:linode/manager into M3-9432

9f9a1b2

Saving...

ac15511

Merge branch 'develop' of github.com:linode/manager into M3-9432

0a615aa

Saving...

a3aaf05

jaalah-akamai added the Design Tokens Laying the groundwork for Design Tokens label Mar 7, 2025

jaalah-akamai self-assigned this Mar 7, 2025

github-project-automation bot added this to Cloud Manager Mar 7, 2025

github-project-automation bot moved this to Review in Cloud Manager Mar 7, 2025

jaalah added 2 commits March 7, 2025 20:28

Fix E2E tests

7f986ae

Add changesets and revert

c2a3d37

jaalah-akamai changed the title ~~change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField)~~ refactor: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField) Mar 8, 2025

jaalah-akamai changed the title ~~refactor: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField)~~ change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField) Mar 8, 2025

jaalah added 4 commits March 7, 2025 20:44

Edit changesets

53b461b

Use slot props

8d3d3f2

Update height and colors

9081c35

Algolia and SearchBar

5f95e68

jaalah-akamai commented Mar 10, 2025

View reviewed changes

Fix unit tests

9314d83

jaalah-akamai marked this pull request as ready for review March 10, 2025 13:58

jaalah-akamai requested a review from a team as a code owner March 10, 2025 13:58

jaalah-akamai requested review from cpathipa and hkhalil-akamai and removed request for a team March 10, 2025 13:58

jaalah-akamai added the Ready for Review label Mar 10, 2025

hkhalil-akamai approved these changes Mar 11, 2025

View reviewed changes

hkhalil-akamai added the Add'tl Approval Needed Waiting on another approval! label Mar 11, 2025

Get latest

a11226b

bnussman-akamai reviewed Mar 12, 2025

View reviewed changes

jaalah and others added 5 commits March 13, 2025 10:28

Fix loading state for autocomplete

371707e

Merge branch 'develop' into M3-9432

bba9dbe

Merge branch 'develop' of github.com:linode/manager into M3-9432

13ae152

Merge branch 'M3-9432' of github.com:jaalah-akamai/manager into M3-9432

796a4bf

Fix path

a1520d3

cpathipa approved these changes Mar 14, 2025

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Mar 14, 2025

cpathipa added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Mar 14, 2025

Update to loading end adornment

09b5f02

bnussman-akamai approved these changes Mar 17, 2025

View reviewed changes

jaalah and others added 2 commits March 17, 2025 17:00

Update icons in UI package

63bfbdb

Merge branch 'develop' into M3-9432

c734c98

jaalah-akamai merged commit 4d5ed8b into linode:develop Mar 17, 2025
26 of 27 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Mar 17, 2025

This was referenced Mar 20, 2025

Release v1.138.0 - release → staging #11895

Merged

Release v1.138.0 - staging → master #11900

Merged

change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField) #11807

change: [M3-9432] - Theme changes to InputBase (DebounceSearchTextField, Autocomplete, TextField) #11807

Uh oh!

Conversation

jaalah-akamai commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

jaalah-akamai Mar 10, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Mar 10, 2025

Choose a reason for hiding this comment

Uh oh!

hkhalil-akamai Mar 11, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Mar 10, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Mar 10, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Mar 10, 2025

Choose a reason for hiding this comment

Uh oh!

hkhalil-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

hkhalil-akamai Mar 11, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai commented Mar 12, 2025

Uh oh!

github-actions bot commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bnussman-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

bnussman-akamai commented Mar 13, 2025

Uh oh!

bnussman-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jaalah-akamai commented Mar 17, 2025

Uh oh!

linode-gh-bot commented Mar 17, 2025

Cloud Manager UI test results

🔺 2 failing tests on test run #16 ↗︎

Details

Troubleshooting

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jaalah-akamai commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading

jaalah-akamai commented Mar 17, 2025 •

edited

Loading