v11 to v12
v11 to v12
This guide outlines how to manage breaking changes when migrating from version 10 to version 11 of Cosmos Web.
Select Component CSS Variable
The previous --cosmos-select-options-* prefix has been replaced with a clearer and more consistent naming convention. Please update your styles to use the new variables going forward:
Removed 🚫 | Use ✅ |
|---|---|
--cosmos-select-options-background-color | --cosmos-select-listbox-background-color |
--cosmos-select-options-border-radius | --cosmos-select-listbox-border-radius |
--cosmos-select-options-max-height | --cosmos-select-listbox-max-height |
--cosmos-select-options-padding | --cosmos-select-listbox-padding |
Wrapper Libraries
Built-in wrapper support inside @cosmos/web and @cosmos/web-scoped has been deprecated and removed. To improve modularity and maintainability, standalone wrapper packages are now provided per framework. To migrate, use the new standalone wrapper packages:
💡 Scoped Web Components
For the scoped variant of Cosmos the dependency needs to be replaced with the scoped package e.g. @cosmos/web-scoped-preact.
Read more about it in the Scoped Web Components guidelines.
Removed 🚫 | Use ✅ |
|---|---|
@cosmos/web/angular | @cosmos/web-angular |
@cosmos/web-scoped/angular | @cosmos/web-scoped-angular |
@cosmos/web/preact | @cosmos/web-preact |
@cosmos/web-scoped/preact | @cosmos/web-scoped-preact |
@cosmos/web/react | @cosmos/web-react |
@cosmos/web-scoped/react | @cosmos/web-scoped-react |
@cosmos/web/vue | @cosmos/web-vue |
@cosmos/web-scoped/vue | @cosmos/web-scoped-vue |