Add `TextAreaE`

[thyhjwb6]

Related issue

2432

Overview

Copies the existing TextArea to TextAreaE and updates styling.

Link to preview

https://pr-2492.netlify.app/?path=/story/text-area-experimental--default

Reason

The Text area component allows users to enter new or edit existing multiple lines of text.

Work carried out

• [x] Make code reusable
• [x] Add component
• [x] Update styles

Screenshot

Chrome

ie11

[k9dh3zij]

Thanks! Here's my feedback:

1. User input should not be visible behind/above the input label

2. Label and user input font sizes should match those of Text Field. Currently:

   • Default label size is too big
   • User input colour should be Neutral 600

From the spec:

Label (Default) Font: Lato Regular Colour: #3e5667 (Neutral 400) Size: 16px

Label (Filled) Font: Lato Regular Colour: #3e5667 (Neutral 400) Size: 12px

User input Font: Lato Regular Colour: #1c2d39 (Neutral 600) Size: 16px

3. The resize handle is slightly misaligned:

Current:

Design:

4. In the screenshot above, the resize handle seems to be missing in IE11?

[thyhjwb6]

User input should not be visible behind/above the input label

Although I agree this is an issue, it is the situation with the existing TextArea. My suggestion is that we create a separate ticket as there is complexity.

2.

👍

The resize handle is slightly misaligned

Glad you noticed this. Our options for providing spacing at the bottom of the textarea are limited. My suggestion is that we remove this which fixes the misalignment and we create a separate ticket for adding spacing.

In the screenshot above, the resize handle seems to be missing in IE11?

It is not a feature in IE. Again we can add a ticket to introduce something although the work will be considerable vs the gain.

Updated screenshot

Chrome

ie11

[k9dh3zij]

@hxltrhuxze Can you have a look at # 1, 3 and 4 above please, to make a decision on what is worth the effort?

@thyhjwb6 Cheers, I can confirm # 2 has been resolved.

Just noticed one more: if I type some text that exceeds the vertical height, the scrollbar overlaps the borders.
This is also an issue with the existing component, but the rounded corners exacerbate it here.

If we can't style the scrollbar corners, is it worth making the actual text area slightly smaller? This could also address issue # 1, with the text scrolling behind the input label?

[hxltrhuxze]

Had a look through this PR and these are my recommendations:

1. We should fix this. padding-top should be set to the parent <div> instead of the textarea itself. This will mean no textarea text can clip behind the label.

2. I think the best we're going to get is having the right-hand side padded so that the scrollbar sits within the textarea. I'm not sure we have much alternative aside from reducing the border-radius across all the components. @k9dh3zij this will be one for you to decide from a design perspective. If we can find a nice solution though, we should fix this.

\4. Too much effort right now. Let's leave it until we have a request for it and then we can make a decision about priorities.

[thyhjwb6]

Thank you for the feedback @k9dh3zij and @hxltrhuxze.

All changes have been applied except 4 which we will keep our eye on.

[k9dh3zij]

The new padding addresses # 1, 5 and also looks ok for # 3. Leaving # 4 as is as per comment above, until we get a request to fix.

All OK from my side, thank you @thyhjwb6 :)

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

94.8% Coverage
0.0% Duplication