Usage of <Box as="img" /> in 15.1.0

[BlakePetersen]

Aloha Gang! I’m working through upgrading console to 15.1.0 and wanted to confirm an update to a pattern I’ve noticed that doesn’t seem to work after the upgrade.

Basically, it’s the usage of the Box primitive as images like this…

<Box
  as="img"
  src={srcImage}
  alt="Generic dependency state illustration"
  width="45"
  height="45"
/>

I noticed that some SVGs we’re no longer honoring the inline width/height properties being defined in the box props and were rendering like

I’m assuming this pattern is no longer supported but wanted to confirm the fix would be to switch this to be a simple …

<img
  src={srcImage}
  alt=""
  width={45}
  height={45}
/>

and for instances where we are using spacing variables that still need to be parsed, add those to a simple box wrapper like…

<Box
  as="img"
  src={srcImage}
  alt="Generic dependency state illustration"
  width="size20"
/>

going to

<Box width="size20">
  <img src={srcImage} alt="" />
</Box>

Everything appears to be rendering OK but I wanted to run this by the pros in case I overlooked something else somewhere. I checked the Media Object component but I don't think this is the appropriate use-case as it expects to contain an image alongside a content body. It doesn't look like there's anything else related to "box as img", "box as image", etc. "Image" brought me to the best practices discussion that pointed me toward Media Object.

Thanks in advance.

[SiTaggart]

Hi @BlakePetersen

Can you tell me what srcImage is? Plus what the Browser is rendering in the DOM?

I made a minimal reproduction and it looks to be working as expected in CodeSandbox https://codesandbox.io/s/box-as-image-reproduction-euxmdg

Thanks

[BlakePetersen]

This is the image markup from the screenshot

<img data-paste-element="BOX" src="/event-streams/webhooks.svg" alt="webhook image" class="css-1pbqgkt">

It looks like I conflated the change to the tag with updating the width/height props from strings to numbers. I didn't copy the first problem example correctly and provided it with those values converted to numbers already (it's been updated to accurately reflect the issue at hand).

so width={45} and not width="45" and we're golden. =]

[SiTaggart]

Interesting!

This happened between in the 11.2 > 11.3 release where we started using createShouldForwardProp to prevent html attributes being sprouted for style props. https://paste.twilio.design/core/changelog#11-3-0

What that led to, is the removal of width and height attributes being applied to the DOM node, which was working for the case images by accident.