igniteui-webcomponents
igniteui-webcomponents copied to clipboard
IgniteUI
[Input Group] - material type border has inconsistent border radius after the user changes it.
Description
When we have an input of type border which only have prefixes and no suffixes and the user decides to change the border-radius to make it more of a circular shape(i believe this is a very common scenario) the border radius of the prefix and the suffix looks inconsistent even when both of them have the same radius size.
In the scenario described above, we have only one prefix and that prefix has 48px, which is exactly the same as the input height, the suffix is empty and its min-width is less than the input height, because of that the suffix can't reach the point where is fully rounded on the right side.
Steps to reproduce
- Add material border input.
- Add prefix (don't add suffix) or opposite.
- Change the radius to be for example 50% for both prefix and suffix.
Result
Expected result
NOTE: This behavior will be the same in angular once the new design is merged.
@sdimchevski I am adding you to this issue since I think that the fix will trigger UI kit changes.
@desig9stein What is the status of this issue? Is it still reproducible, and if it is, will it be fixed?
@desig9stein What is the status of this issue? Is it still reproducible, and if it is, will it be fixed?
The issue is still reproducible, it will require redesign of the input in order to be fixed. The only way to make the input round is to preserve half the space for one prefix/suffix even when there is none. This will introduce visual breaking change in all themes.
In addition to what @desig9stein said, we've already tested alternative methods to implement the design, but they introduce other issues. We may revisit this some time in the future.
