Using theme with compiled SCSS is opaque and import order seems to be way too important

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 08 Nov 2020 16:00 by Matthew

Tau Sick

Created on: 30 Oct 2020 14:40

Category: Kendo UI for Angular

Type: Bug Report

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 Dyankova

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/.