Closed cuppajoey closed 3 weeks ago
Hi @cuppajoey , can you please check this stackblitz? I just added the index.scss
with use @carbon/react
.
https://stackblitz.com/edit/github-utkywz-ag6nfs?file=src%2FApp.jsx,src%2Findex.scss,src%2Fmain.jsx
Hi @cuppajoey , can you please check this stackblitz? I just added the
index.scss
withuse @carbon/react
. https://stackblitz.com/edit/github-utkywz-ag6nfs?file=src%2FApp.jsx,src%2Findex.scss,src%2Fmain.jsx
@Gururajj77 I understand that it works if you import Carbon's entire stylesheet, but that's not the issue. Carbon supports importing individual component stylesheets for consumers who don't want the entire bundle. For those consumers the import order causes an issue, as demonstrated in the original StackBlitz.
Yep, I think we should do both:
:not()
might be helpful.
Package
@carbon/react
Browser
Chrome
Package version
v1.60.0
React version
v18.2.0
Description
When importing component-level stylesheets, rather than the full carbon stylesheet,
Button
's styles will overrideOverflowMenu
's if the button stylesheet is imported later.This is because
OverflowMenu
does not set the renderedIconButton
'skind
prop which defaults to primary and the style selectors have an equal specificity (.cds--btn--primary
vs.cds--overflow-menu
).💡 Possible solution
The documentation for
OverflowMenu
states that it should only render a ghost button style. If that's true, we should set thekind="ghost"
which would prevent primary button styles from overriding it.At the very least, we should set "ghost" as a default value and allow consumers to change it.
Reproduction/example
https://stackblitz.com/edit/github-utkywz?file=src%2FApp.jsx,src%2Fbutton.scss,src%2Foverflow.scss
Steps to reproduce
Button
and anOverflowMenu
with default values.@carbon/styles/scss/components/overflow-menu
.@carbon/styles/scss/components/button
.OverflowMenu
adoptButton
's primary styles.Suggested Severity
Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.
Application/PAL
No response
Code of Conduct