fixing height of textareas with labels so they grow to fill the specified height (#1518)

Author: LFDanLu

packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

@@ -20,6 +20,7 @@ governing permissions and limitations under the License.
 
 .spectrum-FieldLabel {
   display: flex;
+  flex: 0 0 auto;
 
   box-sizing: border-box;
 
@@ -70,6 +71,7 @@ governing permissions and limitations under the License.
     .spectrum-Field-field {
       /* If the user overrides the width of the field, propagate to the inner component */
       width: 100%;
+      flex: 1 1 auto;
     }
   }
 
@@ -80,6 +82,8 @@ governing permissions and limitations under the License.
     align-items: flex-start;
 
     .spectrum-Field-field {
+      /* If the user overrides the height of the field, propagate to the inner component */
+      height: 100%;
       flex: 1;
     }
   }

packages/@react-spectrum/textfield/stories/TextArea.stories.js

@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
+import {Form} from '@react-spectrum/form';
 import Info from '@spectrum-icons/workflow/Info';
 import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
@@ -121,6 +122,17 @@ storiesOf('TextArea', module)
   .add('custom width, quiet',
     () => render({icon: <Info />, validationState: 'invalid', width: '300px', isQuiet: true})
   )
+  .add(
+    'custom height with label',
+    () => (
+      <Form>
+        <TextArea label="Height size-2000" height="size-2000" />
+        <TextArea label="Height size-2000" height="size-2000" isQuiet />
+        <TextArea labelPosition="side" label="Height size-2000" height="size-2000" />
+        <TextArea labelPosition="side" label="Height size-2000" height="size-2000" isQuiet />
+      </Form>
+    )
+  )
   .add('controlled interactive',
     () => <ControlledTextArea />
   );