add Tile Group all variants visual regression test after resolving rendering issues on Chromatic's end

[eriklharper]

Test type

visual regression

Which Component(s)

Tile Group

Unstable Tests

Name of the story is allVariants_NoTest.

Test error, if applicable

No response

PR skipped, if applicable

n/a

Additional Info

Waiting for feedback from Chromatic's team on this, since adding test timeouts doesn't resolve the issue. It appears to not be related to a timeout issue, but something else related to the icons not properly rendering for each variant in the Story.

[github-actions]

Installed and assigned for verification.

[eriklharper]

This is addressed in #8806 . It turns out this isn't an issue with Chromatic, but has to do with how calcite-icon renders SVGs. calcite-icon renders SVGs "lazily" by waiting until the icon comes into the viewport before it renders them. This causes problems with Chromatic snapshots because when there is a very large HTML page that vertically scrolls beyond the default vertical dimension of the viewport, the icons don't show up when Chromatic takes a picture of it. The interesting thing is even though you can specify a viewport height, Chromatic still captures pixels that go beyond that height.

I worked around this issue by refactoring the top of the All Variants story HTML to include all the most recent Tile redesign elements so that the icons show up properly. I removed all variants that require icons to render below the fold and included the new border selection-appearance versions, since those will show up fine in the snapshots.

This is the "above the fold" snapshot that will render the icons correctly in Chromatic:

This is a snippet of the "below the fold" snapshot that will still be captured properly by Chromatic because the icons are removed: