Mouse cursor won't change when moving over a component that is disabled

[ketsappi]

The Problem

Mouse cursor won't change when moving over a component that is disabled.

Proposed Solution

The components that have disabled-attribute should have the cursor: not-allowed; in the disabled-style.

Of the existing components, the following should have this

• Button
• SearchInput
• TextInput
• Toggle

These components currently haven't the disabled-attribute, but if it is added; then these should also have the change

• Dropdown
• Menu

Additional Info

cursor - CSS: Cascading Style Sheets | MDN - Mozilla

[J-Kallunki]

Create src/components/utils/css.ts-file
and disabledCursor -util/mixin there with css (from styled components).

Use that mixin to src/components where disabled is used with:

styled((props: ...) => (
  .....
))`
  &.componentfoobar--disabled {
    ${disabledCursor}
  }
  `;