[Enhancement]: provide cds- selectors, besides ibm- for Angular Charts

[epuertat]

Application/Team

Ceph

Summary

In order to gain community adoption and confidence from 3rd party contributors, most vendor-supported Open Source Design Systems/ remove explicit vendor references from their APIs/SDKs.

Just to name a few:

• <mat- (Google's Material),
• pf- (Red Hat's Patternfly)
• <clr-(VMWare's Clarity Design System),
• cloudscape- (AWS Cloudscape),
• luci- (NetApp's LUCI)
• bs- (Twitter's Bootstrap), ...

In fact, the Carbon Design System is in many places referred as CDS/cds- both in docs and sources (API/SDK), and the Carbon Components Angular project already added support for <cds- selectors.

Justification

Ceph community relies on vendor-neutral 3rd parties deps, and the deprecation of Bootstrap UI in favor of the Carbon Design System was subject to the removal of explicit ibm- references (which the Carbon Components Angular team quickly implemented).

Desired UX and success metrics

To increase adoption measured by the number of dependent packages and/or package downloads.

"Must have" functionality

Add extra <cds- selectors.

Specific timeline issues / requests

Ideally before Feb 2025

Available extra resources

Ceph Dashboard team (https://github.com/orgs/ceph/teams/dashboard) can help with reviews.

What priority level would this issue be in your opinion?

P2

[nstuyvesant]

Hi @epuertat - makes sense. Would you be able to submit a PR for multiple selectors for the Angular components? BTW, I recommend adding "Angular" to the title of this issue so it stands out for that particular package.

[nstuyvesant]

As a side note, might be good to have a prefix like "cc-" instead of "cds-" since the latter is broader. The Carbon Charts components for Vue have a prefix "Ccv" so this would roughly follow the same logic. Can't say I love having the "v" in the Vue prefix but it's not as easy to change those without a breaking change as it is for Angular.

[epuertat]

Thanks, @nstuyvesant !

I think it's good to keep the cds- prefix at least, as it provides the proper top-level scope for the component (Carbon Design System) and it's consistent with the rest of the Angular Carbon Components (cds-). I checked in the NPM Registry and there are several Angular libraries that use the cc- prefix.

So the options to make this more specific would be:

• Adding the -chart-part, but then it'd become redundant: cds-chart-simple-bar-chart. We might want to remove the trailing -chart, but that would render this backward incompatible :-(
• Adding the -cc-, but the result doesn't add much value: cds-cc-simple-bar-chart.

In view of that, why not leave it with just as cds- (e.g.: cds-simple-bar-chart), or in the worst case, something like cds-charts- (e.g.: cds-charts-simple-bar-chart) after the carbon-design-system/carbon-charts Github org/repo.

What do you think?