feat: readonly checkbox

[lee-chase]

Contributes to #2177
Closes #12243

Adds the read-only feature to the Checkbox component

Changelog

Added

• Adds readOnly property to Checkbox and functionality
• Adds test for read-only checkbox
• Adds styling for read-only checkbox (checked and unchecked).

Testing / Reviewing

Reviewed the result in Storybook and a added read-only test.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f9826ab
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6372acb2acce9f0009ebb1d4
😎 Deploy Preview	https://deploy-preview-12398--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	f9826ab
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6372acb2c88586000828e86d
😎 Deploy Preview	https://deploy-preview-12398--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tay1orjones]

Overall looks good, just a few comments

[aagonzales]

The styles look good but there are some interaction problems.

I'm still able to click on the check-box, has a cursor change to a hand and focus border. My assumption is those things shouldn't be possible because it is giving the illusion that its interactive. (Interactions aren't explicitly stated in the spec though we might need to circle back with Devin and team).

Update: Oh is that the onClick thing you're talking about with @tay1orjones? At a minimum, can we not have the cursor change, can it just remain an arrow or switch to the not-allowed cursor?

[lee-chase]

@aagonzales @tay1orjones was referring to the internals of the component I believe.

With regards to typical behaviour readonly is only applied to text input fields. The only distinction from disabled is that it is focusable and will be submitted with forms.

With regards to the cursor I'm not sure if https://github.com/quarryboy or Mike Eaker would care to comment?

The default behaviour (for input fields) can be seen in the link below. The cursor stays as it would normally. That is to say it displays the text cursor in most cases, the deafault pointer for date and the se-resize at the corner of a textarea.

As it is focusable and the cursor ordinarily stays the same for input fields, it suggests to me it should do so here.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

[aagonzales]

@lee-chase I talked with Mike and Devin over Slack. Here are the confirmed expected interactive behaviors. So the changes needed are:

• Hovering over the checkbox icon there should be no cursor change (remains as an arrow)
• Hovering over the checkbox labels the cursor should change to a type cursor (not a hand)

[lee-chase]

@tw15egan merge conflict fixed

[lee-chase]

@aagonzales addressed cursor issue

[aagonzales]

Visually looks good, matches spec 👍