Prefix components class names

[yairEO]

Prefix all components' class names so their selectors' styles will be more "isolated" - having less chance of "colliding" with the CSS selectors of the project which is using Webrix:

Main class names

Ex. collapsible -> wx-collapsible

• [x] Collapsible
• [x] Movable
• [x] Pannable
• [x] Poppable
• [ ] Resizable
• [ ] Scalable
• [ ] Scrollable
• [ ] Stackable

---

Internal class names

All internal class names, used within the components, should be made more resilient, meaning less prone to having potential selectors clashes with the project which is using Webrix.

Ex. .collapsible .content-wrapper

content-wrapper is too generic class name which is likely to be used in project and so, might cause unwanted styles to be applied to the Webrix Collapsible component, and in the worst-case, completely interfere with its function.

Utilizing BEM naming is beneficial in such case:

.wx-collapsible__content-wrapper

---

Notes:

Can keep using static class names, instead of generated ones (via CSS-modules), so developers would be able to easily modify the styles using the existing (Webrix) selectors, or alternatively switch to CSS-modules, which gives the most isolation, but requires developers to pass a className prop whenever it is wished want to modify styles.

I believe the first option is preferable, as it is isolated enough, and is easier for developers to use existing class names instead of defining their own. It's also easier when it is wished to modify Webrix components globally.