textarea: minheight + autosize (#3818)

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx

@@ -42,8 +42,7 @@ export const AddComment: React.FC = () => {
             onChange={e => setValue(e.target.value)}
             onKeyDown={submitOnEnter}
             placeholder="Write a comment"
-            css={css({ minHeight: 8 })}
-            style={{ lineHeight: 1.2 }}
+            style={{ lineHeight: 1.2, minHeight: 32 }}
           />
         </FormField>
       </form>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -183,7 +183,6 @@ const DialogAddComment: React.FC<{
       <DragHandle onPan={onDragHandlerPan}>
         <Stack
           justify="space-between"
-          align="center"
           marginY={4}
           marginLeft={4}
           marginRight={2}
@@ -210,6 +209,7 @@ const DialogAddComment: React.FC<{
           border: 'none',
           paddingLeft: 4,
         })}
+        style={{ minHeight: 32 }}
         value={value}
         onChange={e => setValue(e.target.value)}
         placeholder="Add comment..."
@@ -429,6 +429,7 @@ const AddReply = ({ comment, ...props }) => {
         borderRadius: 0,
         padding: 4,
       })}
+      style={{ minHeight: 54 }}
       value={value}
       onChange={e => setValue(e.target.value)}
       placeholder="Reply..."

packages/components/src/components/Textarea/index.stories.tsx

@@ -38,6 +38,16 @@ export const autoResize = () => (
   </Wrapper>
 );
 
+export const autoResizeWithInitialHeight = () => (
+  <Wrapper>
+    <Textarea
+      autosize
+      placeholder="Write a lot of lines here"
+      style={{ minHeight: 32 }}
+    />
+  </Wrapper>
+);
+
 export const Controlled = () => {
   const [value, setValue] = React.useState('');
   return (

packages/components/src/components/Textarea/index.tsx

@@ -79,14 +79,14 @@ export const Textarea: React.FC<ITextareaProps> = ({
   return (
     <>
       <Wrapper>
-        <Autosize value={innerValue}>
+        <Autosize value={innerValue} style={props.style}>
           {(height: number) => (
             <TextareaComponent
               value={innerValue}
               onChange={internalOnChange}
               maxLength={maxLength}
-              style={{ height }}
               {...props}
+              style={{ ...(props.style || {}), height }}
             />
           )}
         </Autosize>
@@ -101,7 +101,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
   );
 };
 
-const Autosize = ({ value, ...props }) => (
+const Autosize = ({ value, style = {}, ...props }) => (
   <Rect>
     {({ rect, ref }) => (
       <>
@@ -116,6 +116,7 @@ const Autosize = ({ value, ...props }) => (
               lineHeight: 1,
               minHeight: 64,
               padding: 8,
+              ...style,
             }}
           >
             {value + ' '}