Input: Mobile Enhancements and style changes

[tmcconechy]

Describe the bug
Make some style changes to al input type fields and make it work better on mobile. Based on Demo
https://main-enterprise.demo.design.infor.com/components/input/example-index.html

Fixes
https://www.figma.com/file/CUC6hyMtzodsfU13Lsbw6G/IDS-Input?node-id=680%3A117

• Add 44 hitboxes / field sizes on fields - (done by adding hitbox class)
• Add these settings to web components (ids-input - remove compact settings on some components - field-height already exists, need a setting field-height-mobile)

Field Height Settings

• small (compact / currently existing)
• medium (medium / current existing)
• large (new (hitbox style 44px))

Device Settings

• desktop
• mobile
• configurable breakpoints (future)

So with these six combinations (2 existing) we can choose between 3 field heights and set it to go to these heights on mobile and or desktop. Default will be normal - desktop and large - mobile.

Additional context
https://jira.infor.com/browse/UXD-3258

Add this setting to all inputs and also do a seperate PR for the ones in the web components

[CindyMercadoReyes]

Hello team, BDD has been created for this ticket; @ericangeles @tmcconech
story_github5606.docx
y

[ericangeles]

Adding @maezcruz

[nganotice]

This has been QA tested and passed on v4.57.0-dev.

1st

2nd

Moving this ticket to Done.

Thanks!