Outline TextField end adornment margin is too high

[pladaria]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

End adornment right margin is too high when used in outline TextField

Expected

https://material-components.github.io/material-components-web-catalog/#/component/text-field?icons=trailingIcon&type=outlined

Steps to Reproduce 🕹

Demo: https://codesandbox.io/s/009vrmpqvn

[oliviertassinari]

@pladaria Google sign-in page agrees with you:

We are introducing a new edge property to solve the problem in #14758.

        <TextField
          id="outlined-adornment-password"
          className={clsx(classes.margin, classes.textField)}
          variant="outlined"
          type={this.state.showPassword ? 'text' : 'password'}
          label="Password"
          value={this.state.password}
          onChange={this.handleChange('password')}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={this.handleClickShowPassword}
+                 edge="end"
                >
                  {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            ),
          }}
        />

We should update the documentation once #14758 is merged. Do you want to work on it? :)

[d7my11]

i can open a PR for this

[d7my11]

actually edge="end" is already added to the icon but it doesn't solve the problem

[oliviertassinari]

@d7my11 Right, it seems that the problem was already fixed: https://material-ui.com/components/text-fields/#outlined-input-adornments. It looks alright.

What do you mean by "doesn't solve the problem"?

[oliviertassinari]

I'm closing, waiting for more information to be provided.

[d7my11]

@oliviertassinari i thought padding should be less than 12px but i was wrong. sorry