Overview
Codex components with icons use mixins to align the absolutely positioned icon horizontally and/or vertically to its relative parent. Inside the mixin are reusable styles like top, left, right, and transform.
Some examples:
- TextInput's icons are vertically centered.
- Combobox's icons are horizontally and vertically centered.
TextArea is a special case because the icons in TextArea are not horizontally or vertically centered. These icons are aligned with the first line of content in the <textarea>. We want to make use of the existing mixin and get rid of any overriding styles in TextArea.
Issue
Overriding mixin styles
Why is this bad?
Overriding mixin styles leads to unnecessary code bloat. (See solution 1 in this article)
Acceptance Criteria
- Edit the existing mixin, cdx-mixin-icon, to provide more customized styles for aligning icons that will support TextArea
- Remove overriding styles in TextArea - this includes: top, height, and transform