search

telerik / kendo-themes

Monorepo for SASS-based Kendo UI themes
148 stars 69 forks source link

Expand/collapse icons in some Blazor components do not have cursor: pointer #3433

Open ntacheva opened 2 years ago

ntacheva commented 2 years ago

Describe the bug

In UI for Blazor hovering over the expand/collapse icons of some components displays the default cursor instead of pointer. For example, TreeList, Gantt, grouped Grid.

The issue stems from the lack of a k-widget class in Blazor components that targets the cursor pointer in the themes:

https://github.com/telerik/kendo-themes/blob/master/packages/default/scss/icons/_layout.scss#L103

To reproduce

Steps to reproduce the behavior:

  1. Go to the TreeList demo, Gantt demo, Grid Grouping demo (group the Grid by some field to see the icons) or Grid Hierarchy demo
  2. Hover some expand/collapse icon
  3. The default cursor is shown while it should be a pointer one as in the TreeView component

Expected behavior

Hovering over the expand/collapse icons in the components should display cursor: pointer instead of the default one.

Affected package (please remove the unneeded items)

Affected suites (please remove the unneeded items)

Affected browsers (please remove the unneeded items)

TeyaVes commented 2 years ago

Generally, the icon element should not have any interactivity and the cursor: pointer style should not be added to the icon element itself, but rather assigned to a wrapper element.

This is the case with the TreeView component where the cursor: pointer style is added to the wrapper of the icon- the k-treeview-toggle element.

I would suggest a similar thing for the Treelist, Gantt and GridGrouping- either adding a wrapper element with a toggle class and adding cursor: pointer style inside the themes, or adding a wrapper with the following utility class- k-cursor-pointer which would add the needed style.

@jivanova

jivanova commented 2 years ago

@TeyaVes I thought that we are moving away from the "k-widget" class. If that is correct, I believe we should define the rendering in this item and sync all teams. Either k-cursor-pointer or another class is a good approach for us. We should add it in packages html, or in a test once decided so that everyone will have it as a reference.

TeyaVes commented 2 years ago

@jivanova , yes, you are correct, we are moving away from the 'k-widget' class. Once I add the needed wrapper in the packages/html, I'll update the issue here as well.