While attempting to look into adding a new feature to the TextField[^1], I noticed a couple of issues with the text field startIcon:
The "click to focus" functionality was still not entirely accurate if one managed to click on the thin padding around the icon. This PR fixes it by capturing the click event on the input element wrapper that covers the entire area inside the borders.
The startIcon feature was tailored only for the default text field variant. When the text field was set in bordered mode, the icon placement does not look good.
[^1]: The new feature I'm looking into is related to enabling the text field to also have a slot on the right side, similar to the one for startIcon. However, the slot in question is for more than just icons. It's about enabling the text field to have a button on its right side, for instance. Anyway, this PR is not at all about that.
PR Checklist
[ ] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[ ] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[ ] Updated all static build artifacts (npm run build-all)
[ ] Reviewed and approved Chromatic visual regression tests in CI
Short description
While attempting to look into adding a new feature to the
TextField
[^1], I noticed a couple of issues with the text fieldstartIcon
:startIcon
feature was tailored only for the default text field variant. When the text field was set in bordered mode, the icon placement does not look good.[^1]: The new feature I'm looking into is related to enabling the text field to also have a slot on the right side, similar to the one for
startIcon
. However, the slot in question is for more than just icons. It's about enabling the text field to have a button on its right side, for instance. Anyway, this PR is not at all about that.PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
package.json
andpackage-lock.json
(npm --no-git-tag-version version <major|minor|patch>
) refnpm run build-all
)Versioning
Patch release
Demo