Botframework-webchat: Add style option to center textarea

[felixvanleeuwen]

Feature Request

When using the following style options:

sendBoxTextWrap: true,
sendBoxHeight: 55,

you get a textarea instead of an input for user input.
This textarea alligns with the top.
There's also a div behind it, probably for accessibility, with the same dimensions.

Current:

Desired:

[compulim]

The <div> is a doppelganger and use for auto-resizing the <textarea> with pure CSS, which will yield better performance and compatibility, when compared to JavaScript approach.

Are there any specific options you want to customize? We will rework the send box in #2211.

[felixvanleeuwen]

I want the textarea to be in the vertical center of the sendbox.
This is how we've implemented our textarea in V3:

In V4 the textarea doesn't scale out from the center:

[felixvanleeuwen]

Just looking to get a field sendBoxCenterInput: true in styleOptions.
The default behavior should be to have it render as it does currently.
When set to true the textarea becomes centered vertically in the sendBox area.

[compulim]

I think we should center it by default. 😉

[felixvanleeuwen]

Awesome!

[compulim]

Some preliminary study on the layout here. You can study the code to understand how the doppelganger work. This is vertically aligned.

https://compulim.github.io/playpen-textarea-doppelganger/

Still need to clean up the CSS a bit. Feel free to file PR over there for suggestions.

Please try your best to break it. When it's broken, you will see weird shadow behind the text, like wearing a red-green 3D glasses. 😉

Will eventually move the JS/CSS there back to this repository.

Please bear with me with my choice of color. They are for highlighting bounding box.

[compulim]

I cleaned up the CSS over there. Need help from someone who can help copying the styles here, add tests, etc.

[peterinnesmsft]

Added to backlog - will look to prioritize for an upcoming release.

[felixvanleeuwen]

Writing a whole bunch of 'k's in our current chat:

In our V4 implementation:

In the playpen:

Setting "word-break", "overflow-wrap" on the textarea through chrome dev tools yielded no positive results.

[compulim]

The icon of send box button is not centered vertically. It is filed as #3672.