Fix TextArea not using full height when custom height provided (#3720)

* fix textarea not using full fixed height

* add chromatic story

* handle quiet case

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

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

@@ -71,6 +71,7 @@ governing permissions and limitations under the License.
                          "field field field"
                          "helpText helpText helpText";
     grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-rows: auto 1fr auto;
     align-content: start;
     width: var(--spectrum-field-default-width);
 

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

@@ -188,6 +188,10 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Textfield-wrapper.spectrum-Textfield-wrapper--quiet{
+  grid-template-rows: auto;
+}
+
 .spectrum-Textfield-wrapper .spectrum-Textfield--multiline {
   /* when textarea is inside a label wrapper, make it flex to take up remaining height. */
   flex: 1 1 auto;

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

@@ -82,6 +82,9 @@ storiesOf('TextArea', module)
   .add('custom width',
     () => render({icon: <Info />, validationState: 'invalid', width: 275})
   )
+  .add('custom height',
+    () => render({icon: <Info />, validationState: 'invalid', height: 350})
+  )
   .add(
     'value: 測試, icon: Info, labelPosition: side, validationState: valid',
     () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'})

packages/@react-spectrum/textfield/src/TextFieldBase.tsx

@@ -143,7 +143,15 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      wrapperClassName={classNames(styles, 'spectrum-Textfield-wrapper')}
+      wrapperClassName={
+        classNames(
+          styles,
+          'spectrum-Textfield-wrapper',
+          {
+            'spectrum-Textfield-wrapper--quiet': isQuiet
+          }
+        )
+      }
       showErrorIcon={false}
       ref={domRef}>
       {textField}