Updates for edit password field in connector:

[edmundito]

Requested by @Upmitt

• Cancel button should be on the left side
• There should be a gap between buttons
• Edit button should be outline
• Edit button height should match text input height

Current:

[octavia-squidington-iv]

cc @airbytehq/frontend

[natalyjazzviolin]

@edmundito , Sherif assigned this one to me as part of the low-code framework effort.
I have a few questions before I dive in, could you clarify these? I used an API key field as an example as it looks like it has the same functionality as a password field.

Cancel/Done buttons:

Does this look like the correct approach?

Edit button:

1. We don't have a primary outline style for the button component. Would the secondary be appropriate here?
2. The button component does not have a height prop. Would it be better to adjust the height for all buttons so they are uniform? Would it be cleaner to implement a prop? ( I was estimating height in devtools, so apologies that it's slightly off!)

[edmundito]

@natalyjazzviolin I was unaware that the API key and Password field had different edit modes. both should look the same, and API has the correct approach. From the screenshot above, there should be a gap between the input and the cancel button.

For the Edit button:

1. The secondary is what we want, just like the API key
2. Height: Let's review this with Nico to confirm what is intended.