[text area]: allow consumers to modify minimum and maximum height and width of the text area

[LanceStasinski]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

From a design perspective, there are instances in which it would be useful to restrict the minimum and/or maximum height and width of the native text area element when the text area is resizable. This would mainly be to prevent users from resizing the text area into odd shapes that disturb the flow of the document or obscure the first line of text in the element.

Acceptance Criteria

Developers should have access to a mechanism to set the minimum and maximum height and width of the native text area element without having to breach the shadow DOM to do so. This mechanism could come in the form of web component properties or CSS custom properties.

Relevant Info

No response

Which Component

calcite-text-area

Example Use Case

Here's an example of how we can currently access the shadow DOM to set min/max height/width styles on the native textarea element: https://codepen.io/Lance-Stasinski/pen/dyLJYPw

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[ptmdmusique]

Any update on the issue ❓ The Home App also needs enhancement as users can currently resize the textarea to infinity and beyond

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with the Chromatic build on 9/23 and the following :

CSS:

#participant-names {
  --calcite-text-area-min-height: 5rem;
  --calcite-text-area-max-height: 10rem;
}

HTML:

<calcite-text-area id="participant-names"></calcite-text-area>