feat: add buttonRef prop

Author: wmui51

packages/button/src/Button.js

@@ -14,6 +14,7 @@ import ButtonPresenter from "./presenters/ButtonPresenter";
 
 const Button = (props) => {
   const {
+    buttonRef,
     disabled,
     icon,
     link,
@@ -54,6 +55,7 @@ const Button = (props) => {
         onMouseUp: handleMouseUp,
       }) => (
         <ButtonPresenter
+          buttonRef={buttonRef}
           disabled={disabled}
           hasFocus={hasFocus}
           hasHover={hasHover}
@@ -89,12 +91,16 @@ Button.defaultProps = {
 };
 
 Button.propTypes = {
+  /**
+   * A callback ref that gets passed to the HTML button
+   */
+  buttonRef: PropTypes.func,
   /**
    * Prevents user interaction with the button
    */
   disabled: PropTypes.bool,
   /**
-   * A @hig/icon element
+   * A @weave-design/icon element
    */
   icon: PropTypes.node,
   /**

packages/button/src/presenters/ButtonPresenter.js

@@ -14,6 +14,7 @@ import {
 
 const ButtonPresenter = (props) => {
   const {
+    buttonRef,
     disabled,
     hasFocus,
     hasHover,
@@ -61,6 +62,7 @@ const ButtonPresenter = (props) => {
         return (
           <Wrapper
             {...otherProps}
+            ref={buttonRef}
             className={cx(css(cssStyles.button), className)}
             href={href}
             tabIndex={tabIndex}
@@ -97,6 +99,7 @@ const ButtonPresenter = (props) => {
 ButtonPresenter.displayName = "ButtonPresenter";
 
 ButtonPresenter.propTypes = {
+  buttonRef: PropTypes.func,
   disabled: PropTypes.bool,
   hasFocus: PropTypes.bool,
   hasHover: PropTypes.bool,