Add `modus-textarea-input` component.

[austinoneil]

Description

Add modus-textarea-input component.

References https://github.com/trimble-oss/modus-web-components/issues/2327

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation update

How Has This Been Tested?

Added the following HTML to index.html:

<modus-textarea-input label="standard input"></modus-textarea-input>
<modus-textarea-input label="standard input with 3 rows" rows="3"></modus-textarea-input>

Checklist

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules
• [x] I have checked my code and corrected any misspellings

[netlify[bot]]

✅ Deploy Preview for moduswebcomponents ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e236a88ba0fe964338b994cbb769af4830bce145
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/6668586c9cf20c0008d0fe5c
😎 Deploy Preview	https://deploy-preview-2336--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 23 (no change from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coliff]

we need to add this new component to Storybook - it should be available below text-input with out deploy preview: https://deploy-preview-2336--moduswebcomponents.netlify.app/

[austinoneil]

@coliff I have added the page to storybook.

[coliff]

I don't see it on the deploy preview yet. https://deploy-preview-2336--moduswebcomponents.netlify.app/

[austinoneil]

Updated and fixed.

[austinoneil]

I have squashed this into one commit as requested in the contributing guidelines.

[austinoneil]

I have added some new properties to make this more consistent with input.

[coliff]

@austinoneil @cjwinsor - I think it'd be good to get the conflicts resolved (sorry for letting this PR be open for so long!) and then reviewed and merged in time for the next release later this week. I know of a Trimble team interested in using this component.

[cjwinsor]

@austinoneil @cjwinsor - I think it'd be good to get the conflicts resolved (sorry for letting this PR be open for so long!) and then reviewed and merged in time for the next release later this week. I know of a Trimble team interested in using this component.

I've been tied up, so I haven't properly reviewed. Though I did notice weird behavior with using the inputs resize handle. We could probably restrict that to only vertical, but it still gets a little crazy as you resize as the input resizing doesn't also resize the wrapping styling components.

[coliff]

oh right - yep, I see that...

[coliff]

This CSS fixes the layout issues.. (but disables resizing).

add this to textarea:

font-family: "Open Sans";
height: 4rem;
resize: none;

and add this to the .input-container

min-height: 4.5rem;

[austinoneil]

Awesome. Thanks! I'll resolve merge conflicts and add this tomorrow.

[coliff]

heya. I wanted to get this merged but there are many unneeded files in the PR which I don't think are needed. Can you take a look pls?

[austinoneil]

I think a lot of the extra files are from attempting to resolve merge conflicts locally (the conflict arose with the gitignore pr). I think we can remove any changes under react and angular workspaces.

[austinoneil]

I have removed most of the erroneously added files. Some were gitignored in #2340 so I think that might be preventing me from running a git checkout main <path> and updating them. I think owners for the repo might be able to remove them on the web UI, but I am not sure.