[TextField] Remove deprecated lifecycle method

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

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,

src/components/TextField/tests/TextField.test.tsx

@@ -123,6 +123,24 @@ describe('<TextField />', () => {
       expect(typeof id).toBe('string');
       expect(id).toBeTruthy();
     });
+
+    it('updates with the 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);
+    });
+
+    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', () => {