Skip to content

Give outlined inputs a surface background - #359

Open
zoharma wants to merge 2 commits into
mainfrom
zma/outlined-input-surface
Open

zoharma wants to merge 2 commits into
mainfrom
zma/outlined-input-surface

Conversation

@zoharma

@zoharma zoharma commented Oct 15, 2026

Copy link
Copy Markdown
Contributor
  • Fill MuiOutlinedInput with --ds-surface so TextField, Select and Autocomplete stay distinct on container or elevated surfaces
  • Add "On surfaces" stories for TextField and Select
  • Assert the rest-state background in the theme test
  • Paint the notch with the field background so the floating label sits on one tone, with rounded top corners, with slight padding changes
  • Use the read-only and disabled wash tokens for those states, above the field edge only
Light Dark
image image
image image
image image

- Fill `MuiOutlinedInput` with `--ds-surface` so TextField, Select and Autocomplete stay distinct on container or elevated surfaces
- Add "On surfaces" stories for TextField and Select
- Assert the rest-state background in the theme test
- Paint the notch with the field background so the floating label sits on one tone, with rounded top corners
- Use the read-only and disabled wash tokens for those states, above the field edge only
- Make the notch 2px higher and 4px taller and shift the shrunk label down 1px for space above the text
@zoharma
zoharma force-pushed the zma/outlined-input-surface branch from 8767f0b to 7f55b6b Compare October 15, 2026 15:59
@zoharma
zoharma marked this pull request as ready for review October 15, 2026 16:34
@zoharma
zoharma requested a review from a team October 15, 2026 16:34

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant