Open
Description
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:
With picture tag:
Browsers
No response
OS
No response