Fixed bug with icon not scaling to height/width changes in Web Storybook
Simultaneously fixed one issue from Visual QA (#220) with icons not centering vertically/horizontally in Web within the icon space when not square
Updated Icon Storybook to prefill list of icons so they are selectable via a dropdown instead of manually inputting names
Revamped Icon props/typing
Made name and svg props mutually exclusive so sending one or the other is mandatory and sending both impossible--removing in-component conditional behavior
Made height and width props either both optional or both required, locking down consumers to sending either:
Neither--defaults to 24x24
or
Both--we are not responsible for any sizing weirdness due to SVGs not necessarily being square if they send non-square height/width
Also cleaned up in-component conditional behavior
Enhanced Icon fill prop
Maintains existing ability to send a single color string
Added "default" option that is set if no fill sent and is primary blue (responds to light/dark mode)
Added "base" option for base gray (responds to light/dark mode)
Added accepting an object containing "light" and "dark" props corresponding to light/dark mode colors
Updated Storybook stories to have no fill ("default") and "base" fill
Some of above conditional clean-up broke unit tests
Fixed unit tests
Displayed Icon now only includes SvgProps and no longer includes props:
name which became redundant with typing changes guaranteeing a name or custom SVG
and
preventScaling which is a flag to control height/width values, but isn't directly used for display
Added 2 new unit tests
Created ticket #223 to further enhance unit tests for fill changes
Screenshots/Video
iOS (similar tests performed on Android/Web and working fine):
Note: preexisting issue of scaling not working correctly with Web magnification due to platform differences observed--the icon visually grows, but the actual render size does not. As such preventScaling prop does nothing. This was considered acceptable for an unsupported platform.
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)
Description of Change
nameandsvgprops mutually exclusive so sending one or the other is mandatory and sending both impossible--removing in-component conditional behaviorheightandwidthprops either both optional or both required, locking down consumers to sending either:SvgPropsand no longer includes props:namewhich became redundant with typing changes guaranteeing a name or custom SVG andpreventScalingwhich is a flag to control height/width values, but isn't directly used for displayfillchangesScreenshots/Video
iOS (similar tests performed on Android/Web and working fine):
https://github.com/department-of-veterans-affairs/va-mobile-library/assets/8690976/d8ef2215-1412-4bc4-9b85-4e128c251c77
Testing
PR Checklist
Code reviewer validation:
changeloglabel applied if it's to be included in the changelogPublish
If changes warrant a new version per the versioning guidelines and the PR is approved and ready to merge:
maininto branchmain