Input-group - (Material) helper text has different gap from the input filed compared to web-components and the UI kit

[desig9stein]

Description

helper text has different gap from the input filed compared to web-components

• igniteui-angular version:
• browser: all

Steps to reproduce

1. Compare the webC and angular inputs when both have helper text

Result

Helper text in angular is padding-top: 5px
Helper text in Web components is margin-top: 4px

Expected result

Both should be using 4px gap according to the UI KIT

Attachments

[SisIvanova]

@yradoeva @sdimchevski Besides the difference in the top padding, there is also a discrepancy regarding the left offset of the helper text. Which are the correct values?

Web Components

• Small - padding-left: 12px / padding-top: 4px
• Medium - padding-left: 14px / padding-top: 4px
• Large - padding-left: 16px / padding-top: 4px

Angular

• All sizes - padding-left: 16px / padding-top: 5px

[simeonoff]

I believe I modified the styles in the web components library last when we were refactoring the indigo themes. However, we need to validate against the UI kits.

[didimmova]

@yradoeva @sdimchevski Besides the difference in the top padding, there is also a discrepancy regarding the left offset of the helper text. Which are the correct values?

Web Components

• Small - padding-left: 12px / padding-top: 4px
• Medium - padding-left: 14px / padding-top: 4px
• Large - padding-left: 16px / padding-top: 4px

Angular

• All sizes - padding-left: 16px / padding-top: 5px

@sdimchevski can you please verify which one of the variants is the right one?