search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
88 stars 126 forks source link

Add `@carbon/ibm-products` style import examples in docs #3497

Open gabyrfp opened 9 months ago

gabyrfp commented 9 months ago

Carbon-ibm-products overrides carbon-react styling

What package(s) are you using?

Detailed description

Describe in detail the issue you're having.

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

I am working with @carbon/react components and one @carbon/ibm-products component (tearsheet). To get the styling for the tearsheet, I added @use '@carbon/ibm-products/scss/index'; to my global style file which contains other Carbon styles. Doing this makes my tearsheet look right, but the other components in my app like the elements in my Carbon header bar and my Carbon table now have warped styling:

image image

The first screenshot shows the styling of my carbon react components without the import from ibm-products and the second is with.

I tried using @use '@carbon/ibm-products/scss/index-without-carbon.scss' as well, but that didn't change anything.

Steps to reproduce the issue

  1. Step one
  2. Step two
  3. Step three
  4. etc.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/SidePanel

  1. Create a carbon react project with the recommended styling file
  2. Add a carbon/ibm-products component and add the line @use '@carbon/ibm-products/scss/index-without-carbon.scss' to the original carbon styling file
  3. You will see the carbon react components now have warped styling.

Additional information

kevinquinnw commented 9 months ago

Hey I am the having the same problem as well, I am currently on:

"@carbon/ibm-products": "^2.10.2",
"@carbon/react": "^1.37.0"
"sass": "1.64.2"

I am glad I am not the only one with this problem!

gabyrfp commented 9 months ago

I was able to resolve this issue by using @use '@carbon/ibm-products/scss/index-full-carbon'; This should be added to the documentation as the styling required for using @carbon/react alongside @carbon/ibm-products

kevinquinnw commented 9 months ago

Thanks so much for figuring this out! Couldn't find this information anywhere

elycheea commented 9 months ago

Hey, thanks for reaching out about this. We can review our docs to ensure that this is reflected more clearly.

lee-chase commented 3 months ago

Not sure what was happening here and it is tricky to figure out without example code. It certainly should not be necessary to import @carbon/ibm-products/scss/index-full-carbon.

Ordinarily i use

@use "@carbon/react" with (
  $font-path: "@ibm/plex"
);
@use "@carbon/ibm-products/css/index-without-carbon";

If anyone is still suffering from this issue @elycheea then please ask them to modify this CodeSandbox to demonstrate the issue. Otherwise I would close the issue.

https://codesandbox.io/p/devbox/carbon-and-ibm-products-import-t4l4wv?file=%2Fsrc%2Findex.scss