nimble-text-area should allow setting width (#457)

## 🤨 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

- [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

change/@ni-nimble-components-3d1e9025-e654-496f-a304-152c399e5016.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "nimble-text-area honor height and width",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/text-area/styles.ts

@@ -17,21 +17,23 @@ import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextAreaAppearance } from './types';
 
 export const styles = css`
-    ${display('inline-block')}
+    ${display('inline-flex')}
 
     :host {
         font: ${bodyFont};
         outline: none;
         user-select: none;
         color: ${bodyFontColor};
+        flex-direction: column;
+        vertical-align: top;
     }
 
     :host([disabled]) {
         color: ${bodyDisabledFontColor};
     }
 
     .label {
-        display: flex;
+        display: block;
         color: ${controlLabelFontColor};
         font: ${controlLabelFont};
     }
@@ -43,6 +45,8 @@ export const styles = css`
     .control {
         -webkit-appearance: none;
         font: inherit;
+        width: 100%;
+        flex-grow: 1;
         outline: none;
         box-sizing: border-box;
         position: relative;
@@ -92,6 +96,14 @@ export const styles = css`
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([cols]) .control {
+        width: auto;
+    }
+
+    :host([rows]) .control {
+        flex: none;
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }

packages/nimble-components/src/text-area/tests/text-area-matrix.stories.ts

@@ -73,6 +73,61 @@ export const textAreaThemeMatrix: Story = createRenderer(
     )
 );
 
+const widthSizingTestCase = (
+    [widthLabel, widthStyle]: [string, string],
+    [colsLabel, cols]: [string, number | undefined]
+): ViewTemplate => html`
+    <div style="width: 500px; height: 100px; outline: 1px dotted black">
+        <nimble-text-area
+            cols="${() => cols}"
+            style="${widthStyle}"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        >
+            ${widthLabel} ${colsLabel}
+        </nimble-text-area>
+    </div>
+`;
+
+const heightSizingTestCase = (
+    [heightLabel, heightStyle]: [string, string],
+    [rowsLabel, rows]: [string, number | undefined]
+): ViewTemplate => html`
+    <div style="width: 500px; height: 100px; outline: 1px dotted black">
+        <nimble-text-area
+            rows="${() => rows}"
+            style="${heightStyle}"
+            value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        >
+            ${heightLabel} ${rowsLabel}
+        </nimble-text-area>
+    </div>
+`;
+
+export const textAreaSizing: Story = createRenderer(html`
+    ${createMatrix(widthSizingTestCase, [
+        [
+            ['No width', ''],
+            ['Width=300px', 'width: 300px'],
+            ['Width=100%', 'width: 100%']
+        ],
+        [
+            ['no cols', undefined],
+            ['cols=10', 10]
+        ]
+    ])}
+    ${createMatrix(heightSizingTestCase, [
+        [
+            ['No height', ''],
+            ['Height=50px', 'height: 50px'],
+            ['Height=100%', 'height: 100%']
+        ],
+        [
+            ['no rows', undefined],
+            ['rows=3', 3]
+        ]
+    ])}
+`);
+
 export const hiddenTextArea: Story = createRenderer(
     hiddenWrapper(
         html`<nimble-text-area hidden>Hidden text area</nimble-text-area>`