Enable setting the cursor via CSS on the components (loading)

[patrickvuarnoz]

My use case goes like this:

I have a filter box containing wa-selects and wa-radio buttons. When an option changes, it triggers loading of data in the background. While data is loading I want to display a loading cursor on the element. Actually the same cursor behaviour the button has when the loading attribute is set.

I think it does not make sense to add and implement a loading attribute to each component. But enabling to set the CSS value for the cursor for the shadow dom would be easy, make sense for this use case and already be sufficient. As far as I understand, this could be achieved from the stylesheet within the component:

<style>
  :host {
    cursor: auto;
  }
</style>

This should allow to set the cursor CSS property because it is not private anymore. I cannot say whether this is sufficient for for setting the cursor also for the deeper nested elements of the component. Maybe it this has to be applied for each part of the component.

[claviska]

This is possible with CSS, e.g.

wa-card {
  cursor: not-allowed; 
}

https://codepen.io/claviska/pen/gbYewNy?editors=0100

Note that any child elements you have inside the element might need a similar style.

[patrickvuarnoz]

Thanks for the quick reply. I did notice that it works on some components like the <wa-button> component, but it does not work, for example, on the <wa-radio-group> and <wa-radio>. See: https://codepen.io/patrickvuarnoz/pen/bNbvRRY.

While the <wa-radio-group> displays the desired cursor in the space between the radio options, it does not display it on the radio options themselves or on the label of the radio group.

[patrickvuarnoz]

For the moment I helped myself using the parts selector to achieve what I'm trying to do. Something like this:

wa-radio {
  &,
  &::part(base) {
    cursor: progress;
  }
}

[claviska]

This is the correct approach, depending on the component. If an internal element has a different cursor style, you'd need to override it as shown.