Kendo Components Look Different After npm install

[Scott]

I am using various kendo components in my website. I recently added the uuid package to the project (> npm install uuid), and this somehow triggered a problem with my entire project. Now some of the kendo components look different. 

It should look like this (kendo dropdown and kendo button):

but it instead looks like this 

I primarily notice the problem in the buttons, but I also notice it within the editor itself. What should I do? I don't see any sort of errors in the console. 

[Ivo]

Hi Scott,

The Kendo UI for Angular packages (Buttons, Inputs, DropDowns, DateInputs and TreeView) received major rendering changes, which require updating the components to the latest version:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

And the latest version of our components require the latest version (v5) of Kendo Themes to be used.

There were quite some breaking changes in Kendo Themes v5. You can find the changelog here.

Some of the bigger changes are that the Inputs/DateInputs and the DropDowns are now 100% in width and also the SCSS variables are renamed (the same name with added kendo prefix). For example, $treeview-font-size is now $kendo-treeview-font-size. If you are using SCSS in your application and you have customized some of the Kendo Themes variables, you will need to update their names accordingly. Have in mind that only the variables of the components that were updated (Buttons, Inputs, DropDowns, DateInputs and TreeView) are changed.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik