search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

CdsButton in loading state is still partially clickable #185

Open astorije-vmware opened 1 year ago

astorije-vmware commented 1 year ago

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:

Clarity version:

Framework:

Framework version:

React 18

ashleyryan commented 1 year ago

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 commented 1 year ago

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.