brand icon indicating copy to clipboard operation
brand copied to clipboard

🐛 [BUG] - Bento visual with picture tag style issues

Open seangolob opened this issue 11 months ago • 0 comments

Describe the bug

Hi PB team!

I am currently working on enhancing one of our implementations of the Bento component and I am running into style issues when I convert the image tag to use a picture tag.

I believe this issue stems from a check in the code to make sure a child is an img tag before applying a style.

https://github.com/primer/brand/blob/main/packages/react/src/Bento/Bento.tsx#L324

I have a workaround in place so I am not blocked by this issue.

Reproduction steps

This issue was encountered during the dev process so there are no examples in production to see.

1. Using a `Bento` component, add a `Bento.Visual` with a `picture` tag

const imageSources = [....]

...

<Bento.Visual position="50% 100%" padding="normal">
 <picture>
          {imageSources.map(source => (
            <source key={source.media} srcSet={source.srcset} media={source.media} />
          ))}
          <img
            src={image.fields.file.url}
            alt={image.fields.description}
          />
 </picture>
</Bento.Visual>

Expected behavior

I would expect the `position` prop to be applied to the image. I would expect the `image` to fill in the `picture` tag.

Screenshots

Without picture tag:

Image

With picture tag:

Image

Browsers

No response

OS

No response

seangolob avatar Feb 07 '25 19:02 seangolob