Skip to content

fix: use carbon prefix directly from @carbon/styles package config#8904

Open
makafsal wants to merge 70 commits intocarbon-design-system:mainfrom
makafsal:cherry-pick-pr-7640
Open

fix: use carbon prefix directly from @carbon/styles package config#8904
makafsal wants to merge 70 commits intocarbon-design-system:mainfrom
makafsal:cherry-pick-pr-7640

Conversation

@makafsal
Copy link
Member

Cherry-picked changes from PR 7640

Closes #7639

Our current approach of directly referencing c4p-settings.$carbon-prefix causes our library to not support custom prefixing with Carbon. If someone attempts to add custom prefixing with base Carbon, the custom prefix won't be applied to any of the Carbon components that we reference directly within our component styles.

Instead, we should be accessing the carbon styles config module directly so that if the prefix is being passed a custom value, we're also using it.

What did you change?

Any sass file in our project that uses c4p-settings.$carbon-prefix

How did you test and verify your work?

Manually added a custom Carbon prefix to our storybook
packages/ibm-products/.storybook/preview.js
Screenshot 2025-06-09 at 11 02 30 AM
packages/ibm-products/.storybook/index.scss
Screenshot 2025-06-09 at 11 02 19 AM

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request section of
our contributing docs.

@makafsal makafsal requested a review from a team as a code owner January 30, 2026 12:29
@makafsal makafsal requested review from anamikaanu96 and szinta and removed request for a team January 30, 2026 12:29
@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for ibm-products-web-components ready!

Name Link
🔨 Latest commit f014353
🔍 Latest deploy log https://app.netlify.com/projects/ibm-products-web-components/deploys/698091924f60c70008dd44c3
😎 Deploy Preview https://deploy-preview-8904--ibm-products-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for carbon-for-ibm-products ready!

Name Link
🔨 Latest commit f014353
🔍 Latest deploy log https://app.netlify.com/projects/carbon-for-ibm-products/deploys/6980919275eeae00087f03c1
😎 Deploy Preview https://deploy-preview-8904--carbon-for-ibm-products.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov
Copy link

codecov bot commented Jan 30, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.26%. Comparing base (68fa72a) to head (f014353).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #8904   +/-   ##
=======================================
  Coverage   80.26%   80.26%           
=======================================
  Files         427      427           
  Lines       19523    19523           
  Branches     4253     4253           
=======================================
  Hits        15671    15671           
  Misses       3852     3852           
Components Coverage Δ
ibm-products 82.25% <ø> (ø)
ibm-products-web-components 77.80% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@makafsal makafsal changed the title fix: use carbon prefix directly from @carbon/styles package config #7640 fix: use carbon prefix directly from @carbon/styles package config Feb 2, 2026
Copy link
Member

@amal-k-joy amal-k-joy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom Carbon prefix (cds): update sass files

3 participants