You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
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 apicture
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
Expected behavior
Screenshots
Without picture tag:
With picture tag:
Browsers
No response
OS
No response
The text was updated successfully, but these errors were encountered: