[bug]: Missing disabled cursors on various inputs

[lucasboilly]

What version of design-system are you using?

Browser: Arc

What's Wrong?

We're supposed to change the cursor to the following form when a disabled input is hovered, however we don't do it for each input. It leads to inconstancies in the way we show users that an input is disabled. It's especially visible in the "Published" tab in the edit view or and in Content History, where a lot of disabled inputs are displayed at the same place.

Here is the list:

• Textarea
• DatePicker
• Select
• Toggle
• JSONInput

To Reproduce

Open an entry using all the mentioned inputs through its fields.

Expected Behaviour

We should show the disabled version of the cursor.

[chitangchin]

Naive Solution proposal:

Updates container to properties of disabled when called:

 cursor: not-allowed;
 pointer-events: all !important;

For all css properties that have the disabled id will inherit those properties. I think the parent container should inherit this property, we would need to define what is parent of course, but this could also resolve the issue from [feat]: Better disabled state for CarouselInput

Naive Solution proposal 2:

Have all components with the id: disabled inherit properties

 cursor: not-allowed;
 pointer-events: all !important;

We would have to define the parent div to inherit the id tag disabled inturn appending the css properites

Edge case: Color change for disabled components

This could be broken down to a static variable difference for the component's color using color percentages, which should allow the ability to take priority of inline color using !important tag

---

Please let me know what your thoughts are and if there are more efficient approaches, I am quite new to CSS and React, I apologize in advance if this solution doesn't make sense!