text area height flexibility

[elainelylee]

Are we able to have the text area be the size of an input, but if users end up putting a very long line, the text area will expand? The reason why I don't want to use the text area height as is is because we expect short phrases, but we aren't limiting users to short phrases. It's hard to see the full phrase in an input if the user decide to put a very long phrase. Thoughts?

[kate-porter]

Hey @elainelylee! Great question. Our textarea component doesn't allow for this right now, but this use case makes a lot of sense, so we've added a ticket to the backlog to support it: https://issues.corp.twilio.com/browse/DSYS-2237

What's your timeline for this work?

[serifluous]

The way it'll work is you'll be able to set how many rows of text you want to show. You can play around with something similar here by changing the number of "rows": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

[elainelylee]

It's not urgent. Just thought it can help with the experience in case browser windows get smaller or user types more than expected. If we do go with text area and show one row like in the mozilla example, is that something we can do now or are you saying in the future we can do that? Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL [email protected]

…

On Fri, Aug 28, 2020 at 3:46 PM Sarah ***@***.***> wrote: The way it'll work is you'll be able to set how many rows of text you want to show. You can play around with something similar here by changing the number of "rows": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea <https://urldefense.com/v3/__https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea__;!!NCc8flgU!Ork7wc5ojyScG7A2hj-2LDJw4v3NEakwdpjDTYQlWadu5-SKB2-SYKc5Jh29$> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/700*discussioncomment-58799__;Iw!!NCc8flgU!Ork7wc5ojyScG7A2hj-2LDJw4v3NEakwdpjDTYQlWadu5-SKB2-SYJ5RgyWU$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLBZSRV4C22QGXQEFLDSDAXS3ANCNFSM4QOOWXMA__;!!NCc8flgU!Ork7wc5ojyScG7A2hj-2LDJw4v3NEakwdpjDTYQlWadu5-SKB2-SYGq3zryl$> .

[kate-porter]

The functionality in the Mozilla example will be available once DSYS-2237 is complete. So, not ready yet, but soon!

[dws75]

That task was closed as Won't Do without an explanation on the card. Can we open up another ticket? The official spec for this has user resizability as an option but was never implemented: https://docs.google.com/document/d/1Lsy6qq9r1S1qKkW7X1efZIw2digaMxZhQq3JPsuN6_w/edit#

[SiTaggart]

Hi @elainelylee, I'm curious about exact use case, could you share some screen shots or mock ups of the problem you're trying to solve please?

While it's pretty easy for us to add ability to set a row count, I just want to make sure we're doing it for the right reason.

Some things to consider:

• I'd like to make sure that it's immediately identifiable that there is a difference between a single line input and a multiline textarea. Being able to set it to one row might blur that line.
• The Textarea starts at 3 rows and automatically grows as you add text, and I think caps out at 10 rows at which point it starts scrolling. These specific numbers are up for discussion, they may not be the most ideal. They may just be fine.

[elainelylee]

Some places where this can be useful: Someone can have a very long friendly name and someone can choose to have 4 words in the friendly name field. Wanted to see if it's possible to show more of what the user typed into the field without them needing to scroll horizontally. Another use case that's more specific to mine is some phrases used for phrase spotting can be multi-line since we aren't capping what people input. But, the expectation is that the phrase would be a few words, hence only really needing a single line input field for the majority of the cases. I was also thinking about smaller browser windows and how the input will show up if it gets cut off in the single line input. This isn't critical, but something that I've been thinking about. In this mockup, maybe having the resizable icon can help. [image: image.png] Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL [email protected]

…

On Wed, Sep 9, 2020 at 2:45 PM Simon Taggart ***@***.***> wrote: Hi @elainelylee <https://urldefense.com/v3/__https://github.com/elainelylee__;!!NCc8flgU!OVg2B3wxUs-SwR_85OyiGIa2JaKLyoB7YdXZawDa7MjaYwJGc3fHEJhi2ZaJ$>, I'm curious about exact use case, could you share some screen shots or mock ups of the problem you're trying to solve please? While it's pretty easy for us to add ability to set a row count, I just want to make sure we're doing it for the right reason. Some things to consider: - I'd like to make sure that it's immediately identifiable that there is a difference between a single line input and a multiline textarea. Being able to set it to one row might blur that line. - The Textarea starts at 3 rows and automatically grows as you add text, and I think caps out at 10 rows at which point it starts scrolling. These specific numbers are up for discussion, they may not be the most ideal. They may just be fine. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/700*discussioncomment-75391__;Iw!!NCc8flgU!OVg2B3wxUs-SwR_85OyiGIa2JaKLyoB7YdXZawDa7MjaYwJGc3fHEGQkw_Fi$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLFQQV7P3YC64MIAVHTSE7ZQFANCNFSM4QOOWXMA__;!!NCc8flgU!OVg2B3wxUs-SwR_85OyiGIa2JaKLyoB7YdXZawDa7MjaYwJGc3fHEF0DGGhU$> .

[SiTaggart]

You may need to upload that image via the github UI and not email, I'm afraid @elainelylee

[elainelylee]

[SiTaggart]

For your specific use case, just so I'm on the same page

some phrases used for phrase spotting can be multi-line since we aren't capping what people input

is that true multi line where I can enter in a carriage return as part of the phrase?

[elainelylee]

Most cases, not true multi-line, just long phrases or sentences. Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL [email protected]

…

On Mon, Sep 14, 2020 at 4:00 PM Simon Taggart ***@***.***> wrote: For your specific use case, just so I'm on the same page some phrases used for phrase spotting can be multi-line since we aren't capping what people input is that true multi line where I can enter in a carriage return as part of the phrase? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/700*discussioncomment-78925__;Iw!!NCc8flgU!KiHDNwwQ4Cyz-eYRmRGnmI2qnvQpHyJPSY7ec6RucFrK8u9DbsNxciyAcQ39$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLGW3T6DTIDFU5HY723SF2OARANCNFSM4QOOWXMA__;!!NCc8flgU!KiHDNwwQ4Cyz-eYRmRGnmI2qnvQpHyJPSY7ec6RucFrK8u9DbsNxcowwRZR_$> .

[SiTaggart]

OK, in that case I would not recommend a textarea. If it's just a long string then the Input is the ideal component you should use.

A textarea should really only be used in situations where having a carriage return by hitting the return key is a pretty common use case for that data type. If it's a single line string then an input should be used.

[elainelylee]

Outside of this example, any solution to long single strings being hidden in input fields? Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL [email protected]

…

On Mon, Sep 14, 2020 at 4:31 PM Simon Taggart ***@***.***> wrote: OK, in that case I would not recommend a textarea. If it's just a long string then the Input is the ideal component you should use. A textarea should really only be used in situations where having a carriage return by hitting the return key is a pretty common use case for that data type. If it's a single line string then an input should be used. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/700*discussioncomment-78949__;Iw!!NCc8flgU!IFR2f0I_PxPwudls5AywBWR2vYf_deHFJC5I0VdPm3Rd9DCDaNhJ753XH-wW$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLBZRJBVQ5SWIK2EQIDSF2RUFANCNFSM4QOOWXMA__;!!NCc8flgU!IFR2f0I_PxPwudls5AywBWR2vYf_deHFJC5I0VdPm3Rd9DCDaNhJ7yu-zp0p$> .

[SiTaggart]

So it comes down to the type of data that your data modal accepts.

If your data modal expects only a single line string with no carriage returns then you must use an Input. An Input can't wrap its display text onto a new line. When a long string is set as the value of an Input, if you don't make the input wide enough the string will be visually cut off, but the user can scroll their curser to the end of the string.

If your data modal can accepts a string with carriage returns as a valid piece of data, you can use a textarea. But I would strongly recommend that a textarea keeps its visual affordance of being multi line by being at least 2 rows in height at a minimum, as the grab handle in the bottom right hand corner is not guaranteed to be there in all browsers.

[tomtobac]

hey, I am also interested in this change. We have a textarea where the user has to put a list of numbers and I will be better fit if we could match their label height

[kate-porter]

Hey @tomtobac - in this case, the height of the textarea will grow as the user enters more lines of text, up to the max-height of 14 rows, at which point it will begin scrolling.

If you are trying to accomplish a more balanced layout here, I'd recommend putting a label on the textarea (that's strongly recommended anyway, for accessibility). You can then line up the top of the textarea label and the top of the "example number formats" text, and it will feel a bit more balanced. Something like so: https://codesandbox.io/s/textarea-layout-4s3qc?file=/src/index.tsx

[tomtobac]

Yeah, perfect! Thanks, I will use your example :)

[dws75]

I noticed that the official spec for the TextArea Component has a user resizable feature. We still need this feature.

https://docs.google.com/document/d/1Lsy6qq9r1S1qKkW7X1efZIw2digaMxZhQq3JPsuN6_w/edit#heading=h.9vvcsbnrp36c