🐛 Bug - Note styles override link button colours
denkristoffer opened this issue · comments
Forma 36 bug report
Summary
If you render a <Button as="a" /> in a Note, the Note variant styles are currently overriding the button's colour because of this line:
forma-36/packages/components/note/src/Note.styles.tsx
Lines 14 to 16 in 0e528be
Is there a way we can select something like a:not(our-button-component)?
Is this a bug or a design implementation issue? @domarku
my question is: do we want a link that looks like a button inside a note?
Also, just looking by the code, it seems that the intention here was to change the color of the link depending on the variant of the Note
I would say the easiest way to "fix" this is to change the styles in the Button component to enforce it to keep the white color when it has as="a"
my question is: do we want a link that looks like a button inside a note?
I would say we do, we use it quite a few places where we want an obvious primary action inside a note, like these EAP signups. I don't think a TextLink is eye-catching enough for that.
I would say the easiest way to "fix" this is to change the styles in the Button component to enforce it to keep the white color when it has as="a"
How would you do this?
@gui-santos Ping 🙂
Marking issue as stale since there was no acitivty for 30 days
Marking issue as stale since there was no activity for 30 days
@denkristoffer should we close this? I do not think we can fix it without removing the general rule for links in the note.styles this is one of the big downsides of css-in-js imho. If we would have proper class names we could prevent the button style from beeing overwrittin by hooking on the generic button class :(
Marking issue as stale since there was no activity for 30 days