[TextField] implement suffix/prefix props

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

<TextField
  label="value"
  InputProps={{
    endAdornment: <InputAdornment position="end">days</InputAdornment>
  }}
  type="text"
  variant="filled"
/>

https://codesandbox.io/s/textfield-endadornment-on-filled-misaligned-rbcyy

Steps:

1. Goto https://codesandbox.io/s/textfield-endadornment-on-filled-misaligned-rbcyy
2. Observe misalignment

Context 🔦

Displaying units of the input value for filled inputs

Implementation proposal

<TextField
  label="value"
  InputProps={{
    suffix: <InputSuffix>days</InputSuffix>
  }}
  type="text"
  variant="filled"
/>

following https://material.io/components/text-fields/#filled-text-field (see “prefix and suffix text”)

Notes

The alignment uses the baseline of the input without a value (where the label looks like a placeholder). Once we transition to label+value the alignment is off. The Adornment should adjust for this state.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.3
React	16.12
Browser	Chrome Version 80.0.3987.116 (Official Build) (64-bit) Ubuntu 18.04

[eps1lon]

Maybe we should force the shrink state?

I’m favoring separating adornments and affixes. They are already described in guidelines. Forcing the alignment would look weird if your adornment is button-like (see password show/hide toggle).

[Floriferous]

It is simpler because StartAdornmentComponent and EndAdornmentComponent would have a defaultvalue of InputAdornment.

I agree, passing props inside of those components is a bit messy, as you have to either merge children inside of it, or add another prop to pass props into that component. Or you can turn the prop into a function, and completely invert control, as needed:

// 99% of use-cases
<TextField
  startAdornment="€"
/>

// Special use-cases
<TextField
  startAdornment="€"
  // Optional prop
  renderStartAdornment={content => <SomeOtherAdornmentComponent myChildProp={content} type="start" />}
/>

The point is, for the few times I need to use adornments, I always have to look back at the docs, to find the perfect combination of props, components and content I need to make it look normal. I wish I could simply give material-ui my content, and let it figure out as much as possible which combo of low-level components it should use. You should always be able to customize it, but the TextField component can and should take care of the general use case imho:

// Batteries included!
<TextField
  value={amount}
  onChange={setAmount}
  label="Cost"
  startAdornment="€"
/>

EDIT: Be more clear about benefits