Fixing fieldlabel css so only textareas expand to fill available height (#1575)

Author: LFDanLu

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

@@ -73,6 +73,9 @@ 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%;
+    }
+
+    .spectrum-Field-field--multiline {
       flex: 1 1 auto;
     }
   }
@@ -84,10 +87,12 @@ 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;
     }
+
+    .spectrum-Field-field--multiline {
+      height: 100%;
+    }
   }
 }
 

packages/@react-spectrum/combobox/src/ComboBox.tsx

@@ -187,7 +187,8 @@ interface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {
   inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
   triggerProps: AriaButtonProps,
   triggerRef: RefObject<FocusableRefValue<HTMLElement>>,
-  style?: React.CSSProperties
+  style?: React.CSSProperties,
+  className?: string
 }
 
 const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: RefObject<HTMLElement>) {
@@ -202,7 +203,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
     triggerRef,
     autoFocus,
     style,
-    UNSAFE_className,
+    className,
     loadingState,
     isOpen
   } = props;
@@ -245,7 +246,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
               'spectrum-InputGroup--invalid': validationState === 'invalid',
               'is-hovered': isHovered
             },
-            UNSAFE_className
+            className
           )
         }>
         <TextFieldBase

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

@@ -161,7 +161,13 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     );
 
     textField = React.cloneElement(textField, mergeProps(textField.props, {
-      className: classNames(labelStyles, 'spectrum-Field-field')
+      className: classNames(
+        labelStyles,
+        'spectrum-Field-field',
+        {
+          'spectrum-Field-field--multiline': multiLine
+        }
+      )
     }));
 
     return (