BUG - Sev-3 - Web - Icon scaling does not work

narin commented 5 months ago

What happened?

Icon scaling does not seem to work for the Icon component in Storybook web.

Update: This bug also manifests in the soon-to-be-added Link component when sending overrides for icon size. Likely, fixing in the Icon component should also do so for the Link.

Update 2: A potentially related bug noted working on #165 is that Web Storybook also does not center the SVG path portion of the icon as it should. This is most easily visible for the "Directions" Link variant where the "road" icon is much higher up than it should be relative to the text. It can be more fully be observed bringing up the browser console (F12) and using the inspecting tool (top left of console) to see that the SVG path is aligned against the edge of the 24x24 icon box instead of centered. This also impacts horizontal centering as can be seen with the "Text" Link variant. In iOS/Android, the SVG path is correctly centered.

Steps to Reproduce

Open an Icon -> Preloaded Icon in Storybook
Adjust the width or height in the sidebar

Desired behavior

Icon dimensions should change

Acceptance Criteria

[x] Adjusting width and height in Storybook web should increase/decrease its size in the browser

Bug Severity - BE SURE TO ADD THE SEVERITY LABEL

See [Bug Tracking](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/QA#issue-severity) for details on severity levels

Impact: Low
Frequency: High

3 - Low

Linked to Story

Screen shot(s) and additional information

Full JSON response for services related to issue (expand/collapse)

Ticket Checklist

[ ] Steps to reproduce are defined
[ ] Desired behavior is added
[ ] Labels added (front-end, back-end, relevant feature, accessibility, etc)
[ ] Estimate of 1 added (for front-end tickets)

TimRoe commented 4 months ago

Updated ticket to note:

Update: This bug also manifests in the soon-to-be-added Link component when sending overrides for icon size. Likely, fixing in the Icon component should also do so for the Link.

TimRoe commented 4 months ago

Updated the ticket to note:

Update 2: A potentially related bug noted working on #165 is that Web Storybook also does not center the SVG path portion of the icon as it should. This is most easily visible for the "Directions" Link variant where the "road" icon is much higher up than it should be relative to the text. It can be more fully be observed bringing up the browser console (F12) and using the inspecting tool (top left of console) to see that the SVG path is aligned against the edge of the 24x24 icon box instead of centered. This also impacts horizontal centering as can be seen with the "Text" Link variant. In iOS/Android, the SVG path is correctly centered.

TimRoe commented 3 months ago

Bug and both "update" additions were fixed with this ticket (among some other Icon component improvements).

department-of-veterans-affairs / va-mobile-library