Calcite-components: Bug: Conflicting class names in scoped components

[joeyHarig]

Actual Behavior

The <div/> rendered inside of calcite-radio-button has a class of "container". This is a very common class name in many apps and may cause conflicting style declarations. This is the case in ArcGIS Monitor.

Can we change the class name to something more specific: "calcite-radio-button-container"?

Updated by @jcfranco: This should namespace classes used by all scoped components:

• calcite-inline-editable
• calcite-input
• calcite-label
• calcite-radio-button

Relevant Info

_Version_: @esri/[email protected]

[driskull]

@eriklharper more reason to make all of our components shadowed :D

[eriklharper]

I'm surprised Stencil's scoped feature doesn't BEM-ify or randomize that class name. We can totally remove that classname and just target the div directly in the CSS as a fast fix.

[jcfranco]

This issue should tackle namespacing CSS classes used by all scoped components. Fortunately, there's only 4 at the moment. I've updated the description.

We'll tackle moving these to shadow DOM in a separate issue.

[driskull]

Maybe we can shadowDom them next sprint?