FR (Primitives): Add Style Props for PasswordField button

[dreamorosi]

This issue is related to the amplify-ui@next for React.

At the moment styling the show password button of a PasswordField component requires reaching out to CSS (at least as far as I could find/manage) and it would be really handy if it'd be possible to style the button in a similar way to the one available for the descriptiveText prop:

<PasswordField
  label="Password"
  name="password"
  showPasswordButton={
    <Button color="rebeccapurple" fontStyle="italic" fontSize="0.8rem" />
  }
/>

Alternatively it'd be great to even just be able to pass specific props to override the default ones like this:

<PasswordField
  label="Password"
  name="password"
  showPasswordButtonProps={
    color: "rebeccapurple",
    fontStyle: "italic",
    fontSize: "0.8rem"
  }
/>

[reesscot]

Thanks for the feedback. Yes, currently you'll have to use CSS selectors to style the show password button. Would you mind telling us what kind of styling you're trying to change? Are you trying to change the icons as well, or primarily the color? The show password button is a bit more complicated to expose than the descriptiveText since it has multiple icons (eye closed, eye open icons) and hover, focus, active states.

[dreamorosi]

Thanks for explaining it, I agree that changing the icon can prove tricky and besides, the icon is fine for me, I wouldn't mind not being able to change it.
Personally just being able to style background color, border, etc. would be great and as a starter it'd be even enough if could just pass a variation like regular buttons.

[ericclemmons]

We have some options for being able to replace the field entirely (so you could create your own PasswordField component & pass that in) vs. just the props. 🙏

But in the meantime, given the primitive's usage of CSS variables & classes, does CSS problematic?

requires reaching out to CSS (at least as far as I could find/manage)

[dreamorosi]

Glad to hear, and no rush whatsoever!

@ericclemmons CSS is not problematic at all, but unless I missed something I couldn't set it on the component and had to go to the actual css file, which again it's not a problem in itself but so far (in this demo) that has been the only instance I had to add something to the file.