Fix padding on InputField suffix

[vepor]

As seen at orbit.kiwi, text suffixes for InputFields don't have the proper right padding and overlap the edge of the field.

[simonhoyos]

@vepor I can help with this one

[vepor]

Hey @simonhoyos 👋 , feel free to do so! We will be more than glad to have it done 🙂

[simonhoyos]

Hi @vepor,

Here are my findings so far about this issue:

1. When checking this component in storybook it is working correctly. The reason for this is that the padding is being set within the suffix prop

<InputField
  label={label}
  value={value}
  placeholder={placeholder}
  suffix={<div style={{ paddingRight: "12px" }}>{suffix}</div>}
  onChange={action("change")}
/>

2. Adding the following lines to the Suffix component fixes the problem, but it changes the behavior of the ButtonLink suffix:

+ padding: ${getPadding()};
+ padding-left: 0;

Current ButtonLink state:

After proposed changes:

As you can see the right spacing is bigger after changes.

Some alternatives include:

1. Adding to the documentation that padding should be added to the suffix.
2. Adding a prop flag that adds/removes padding.

Let me know what you think.

[vepor]

Thanks a lot @simonhoyos! 🙂

I don't think that we want to implement a change for the ButtonLink. Therefore could you please a PR that will fix mentioned example, that is currently wrong? 🙏 It should be this file.

[simonhoyos]

Thanks a lot @simonhoyos! 🙂

I don't think that we want to implement a change for the ButtonLink. Therefore could you please a PR that will fix mentioned example, that is currently wrong? 🙏 It should be this file.

Great! I'll start working on that ASAP

[CollierCZ]

@vepor, you think it's the correct behavior to force people to add custom styling for any use of suffix? It seems to me that a much more sustainable solution would be adjusting the styling that is a part of InputField. It could include different styling for different suffixes, but asking people to input custom styling seems not very user-friendly.

[vepor]

Sadly, it's the official way how to do it for a long period of time.

I'm afraid that we can't simply put a condition to the Suffix component as it could lead to more problems than fixes. And in the end, it would a breaking change for a lot of implementation. Because external contributors can't simply validate if the fix works properly I would like to do it in a separate ticket, our of the scope of this issue.