Added hitSlop of 7 to RN Pressable that expands the pressable area 7 in all directions to achieve the minimum 44px height press target (with the 30px line height of text)
React Native automatically handles if that touch target causes conflicts with other display elements
Added style props to the View wrapping the Icon (if present) so that:
It has the same minimum height of the text (line height 30) so that the icon is centered vertically
Icon remains aligned with the first line if the text is long enough to wrap
Icon can still scale fine both from OS scaling and manually increasing size with height/width parameters
Doing long text validation on iOS/Android was pushing the icon off the display to the side, but this was believed to be an issue with Storybook's viewport that would not manifest when embedded with a display within an app
Confirmed on main this is a preexisting weirdness
Web does not seem to respect the RN Pressable's hitSlop property expanding touch target--as Web is just for demonstration purposes, this was deemed acceptable
[x] Tested on iOS
[x] Tested on Android
[x] Tested on Web
PR Checklist
Code reviewer validation:
General
[x] PR is linked to ticket(s)
[x] PR has changelog label applied if it's to be included in the changelog
[x] Acceptance criteria:
All satisfied or
Documented reason for not being performed or
Split to separate ticket and ticket is linked by relevant AC(s)
[x] Above PR sections adequately filled out
[x] If any breaking changes, in accordance with the pre-1.0.0 versioning guidelines: a CU ticket has been created for the VA Mobile App detailing necessary adjustments with the package version that will be published by this ticket
Code
[x] Tests are included if appropriate (or split to separate ticket)
[x] New functions have proper TSDoc annotations
Publish
While changes warrant a new version per the versioning guidelines, Link has not been officially published yet so it'll be deferred to #216
Description of Change
Screenshots/Video
iOS (Android similar) screenshot showing touch target height 44 (30 + 7 top + 7 bottom):
Web showing alignment for long text + icon box keeping it aligned:
https://github.com/department-of-veterans-affairs/va-mobile-library/assets/8690976/21ab7936-f388-4709-a990-dba04873db54
Testing
Notes:
Doing long text validation on iOS/Android was pushing the icon off the display to the side, but this was believed to be an issue with Storybook's viewport that would not manifest when embedded with a display within an app
Web does not seem to respect the RN Pressable's hitSlop property expanding touch target--as Web is just for demonstration purposes, this was deemed acceptable
[x] Tested on iOS
[x] Tested on Android
[x] Tested on Web
PR Checklist
Code reviewer validation:
changeloglabel applied if it's to be included in the changelogPublish
While changes warrant a new version per the versioning guidelines, Link has not been officially published yet so it'll be deferred to #216