nimble-text-area should allow setting width

[m-akinc]

Pull Request

🤨 Rationale

The nimble-text-area cannot be made to stretch to fill the width of its container. Or rather, the contained textarea does not obey the width set on the nimble-text-area.

👩‍💻 Implementation

Setting width to inherit on the textarea (class control) causes it to inherit any width value set on the nimble-text-area element. Note that nimble-text-area also supports controlling the visible width via a cols attribute (number of visible text columns). When the width style is set, this overrides the cols attribute.

🧪 Testing

Tested manually in dev tools.

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

Setting width to inherit probably doesn't behave as expected. See the following example: https://codepen.io/rajsite/pen/WNdRXdK

A good rule of thumb is to generally avoid configuring properties as inherit that are not configured as inherited by default: https://developer.mozilla.org/en-US/docs/Web/CSS/width#formal_definition

I'd probably stick to what fast does and set the width to 100% for the .control textarea to make sure it is sized to the whatever the nimble-text-area was sized to by the developer: https://github.com/microsoft/fast/blob/6e3de2afdf8c7be7c2be369e8386f114e6e6417e/packages/web-components/fast-components/src/text-area/text-area.styles.ts#L58

My guess is that most folks are more concerned that the width and height are respected on the nimble-text-area than the width and height as defined by the rows and cols attributes.

Edit: If we end up going with the recommendation here it may be worth adding a comment to the css that says we are explicitly setting the width and height on the textarea which overrides the behavior of rows and cols (maybe be worth adding a note in the storybook too for those properties).

[msmithNI]

Is it possible to handle both cases? With something like

.control {
  width: 100%;
}

:host([cols]) .control {
  width: inherit;
}

[rajsite]

Seems like that could work 👍 we should include some storybook tests to prevent regressions and test out sizing both ways

We may need to verify the same issues aren't showing up with rows config

[m-akinc]

If we set width=100% on the textarea element, then setting cols does nothing. To be clear, you're suggesting we remove that attribute from the public API of the text area, right? That makes sense to me, though it's different than the html textarea and the FAST text area.

What do you think we should do about the height? Same? Or leave it controlled by the rows attribute?

Didn't see these responses before I replied. I think that answers my questions.

[m-akinc]

As Milan notes below, inherit has some issues. One of them being the !=100% multiplicative issue. Another being that if both width and cols are both set, width wins. If we document that, it's fine, but then we don't really need to be special casing :host([cols]) .control anyway, right?

Another similar issue is how to to handle the height. There may or may not be a control label, and this affects how we would want to set the height. I can do height: calc(100% - ${controlLabelFontLineHeight}), but that is only correct if there is a label. If not, it's too short. Maybe for height we do force them to specify rows? Thoughts?

[rajsite]

Here is one idea I prototyped: https://github.com/ni/nimble/compare/users/makinc/text-area-width...text-area-width-prototype?expand=1

Layout the label and the text area in a vertical flex column. Tell the label to not flex in size (just sizes to it's content). Tell the textarea to grow (it's the only growing item in the flex layout so it takes the rest of the space).

Without rows or cols specified the flex fills the height and the width 100% fills the width. With cols specified the width is switched to auto and the browser will size the textarea based on the cols. When rows is specified we say don't flex size and the browser will size based on rows.

[m-akinc]

That works great. The only case it doesn't handle perfectly is when a width is set on the nimble-text-area along with a cols value. In that case, the auto width on the textarea control ends up taking the width of the containing host rather than using the cols value. Still, that seems a very minor issue.

[jattasNI]

This has received sufficient attention from other reviewers, so don't wait on me to submit.