calcite-text-area: width not calculated correctly

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System

https://developers.arcgis.com/calcite-design-system/

Other

269 stars 75 forks source link

calcite-text-area: width not calculated correctly #8654

Open AdelheidF opened 5 months ago

AdelheidF commented 5 months ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

Narrow shell area

Wide shell area

Expected Behavior

input and text-area right border always align vertically

Reproduction Sample

https://codepen.io/afreitag/pen/WNmXZPm

Reproduction Steps

Open codepen and look

Reproduction Version

2.3.0

Relevant Info

No response

Regression?

don't think so

Priority impact

p2 - want for current milestone

Impact

won't use text-area until this is fixed

Calcite package

[x] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

jcfranco commented 4 months ago

@anveshmekala Can you take a look at the estimate and adjust if needed?

anveshmekala commented 4 months ago

@anveshmekala Can you take a look at the estimate and adjust if needed?

The current estimate looks good.

macandcheese commented 3 months ago

You can also drag the text-area to be wider than the width of it's parent. I'd expect it to only extend to the parent's extent. Not sure if this issue is the appropriate place but mentioning it here.

https://github.com/Esri/calcite-design-system/assets/4733155/0f0299eb-39c1-4310-9334-6bd135f1526a

anveshmekala commented 3 months ago

You can also drag the text-area to be wider than the width of it's parent. I'd expect it to only extend to the parent's extent. Not sure if this issue is the appropriate place but mentioning it here.

Thanks for bring this up. This is consistent with native <textarea/> element https://codepen.io/ANVESHMEKALA/pen/rNbmyjz. Workaround is to add max-width property on <textarea/> element inside shadowDOM of calcite-text-area to restrict the resizing behavior. We can provide this option via @prop may be. Thoughts?

macandcheese commented 3 months ago

Yeah, I generally do like to default to matching native functionality - but not sure if it is a benefit to a user here or it could be an improvement our component has there. Could also be a discussion for a separate issue if it's out of scope here.