From 8fd3a77f91953625a847075dfa2ef42d479e616d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Wed, 14 Mar 2018 18:04:24 -0700
Subject: [PATCH 1/2] Removing autobind usage as a test in Button.

---
 .../src/components/Button/BaseButton.tsx      | 42 +++++++------------
 .../Button/examples/Button.Swap.Example.tsx   |  9 +---
 2 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 7ff26e87999adf..4e7728c775e247 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -4,7 +4,6 @@ import {
   IRenderFunction,
   anchorProperties,
   assign,
-  autobind,
   buttonProperties,
   getId,
   getNativeProps,
@@ -248,8 +247,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return Content;
   }
 
-  @autobind
-  private _onRenderIcon(buttonProps?: IButtonProps, defaultRender?: IRenderFunction<IButtonProps>): JSX.Element | null {
+  private _onRenderIcon = (buttonProps?: IButtonProps, defaultRender?: IRenderFunction<IButtonProps>): JSX.Element | null => {
     const {
       iconProps
     } = this.props;
@@ -265,8 +263,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return null;
   }
 
-  @autobind
-  private _onRenderTextContents(): JSX.Element | (JSX.Element | null)[] {
+  private _onRenderTextContents = (): JSX.Element | (JSX.Element | null)[] => {
     const {
       text,
       children,
@@ -291,8 +288,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     ]);
   }
 
-  @autobind
-  private _onRenderText(): JSX.Element | null {
+  private _onRenderText = (): JSX.Element | null => {
     let {
       text
     } = this.props;
@@ -320,8 +316,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return null;
   }
 
-  @autobind
-  private _onRenderChildren(): JSX.Element | null {
+  private _onRenderChildren = (): JSX.Element | null => {
     const { children } = this.props;
 
     // If children is just a string, either it or the text will be rendered via onRenderLabel
@@ -333,11 +328,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return children as any;
   }
 
-  @autobind
-  private _onRenderDescription(props: IButtonProps) {
+  private _onRenderDescription = (props: IButtonProps) => {
     const {
       description
-    } = this.props;
+    } = props;
 
     // ms-Button-description is only shown when the button type is compound.
     // In other cases it will not be displayed.
@@ -354,8 +348,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       );
   }
 
-  @autobind
-  private _onRenderAriaDescription() {
+  private _onRenderAriaDescription = () => {
     const {
       ariaDescription
     } = this.props;
@@ -369,8 +362,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       );
   }
 
-  @autobind
-  private _onRenderMenuIcon(props: IButtonProps): JSX.Element | null {
+  private _onRenderMenuIcon = (props: IButtonProps): JSX.Element | null => {
     const {
       menuIconProps
     } = this.props;
@@ -386,8 +378,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
-  @autobind
-  private _onRenderMenu(menuProps: IContextualMenuProps): JSX.Element {
+  private _onRenderMenu = (menuProps: IContextualMenuProps): JSX.Element => {
     const { onDismiss = this._dismissMenu } = menuProps;
 
     return (
@@ -403,13 +394,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
-  @autobind
-  private _dismissMenu(): void {
+  private _dismissMenu = (): void => {
     this.setState({ menuProps: null });
   }
 
-  @autobind
-  private _onToggleMenu(): void {
+  private _onToggleMenu = (): void => {
     const { menuProps } = this.props;
     const currentMenuProps = this.state.menuProps;
     this.setState({ menuProps: currentMenuProps ? null : menuProps });
@@ -500,8 +489,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<BaseButton>) {
+  private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(ev);
     }
@@ -509,8 +497,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     ev.preventDefault();
   }
 
-  @autobind
-  private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) {
+  private _onMenuKeyDown = (ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
     }
@@ -529,8 +516,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
-  @autobind
-  private _onMenuClick(ev: React.MouseEvent<HTMLAnchorElement>) {
+  private _onMenuClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
     const { onMenuClick } = this.props;
     if (onMenuClick) {
       onMenuClick(ev, this);
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 8632716a9eb40c..e91de6bf13f39a 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -6,9 +6,6 @@ import {
   IButtonBasicExampleStyleProps,
   IButtonBasicExampleStyles
 } from './Button.Basic.Example.styles';
-import {
-  autobind
-} from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton, PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export interface IButtonSwapExampleState {
@@ -79,13 +76,11 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
     );
   }
 
-  @autobind
-  private _setButtonRef(ref: any): void {
+  private _setButtonRef = (ref: any): void => {
     this.buttonRef = ReactDOM.findDOMNode(ref) as HTMLElement;
   }
 
-  @autobind
-  private _onClick(): void {
+  private _onClick = (): void => {
     // change the button type on click
     this.setState({ isPrimary: !this.state.isPrimary });
   }

From 68ac314509159235f4b78a53f574b9c88fd6127e Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Wed, 14 Mar 2018 18:06:46 -0700
Subject: [PATCH 2/2] Adding change.

---
 .../button-autobind_2018-03-15-01-06.json             | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/button-autobind_2018-03-15-01-06.json

diff --git a/common/changes/office-ui-fabric-react/button-autobind_2018-03-15-01-06.json b/common/changes/office-ui-fabric-react/button-autobind_2018-03-15-01-06.json
new file mode 100644
index 00000000000000..82ea44d5540650
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/button-autobind_2018-03-15-01-06.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "BaseButton: removing autobind usage.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}
\ No newline at end of file