[Feature Request]: text area component - masking

[dpklahn]

Summary

(design & development needed)

The multi-line text area input to support the following:

1. warning state - currently, only an error state is supported.
2. masking - currently, credentials entered in multi-line text area cannot be masked.

Justification

1. Warning state: We need to warn users (but not prevent) when a leading/trailing space exists. Our forms contain a variety of multi-line, single-line, and number input fields - we cannot only provide warning feedback for some fields and not others. related GH issue

2. Masking: Some credentials in connection forms require multi-line input & the ability to mask the input. related GH issue
   a. Usability issue: we cannot ask users to input JSON snippets into a single-line input.
   b. Security issue: we cannot expose user credentials in the UI when using multi-line input (i.e. exposing the user's password).

Desired UX and success metrics

1. Text area supports a warning state similar to the text input (single-line) and number input fields. Should include a visual indication (with color) and text string that allows users to immediately identify the warning state and read an explanation of the warning.
2. Text area supports a masking capability similar to the text input that allows users to toggle on/off the visibility of the input.

Metrics for success/failure: users should be able to easily identify the the warning state and masking capability & recognize that they behave the same as the single-line text input.

Required functionality

The two enhancements to the text area should contain all the same functionality as in the single-line text input.

Specific timeline issues / requests

No upcoming release. The masking capability is a security concern and should be addressed asap.

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[dpklahn]

cc @kareng

[dakahn]

This seems cool to us considering out single line text inputs have these features. Thanks for the thorough issue 👍🏾

[dpklahn]

Hi, I see this request was accepted and the work for adding a warning state has started, which is awesome!

Any idea on the masking capability and if/when that might make it in?

[sstrubberg]

Notes from our backlog cleaning earlier today.

• We could use some design specs around both the warning state and masking issues. If possible, broken out into different GH issues for tracking.
• Related to the first bullet - Carbon devs estimate the warning state would be easier to implement than the masking
• We expect the Multi-line TextArea to have the same capability as the single line. - Form parity.

Reached out to @dpklahn on Slack for further clarification. Pending the priority of this work, it might be a a good candidate for a community contribution.

[tay1orjones]

The warning state has been delivered #13293

The only remaining item for this issue is the masking.

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!