[SkeletonThumbnail] Thumbnail and SkeletonThumbnail sizes differ

[mbaumbach]

Issue summary

The SkeletonThumbnail and Thumbnail each provide a size prop, but the resulting size of the elements differ which can cause shifting should a SkeletonThumbnail be replaced with a Thumbnail after loading is completed.

Expected behavior

When using the same size prop for both SkeletonThumbnail and Thumbnail the elements will take up the same width and height on the page.

Actual behavior

The following shows the widths and heights of the various sizes of the two components:

SkeletonThumbnail
small: 30x30
medium: 40x40
large: 50x50

Thumbnail
small: 40x40
medium: 60x60
large: 80x80

While they don't line up for any size, they also scale at different rates, with SkeletonThumbnail going up by increments of 10x10 pixels with each size and Thumbnail going up by 20x20 pixels.

Steps to reproduce the problem

1. Create a SkeletonThumbnail with any size.
2. Create a Thumbnail of the same size.
3. Compare the sizes of the width and height.

Reduced test case

This CodeSandbox shows the various SkeletonThumbnail and Thumbnails side by side: https://codesandbox.io/s/ox1wvq3r89

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.9.0
• Browser: Google Chrome Version 72.0.3626.121 (Official Build) (64-bit)
• Device: MacBook Pro
• Operating System: macOS High Sierra 10.14.3

[chloerice]

Thanks for raising this @mbaumbach, putting up a fix now!

[chloerice]

v3.10.0 was just released with this fix among a bunch of other goodies 😁

[mbaumbach]

Thanks for the fast turnaround @chloerice! Fix is working great and we already deployed it to our production apps. :)