CdsButton in loading state is still partially clickable

[astorije-vmware]

Describe the bug

When loadingState is used on a CdsButton, the gray part of the button cannot be clicked as expected, but the icons can be clicked, despite the not-allowed cursor.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/cds-button-loading-state-click-fqj6od
2. Click on the loading icon at the bottom
3. The click event gets fired

Expected behavior

None of the button content should be clickable.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [ ] Vue
• [ ] Other:

Framework version:

React 18

[ashleyryan]

This is an interesting one. I don't see any special click handler logic in our component, and icons aren't clickable in normal slotted content or in the cds-button-action component. So it's something unique about the icons in the loadingState, but I can't figure out what

[bbogdanov]

I can't understand still why but seems like cds-icon is a clickable element. That resolves in having a clickable element inside clickable element and we have to either stop propagation of the events or use pointer-events: none on the cds-icon inside disabled element that seems to work.

Any contribution is welcome here.