Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
seangolob opened this issue Feb 7, 2025 · 0 comments
Open

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

seangolob opened this issue Feb 7, 2025 · 0 comments
Assignees
Labels
brand bug Something isn't working

Comments

@seangolob
Copy link
Collaborator

seangolob commented Feb 7, 2025

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 seangolob added the bug Something isn't working label Feb 7, 2025
@rezrah rezrah self-assigned this Feb 10, 2025
@rezrah rezrah added the brand label Feb 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
brand bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants