Flash has auto styling that interfere with SVG elements

liranelisha commented 1 year ago

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 commented 1 year ago

Here is another reproduction:

github-actions[bot] commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

lukasoppermann commented 1 year ago

Yes. 👍

github-actions[bot] commented 6 months ago

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 commented 6 months ago

sill happening... any updates @lukasoppermann ?

lukasoppermann commented 6 months ago

@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 commented 1 month ago

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

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

liranelisha commented 1 month ago

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

primer / react