Flash has auto styling that interfere with SVG elements

[liranelisha]

Description

I am writing to report an issue with a Flash component that I have been using on my website. The component appears to have an auto-styling feature that is interfering with the SVG elements on my web pages.

Specifically, the auto-styling feature is causing the SVG elements to be displayed incorrectly with fixed marginRight of 2 (8px). This is an issue, as the SVG elements are a part of the design and functionality of my pages.

I have tried adjusting the CSS styles for the SVG elements to no avail, as the auto-styling seems to get a priority. The only way to resolve the issue seems to be to add the !important.

I would greatly appreciate it if you could look into this issue and provide a solution as soon as possible. If necessary, I can provide you with access to my website and the code for the Flash component and the SVG elements.

Thank you for your prompt attention to this matter.

Steps to reproduce

create a StyledOcticon inside a Flash component

Version

35.21.0

Browser

No response

[dejnon]

Here is another reproduction:

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[liranelisha]

this issue was seen in the devportal
example: https://devportal.githubapp.com/devportal/apps/github?tab=deployments
when we have the "external link" icon when the text include a link to external source

[lesliecdubs]

Thanks for the report, this does seem to be a bug.

Internal note: I am removing the react label from this issue for now so that Primer Design can hopefully prioritize this. @tallys let us know if that's not doable.

[tallys]

@lukasoppermann let's take a look at this as part of our work on flash/banner

[lukasoppermann]

Yes. 👍

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[liranelisha]

sill happening... any updates @lukasoppermann ?

[lukasoppermann]

@liranelisha we will keep this in mind for the new component.

CC: @JoseInTheArena should we add the react to make sure it is address in #4335 ?

[lukasoppermann]

@liranelisha could you verify that the issue is fixed in the new component?

https://primer.style/components/banner/react/draft

[liranelisha]

i think we are currently unable to upgrade to version 36.27.0 as it cause some unit testing fails on our side. but i'll keep on my list to test it and reopen if needed once upgraded

[TylerJDev]

Hey @liranelisha! 👋

Just to confirm, does using !important unblock you here? I took a look at the issue, and there isn't a great fix here as the intention was that there'd only be one icon present in Flash at a given time, with that icon being the very first inside the Flash. While not ideal, I think the !important might be the best way to go here 🤔

We're eventually planning on deprecating the Flash component and suggest that consumers utilize the Banner component instead. If you need help with debugging any issues with upgrading Primer in your project, definitely feel free to create another issue, or leave a message for us in #primer!

I'm going to close this issue for now, but happy to continue the conversation here or to reopen the issue!