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

[gabyrfp]

Carbon-ibm-products overrides carbon-react styling

What package(s) are you using?

• Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• Carbon React
• Carbon Styles
• Legacy/CDAI
• Legacy/Security

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:

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

• Screenshots or code
• Notes

[kevinquinnw]

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]

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]

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

[elycheea]

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

[lee-chase]

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

[ljcarot]

@elycheea okay to close ?

[elycheea]

@ljcarot Yes. Let’s close this. We added a section on including styles in the Developing section of the new website too. 😉