Read only text input

ref: https://github.com/carbon-design-system/carbon/issues/2177 by @shixiedesign

A read only variant of Text input is suggested here: https://github.com/carbon-design-system/carbon-contribution/issues/13#issue-421692303

The “Disabled” option is not viable, as the label and entered data is not accessible. Proposal is to simply remove the line at the base of the “Filled” version of the component, so that it closely matches with the Disabled component, but passes accessibility.

Overview of component (updated May 13)

• Read-only variant will be keeping underline and dropping the background of the field. We need the underline for low-vision users to recognize this as a text field. Also loosing the underline makes the element a button-style, which would be confusing.
• Not moving the text position after all. Keeping text 16px away from left of border helps with preserving the form structure.
• Regular text cursor and allows text selecting
• Add not-editable icon, icon in PR https://github.com/carbon-design-system/carbon/pull/2710
• Optional tooltip when hovering not-editable icon, to provide reason for the field being read-only
• Overflow text in the field will show in tooltip on hover
• Should be considered a state, possible readonly attribute
• Follow the standard readonly attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly

Design spec (updated May 13)

In context explorations:

Finalized design spec. Ready for dev 🤖 updated May 23

Light variant spec

Only difference from default is changing field background to $field-01 so it is the same as background color.

[asudoh]

@aagonzales Sorry I may not have been clear enough - It’s #4015. The latest spec for read-only text input requests for a tooltip (presumably for overflow text). Definition tooltip is the closest, but definition tooltip (technically) cannot be activated by focus on <input>. #4015 is for supporting such use case in definition tooltip.

[kaylarakower]

@shixiedesign @emyarod Another proposal to consider (I created this issue prior to seeing @shixiedesign 's, so just some food for thought). The design was created for a slightly use case as none of the fields would be editable.

https://github.com/carbon-design-system/carbon-contribution/issues/17