Completed
Last Updated: 08 Nov 2020 16:00 by Matthew
Tau Sick
Created on: 30 Oct 2020 14:40
Category: Kendo UI for Angular 2+
Type: Bug Report
1
Using theme with compiled SCSS is opaque and import order seems to be way too important

I very recently tried to update kendo UI to the latest version (from kendo-default-theme 4.23.0 to latest), and ran into a lot of problems, caused by the fact that I don't use the precompiled css theme styles. (removing the "node_modules/@progress/kendo-theme-default/dist/all.css" from the styles array in angular.json)

It is very opaque which styles needs to be imported for which module, and in what order they to be imported, since that seems to matter too.
Especially because there are no documentation for this at all.

For example, to get the styles for the new kendo-textbox component, the following needs to be imported in the styles.scss, AND in that specific order.

button needs to be first, and forms has to be before textbox and input

@import '~@progress/kendo-theme-default/scss/button/_index.scss';
@import '~@progress/kendo-theme-default/scss/forms/_index.scss';
@import '~@progress/kendo-theme-default/scss/textbox/_index.scss';
@import '~@progress/kendo-theme-default/scss/input/_index.scss';

which means that none of the following will compile: 

@import '~@progress/kendo-theme-default/scss/forms/_index.scss';
@import '~@progress/kendo-theme-default/scss/button/_index.scss';
@import '~@progress/kendo-theme-default/scss/input/_index.scss';
@import '~@progress/kendo-theme-default/scss/textbox/_index.scss';
@import '~@progress/kendo-theme-default/scss/button/_index.scss';
@import '~@progress/kendo-theme-default/scss/input/_index.scss';
@import '~@progress/kendo-theme-default/scss/forms/_index.scss';
@import '~@progress/kendo-theme-default/scss/textbox/_index.scss';

 

As i see it there are two reasonable ways to solve this, where the first obviously results in the best user experience:

  • Refactor the styles "modules" to be 1:1 with either the angular module or the specific component, so using one module/component results in a single SCSS import only
  • Create documentation that very explicitly states what files to import and in what order they need to be imported when using compiled SCSS
2 comments
Matthew
Posted on: 08 Nov 2020 16:00
Having addressed the import order issue is appreciated.  Documentation about which scss files need to be imported for which modules is sorely needed. 
ADMIN
Iliana Nikolova
Posted on: 06 Nov 2020 12:25

Hi Tau,

I am glad to inform you that the issue related to the import order has been already addressed - yesterday we released new versions of the themes and now each component can be built separately with all required dependencies. Themes versions which contain the fix are as follows:

 - @progress/kendo-theme-bootstrap@4.23.2
 - @progress/kendo-theme-default@4.25.2
 - @progress/kendo-theme-material@3.21.2

Regarding the documentation, we are currently working on improving the documentation related to the themes. 

Let me know if you have any further questions on this matter or I could assist you further.

Regards,
Iliana Nikolova
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.