Documentation Update: Carbon Components Style (Modal CSS classes)

[TarcanGul]

Hello!

Recently I have been using the Carbon Components React library in my web application. I wanted to override some of the style for the Modal component to fit the visuals of my application. Overriding the classes that were given in documentation (ex. .bx--modal-container) did not work for me. After inspecting my web application, I have seen that .cds--modal-container was the actual name of the CSS class that was used. This means that the documentation in https://v10.carbondesignsystem.com/components/modal/style/ (and possibly other components) needs to be updated to reflect the change in the name of the CSS classes. That would help a lot for new developers that is starting to use the Carbon components and wanting to customize them visually.

Thank you for your time!

[AlanGreene]

@TarcanGul What version of Carbon are you using and which package specifically?

If you're using [email protected] that means you're using Carbon 10.

If you're using [email protected] (deprecated) or @carbon/react (preferred) that means you're using Carbon 11.

The documentation links you shared are pointing to Carbon v10, which did indeed use the bx prefix for classnames.

In v11 the prefix was changed to cds as documented in the migration guide.

The v11 equivalent for the page you linked is https://carbondesignsystem.com/components/modal/style/ (note no v10 prefix on the domain).

[tay1orjones]

Yeah, the prefix change is expected between v10 and v11. Additionally, v10 has reached it's end of support and we recommend moving to v11 w/ @carbon/react.