Unplanned
Last Updated: 18 Mar 2024 14:11 by Navya
Created by: Navya
Comments: 0
Type: Feature Request
2

Hi, Team!

Currently, the Kendo Material theme is compliant with Material Design 2. I would like to request compliance with Material Design 3. 

Unplanned
Last Updated: 12 Mar 2024 09:19 by Michael D

Kendo SASS themes allow the definition of a variety of colors for grid rows that are applied in different situations:

  • $grid-alt-bg defines the color of alternate rows
  • $grid-selected-bg defines the color of selected rows
  • $grid-selected-alt-bg defines the color of selected alternate rows

However, at least in @progress/kendo-theme-classic (v. 5.4.1), $grid-selected-alt-bg is only applied for locked columns. You can check that by doing a string-search for "$grid-selected-alt-bg" in dist/all.scss. I have not checked if the same happens when using other themes.

Won't Fix
Last Updated: 21 Feb 2024 09:43 by ADMIN

When setting the Toolbar's "size" property to "none", the Kendo-UI SASS themes apply a default spacing of 0 between all items. This can be adapted by altering the $kendo-toolbar-spacing variable. However, adding a value bigger than 0 leads to additional space before the first toolbar item.

This DOJO reproduces the behavior (since SASS-variables cannot be adapted in the DOJO-editor, I have mimicked the effect by setting appropriate styles to the container).

Note that this only happens if the toolbar's size is set to "none".

Kendo Theme Version: 7.0.2

Unplanned
Last Updated: 06 Feb 2024 08:19 by Jeremy

I would like to request that Telerik host all of the required nuget packages for Telerik.ui.for.Blazor on Telerik's nuget server.

Currently, all of the packages are there except for Telerik.FontIcons and Telerik.SvgIcons which are hosted on nuget.org instead. This is inconvenient when using Package Source mapping, where ideally all Telerik.* packages can be sourced direct from Telerik.

Unplanned
Last Updated: 05 Feb 2024 14:35 by ADMIN

The Kendo-UI "Classic" SASS theme supports the $kendo-calendar-cell-border variable. However, its value is never applied. This also means that variables like $kendo-calendar-cell-selected-border etc. do not have any effect, because they only set the border-color, but not the border itself.

Kendo Theme Version 7.0.2

Unplanned
Last Updated: 02 Feb 2024 08:34 by ADMIN

The Kendo-UI SASS themes support setting the amount of spacing between items using the $kendo-pager-item-spacing variable. However, no spacing is added between the next/previous buttons and the "number" section.

Also, spacing does not work properly if the "select" element is disabled and therefore not displayed.

Kendo Theme Version: 7.0.2

Pending Review
Last Updated: 14 Jul 2023 08:11 by ADMIN
Created by: Mathias
Comments: 1
Type: Feature Request
1

Some of our customers prefer a seamless design integration of their individual software solutions into the SAP ecosystem (e.g. in context of the BTP platform). So it would be nice to have a SAP Fiori theme like in Kendo UI for jQuery:

Unplanned
Last Updated: 12 Jun 2023 09:21 by ADMIN

See here:

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#LL804C1-L804C24

$input-btn-border-width is now a custom variable.

(see bootstrap 5.2 version: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss#L738 where $input-btn-border-width was a simple scss variable)

The main problem is that on file:

@progress\kendo-theme-bootstrap\scss\input\_variables.scss you are using:

$kendo-input-border-width: $input-border-width !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

so scss compilation gives me an error:

SassError: Undefined operation "var(--bs-border-width) * 2".
   ╷
10 │ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

My temporary fix is to define, before importing _variables file:

$kendo-input-border-width: 1px !default;

Basically, the main problem is that package @progress/kendo-theme-bootstrap 6.4.0 with bootstrap 5.3 doesn't work anymore.

Thanks.

Diego

Completed
Last Updated: 11 May 2023 13:29 by ADMIN

Using the latest Classic Kendo theme, when showing a grid with a pager, the button indicating the currently selected page has a background that's a function of the button's text color (opacity .2). This results in a background color that lacks sufficient contrast with the text color which is not compliant with WCAG contrast rules for display text.

https://webaim.org/resources/contrastchecker/?fcolor=F35800&bcolor=F1D2C0

#F35800 is the default primary button color in the default theme and F1D2C0 is the color that results from the interaction between a background with opacity .2 laid over the default background grey #F0F0F0. I've attached a screenshot of the PowerToys color picker showing the computed color of the button.

The button background color needs to pass all of the WCAG checks in the above link in our application and really should by default in my opinion.

Declined
Last Updated: 26 Apr 2023 13:16 by ADMIN
Created by: Jan
Comments: 2
Type: Feature Request
0

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

  1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
  2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

Declined
Last Updated: 20 Apr 2023 04:12 by Ryan

Hello,

I'm adding sass-loader to my webpack build so that I can keep up to date with the latest theme builds more easily. We simply use the default theme.

Webpack is giving me the following warning, however ...


WARNING in ./node_modules/@progress/kendo-theme-default/dist/all.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@progress/kendo-theme-default/dist/all.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($a, $b) or calc($a / $b) More info and automated migrator: https://sass-lang.com/d/slash-div node_modules\@progress\kendo-theme-default\dist\all.scss 1039:15 k-math-div() node_modules\@progress\kendo-theme-default\dist\all.scss 4138:21 root stylesheet @ ./node_modules/@progress/kendo-theme-default/dist/all.scss 8:6-188 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-158 77:0-158 78:22-29 78:33-47 78:50-64 55:4-68:5 1 warning has detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Unplanned
Last Updated: 19 Apr 2023 16:34 by ADMIN
Created by: David
Comments: 0
Type: Feature Request
3
As per this forum post you have stopped distributing minified theme css files as of R1 2023 SP1 (v 2023.1.314). It would be good if you could continue to provide minified theme css files to minimise impact on page rendering times.
Declined
Last Updated: 19 Apr 2023 16:34 by ADMIN

 

Are there plans to improve 2.0.0 compatibility with kendo themes? math/calc should still be backwards compatible.

Declined
Last Updated: 04 Apr 2023 07:16 by ADMIN
Created by: Levi
Comments: 1
Type: Feature Request
5
When creating a custom build, it's highly impractical to trim down the theme css. The Less source breaks out common widget properties, but the primary themable file lumps all widgets together into a single massive file. It would be nice if this could be split apart further to trim out unused widget styles entirely.
Declined
Last Updated: 04 Apr 2023 07:08 by ADMIN
It would be nice if Theme variables would be separated into a different file, to make it possible to import those variables into your own site.less. 
This way colors etc can be re-used across the entire site.
Unplanned
Last Updated: 16 Mar 2023 10:47 by Michael
Created by: Michael
Comments: 0
Type: Feature Request
0
Please include the theme version number in the CSS file. This will make maintenance during product version changes a lot easier.
Completed
Last Updated: 03 Nov 2022 10:56 by ADMIN
Release R1.2023-Increment.1(09.Nov.2022)

Hi Kendo Team,

after we updated to version 2022.2.301 we decided to modify our theme by compiling the Metro theme from the source files and adjusting some of the variables provided.

When working on the multiselect styles however we noticed that changing the variable '@chip-solid-hover-text' in the 'type-metro.less' file did not lead to any change. The attached screenshot shows that the chip still keeps its black text color on hover even though the variable was set to white.

We inspected the _theme.less file in the folder Default/chip and noticed that the variable is not used by the theme (see screenshot).  Looking at the code this also seems to be the case for the 'selected' styles.

We can add additional styles to fix that on our end but since there is a variable for both cases I am sure this is just an oversight and wasn't planned.

 

Thanks,

Markus

 

Unplanned
Last Updated: 03 Nov 2022 08:43 by B
The Splitter splitbar and the resize handle rely only on a background color, which is lost in high contrast mode.

To reproduce, enable High Contrast mode in the OS and then go to any Splitter demo.
Completed
Last Updated: 31 Oct 2022 15:16 by ADMIN

Bug report

Reproduction of the problem

Dojo example.

Current behavior

The mobile material theme does not apply specific styles to a button that has the "km-primary" class. Compare to the Nova mobile theme, which does have specific rules that use ".km-primary" selector.

Expected/desired behavior

CSS rules that use the ".km-primary" selector should be added to the theme.

Environment

  • Kendo UI version: 2019.2.619
  • jQuery version: x.y
  • Browser: [all]
Completed
Last Updated: 29 Sep 2022 15:06 by ADMIN

The problem is easily reproduced using the widget demo page https://demos.telerik.com/kendo-ui/dropdowntree/index

Simply switch to the High Contrast theme; the k-widget element is lacking the border-radius style hence looks different to the other widgets.

It looks like the k-dropdowntree class is missing from the following style rule:

.k-autocomplete, .k-block, .k-calendar-container, .k-colorpicker, .k-combobox, .k-datepicker, .k-datetimepicker, .k-drag-clue, .k-dropdown, .k-dropdown-wrap, .k-editor-inline, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-inline-block, .k-list-container, .k-multiselect, .k-notification, .k-numeric-wrap, .k-numerictextbox, .k-picker-wrap, .k-slider-selection, .k-slider-track, .k-split-button, .k-textbox, .k-tile, .k-timepicker, .k-tooltip, .k-touch-scrollbar, .k-treeview .k-in, .k-upload, .k-window, .k-window-action, .k-window-titleless .k-window-content {
    border-radius: 13px
}

 

1 2 3 4 5