mj12albert
commented
1 year ago @JTtime Thanks for the suggestions!
For InputProps, it will be dropped in v6 for InputBase (https://github.com/mui/material-ui/pull/38392), though TextField could still support multiple ways of applying props to the inner components for different customization scenarios.
For the naming of the adornment prop, if the API looked like
<InputBase adornment={<InputAdornment position="start"><EventIcon/></InputAdornment>}/>it would be less convenient if you wanted to use both start and end adornments, and it would be more difficult for InputBase to "read" the position
Duplicates
Latest version
Summary 💡
MUI have 2 different Adornment: startAdorment and endAdornment. And while implementation, position of Adornment is actually decided by InputAdornment's position prop. So, I think, MUI can remove this 2 different props (startAdornment and endAdornment) and rather keep a single prop called as "Adornment", This will remove repitition of props. Anyways, position of Adornment is decided by InputAdornment's position prop only.
Examples 🌈
current Implementation
<InputBase endAdorment={<InputAdornment position="end"><EventIcon/></InputAdornment>}/>and
<InputBase startAdorment={<InputAdornment position="start"><EventIcon/></InputAdornment>}/>Suggested implementation
<InputBase adorment={<InputAdornment position="end"><EventIcon/></InputAdornment>}/><InputBase adorment={<InputAdornment position="start"><EventIcon/></InputAdornment>}/>Motivation 🔦
We have InputBase component for all our TextBox requirement throughout our project. So we are very much dependent on MUI Docs for it
While going through Docs and example implementation, I saw following 2 different variations of implementing on MUI TextField Page
<TextField label="With normal TextField" id="filled-start-adornment" sx={{ m: 1, width: '25ch' }} **InputProps={{ startAdornment: <InputAdornment position="start">kg</InputAdornment>, }}** variant="filled" />And
<FilledInput id="filled-adornment-amount" **startAdornment={<InputAdornment position="start">$</InputAdornment>}** />To my surprise, second implementation worked right for InputBase after trial and error and surfing through stackoverflow
I already saw one similar issue for first implementation being raised, but it was for docs. I raised this issue for feature addition so that Adornment can be implemented in a simple way. Also requesting your team, if its possible to maintain consistency on implementation throughout the project as you can see 2 different implementations here.
Let me know if I can contribute in this respect and raise PR