Repository: segmentio/evergreen (JavaScript)

Issue:
TextareaField does not pass through resize prop
**Issue**

While the `Textarea` component respects the `resize` prop for disabling or restricting resize capabilities, the `TextareaField` component doesn't seem to properly pass it through to the underlying `Textarea`

**Reproduction**
See this [codesandbox](https://codesandbox.io/s/evergreen-textareafield-textareafield-does-not-pass-through-resize-prop-fjhwp?file=/src/App.js) for a working example.

**Expected behavior**
`resize` prop is properly forwarded to `<Textarea />` 


Discussion:

Patch:
diff --git a/src/textarea/src/TextareaField.js b/src/textarea/src/TextareaField.js
index 6fefd79fd..8b68e4ba5 100644
--- a/src/textarea/src/TextareaField.js
+++ b/src/textarea/src/TextareaField.js
@@ -27,6 +27,7 @@ const TextareaField = memo(
       label,
       placeholder,
       required,
+      resize,
       spellCheck,
       validationMessage,
 
@@ -61,6 +62,7 @@ const TextareaField = memo(
           appearance={appearance}
           placeholder={placeholder}
           spellCheck={spellCheck}
+          resize={resize}
           {...remainingProps}
         />
       </FormField>
diff --git a/src/textarea/stories/index.stories.js b/src/textarea/stories/index.stories.js
index 81a12c0b0..138a19ccd 100644
--- a/src/textarea/stories/index.stories.js
+++ b/src/textarea/stories/index.stories.js
@@ -43,6 +43,17 @@ storiesOf('textarea', module)
         </Label>
         <Textarea name="isInvalid" id="isInvalid" isInvalid placeholder="This is invalid" />
       </Box>
+      <Box marginBottom={24} width={360}>
+        <Label marginBottom={8} htmlFor="isInvalid" size={400} display="block">
+          Fixed (cannot resize)
+        </Label>
+        <Textarea
+          name="fixed-cannot-resize"
+          id="fixed-cannot-resize"
+          placeholder="This is fixed (cannot resize)"
+          resize="none"
+        />
+      </Box>
     </Box>
   ))
   .add('TextareaField', () => (
@@ -69,6 +80,7 @@ storiesOf('textarea', module)
         description="This is a description."
         validationMessage="This field is required"
       />
+      <TextareaField label="A fixed textarea field" placeholder="This is fixed (cannot resize)" resize="none" />
       <Manager>
         {({ setState, state }) => {
           return (


Test patch:
diff --git a/src/textarea/__tests__/Textarea.test.js b/src/textarea/__tests__/Textarea.test.js
new file mode 100644
index 000000000..c9054b901
--- /dev/null
+++ b/src/textarea/__tests__/Textarea.test.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Textarea } from '..'
+
+const makeTextareaFixture = (props = {}) => <Textarea data-testid="Textarea" {...props} />
+
+describe('Textarea', () => {
+  it('Should render', () => {
+    expect(() => render(makeTextareaFixture())).not.toThrow()
+  })
+})
diff --git a/src/textarea/__tests__/TextareaField.test.js b/src/textarea/__tests__/TextareaField.test.js
new file mode 100644
index 000000000..272815580
--- /dev/null
+++ b/src/textarea/__tests__/TextareaField.test.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { TextareaField } from '..'
+
+const makeTextareaFieldFixture = (props = {}) => (
+  <TextareaField data-testid="TextareaField" label="TextareaField" {...props} />
+)
+
+describe('TextareaField', () => {
+  it('Should render', () => {
+    expect(() => render(makeTextareaFieldFixture())).not.toThrow()
+  })
+
+  it('Should pass through `resize` prop to textarea', () => {
+    const { container } = render(makeTextareaFieldFixture({ resize: 'none' }))
+
+    const textarea = container.querySelector('textarea')
+    expect(textarea).not.toBeNull()
+    expect(textarea).toHaveStyle({ resize: 'none' })
+  })
+})