chore(button): forward refs to button dom element

src/renderer/shared/components/Forms/Button/Button.js

@@ -1,39 +1,34 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string } from 'prop-types';
+import { string, func } from 'prop-types';
+import { omit } from 'lodash';
 
 import styles from './Button.scss';
 
-export default class Button extends React.PureComponent {
+class Button extends React.PureComponent {
   render() {
     return ( // eslint-disable-next-line react/button-has-type
       <button
-        {...this.props}
-        ref={this.registerRef}
+        {...omit(this.props, 'forwardedRef')}
+        ref={this.props.forwardedRef}
         className={classNames(styles.button, this.props.className)}
       />
     );
   }
-
-  registerRef = (el) => {
-    this.button = el;
-  }
-
-  focus = () => {
-    this.button.focus();
-  }
-
-  blur = () => {
-    this.button.blur();
-  }
 }
 
 Button.propTypes = {
   className: string,
-  type: string
+  type: string,
+  forwardedRef: func
 };
 
 Button.defaultProps = {
   className: null,
-  type: 'button'
+  type: 'button',
+  forwardedRef: null
 };
+
+export default React.forwardRef((props, ref) => {
+  return <Button {...props} forwardedRef={ref} />;
+});

src/renderer/shared/components/Forms/PrimaryButton/PrimaryButton.js

@@ -1,38 +1,33 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string } from 'prop-types';
+import { string, func } from 'prop-types';
+import { omit } from 'lodash';
 
 import Button from '../Button';
 import styles from './PrimaryButton.scss';
 
-export default class PrimaryButton extends React.PureComponent {
+class PrimaryButton extends React.PureComponent {
   render() {
-    return ( // eslint-disable-next-line react/button-has-type
+    return (
       <Button
-        {...this.props}
-        ref={this.registerRef}
+        {...omit(this.props, 'forwardedRef')}
+        ref={this.props.forwardedRef}
         className={classNames(styles.primaryButton, this.props.className)}
       />
     );
   }
-
-  registerRef = (el) => {
-    this.button = el;
-  }
-
-  focus = () => {
-    this.button.focus();
-  }
-
-  blur = () => {
-    this.button.blur();
-  }
 }
 
 PrimaryButton.propTypes = {
-  className: string
+  className: string,
+  forwardedRef: func
 };
 
 PrimaryButton.defaultProps = {
-  className: null
+  className: null,
+  forwardedRef: null
 };
+
+export default React.forwardRef((props, ref) => {
+  return <PrimaryButton {...props} forwardedRef={ref} />;
+});