From 3aa3b9117a5570dce934e9e4b95886c07cd1ba2e Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Thu, 15 Nov 2018 17:03:10 -0500
Subject: [PATCH 1/2] Remove deprecated lifecycle method

---
 src/components/TextField/TextField.tsx            | 11 ++++-------
 src/components/TextField/tests/TextField.test.tsx |  9 +++++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 90e8e932c97..557283c4935 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -115,6 +115,10 @@ export type Props = NonMutuallyExclusiveProps &
 const getUniqueID = createUniqueIDFactory('TextField');
 
 export default class TextField extends React.PureComponent<Props, State> {
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    return {id: nextProps.id || prevState.id};
+  }
+
   private input: HTMLElement;
 
   constructor(props: Props) {
@@ -137,13 +141,6 @@ export default class TextField extends React.PureComponent<Props, State> {
     }
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(newProps: Props) {
-    this.setState((prevState) => ({
-      id: newProps.id || prevState.id,
-    }));
-  }
-
   render() {
     const {
       id = this.state.id,
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index ef699ce7356..77925e0b38b 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -123,6 +123,15 @@ describe('<TextField />', () => {
       expect(typeof id).toBe('string');
       expect(id).toBeTruthy();
     });
+
+    it('updates with new id from props', () => {
+      const id = 'input field';
+      const textField = mountWithAppProvider(
+        <TextField label="TextField" onChange={noop} />,
+      );
+      textField.setProps({id});
+      expect(textField.find('input').prop('id')).toBe(id);
+    });
   });
 
   describe('autoComplete', () => {

From f407b2872481bcb3ff97c25091ce177a7784d2a4 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Thu, 15 Nov 2018 17:21:47 -0500
Subject: [PATCH 2/2] changelog

---
 UNRELEASED.md                                     |  3 ++-
 src/components/TextField/tests/TextField.test.tsx | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 108b82afd87..d94e3e985ca 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,7 +6,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- `EventListener` no longer uses `componentWillUpdate` ([#628](https://github.com/Shopify/polaris-react/pull/628))
+- `TextField` no longer uses `componentWillReceiveProps`([#628](https://github.com/Shopify/polaris-react/pull/628))
+- EventListener`no longer uses`componentWillUpdate` ([#628](https://github.com/Shopify/polaris-react/pull/628))
 - Allowed `Icon` to accept a React Node as a source ([#635](https://github.com/Shopify/polaris-react/pull/635)) (thanks to [@mbriggs](https://github.com/mbriggs) for the [original issue](https://github.com/Shopify/polaris-react/issues/449))
 
 ### Bug fixes
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index 77925e0b38b..d4d707a6199 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -124,7 +124,7 @@ describe('<TextField />', () => {
       expect(id).toBeTruthy();
     });
 
-    it('updates with new id from props', () => {
+    it('updates with the new id from props', () => {
       const id = 'input field';
       const textField = mountWithAppProvider(
         <TextField label="TextField" onChange={noop} />,
@@ -132,6 +132,15 @@ describe('<TextField />', () => {
       textField.setProps({id});
       expect(textField.find('input').prop('id')).toBe(id);
     });
+
+    it('updates with the previous id after the id prop has been removed', () => {
+      const id = 'input field';
+      const textField = mountWithAppProvider(
+        <TextField label="TextField" id={id} onChange={noop} />,
+      );
+      textField.setProps({});
+      expect(textField.find('input').prop('id')).toBe(id);
+    });
   });
 
   describe('autoComplete', () => {