IgniteUI
[textarea]: suffix space on Material theme
Question
Currently, when we use the Material theme without a suffix applied, there's a difference in spacing between Angular and WC: In Angular, there is a space between the resize icon and the end of the textarea. In WC, there is no space, the resize icon is placed directly at the end of the textarea.
Here’s how the textarea looks when filled: in Angular, there is equal space before and after the text, while in WC, there is space only before the text:
This is only seen in the Material theme, in the other themes the resize icon is at the end of the text area on both Angular and WC.
How should we proceed from a design perspective? Should we move the resize icon to the end of the textarea and have space only before the text, like in the WC sample, or should we update the WC sample to match Angular, with space before and after the text and the resize icon not at the end of the textarea?
From a design perspective, I believe the Web Components implementation is the correct one. Placing the resize icon directly at the end of the textarea (bottom-right corner like in the other themes) aligns with native browser behavior and user expectations. I would recommend updating the Angular implementation to match WC: • Maintain left-side padding before the text for readability. • Place the resize icon flush in the corner of the textarea. • Ensure the padding around the text does not interfere with the icon.
The bug is currently appearing only in the scoped-styles. On master, 20.0.x, and 19.2.x, it no longer appears. I've made a fix and opened a PR for the scoped-styles branch.
@adrianptrv Has this been fixed in 20.0.x and 20.1.x(master)? I can't find the relevant PRs so I can close the issue?
