From 408542c0f2ecf84b2aa22f54c1a4f807f99287ae Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 22 Oct 2018 16:22:36 -0700
Subject: [PATCH 01/10] Removing some of the deprecated components flaged when
 turning the tslint deprecation flag to true in the office-ui-fabric-react
 package.

---
 .../components/ActivityItem/ActivityItem.tsx  | 13 +++-------
 .../examples/ActivityItem.Basic.Example.tsx   |  2 +-
 .../examples/ActivityItem.Compact.Example.tsx |  8 +++---
 .../examples/ActivityItem.Persona.Example.tsx |  2 +-
 .../src/components/Autofill/Autofill.tsx      | 26 +++++--------------
 .../components/Breadcrumb/Breadcrumb.base.tsx |  4 +--
 .../components/Breadcrumb/Breadcrumb.types.ts |  2 +-
 .../src/components/Button/BaseButton.tsx      | 15 +++++------
 .../src/components/Button/Button.types.ts     |  4 +--
 .../src/components/Calendar/CalendarDay.tsx   |  2 +-
 .../src/components/Calendar/CalendarMonth.tsx |  2 +-
 .../Callout/CalloutContent.base.tsx           |  5 ++--
 .../examples/Callout.Basic.Example.tsx        | 11 +++-----
 .../src/components/Check/Check.types.ts       |  2 +-
 .../ChoiceGroup/ChoiceGroup.base.tsx          |  4 +--
 15 files changed, 35 insertions(+), 67 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
index fc6564799646f..2de6b0b334113 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -53,7 +53,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   private _onRenderActivityDescription = (props: IActivityItemProps): JSX.Element | null => {
     const classNames = this._getClassNames(props);
 
-    const activityDescription = props.activityDescription || props.activityDescriptionText;
+    const activityDescription = props.activityDescription;
 
     if (activityDescription) {
       return <span className={classNames.activityText}>{activityDescription}</span>;
@@ -65,7 +65,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   private _onRenderComments = (props: IActivityItemProps): JSX.Element | null => {
     const classNames = this._getClassNames(props);
 
-    const comments = props.comments || props.commentText;
+    const comments = props.comments;
 
     if (!props.isCompact && comments) {
       return <div className={classNames.commentText}>{comments}</div>;
@@ -124,14 +124,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
 
   private _getClassNames(props: IActivityItemProps): IActivityItemClassNames {
     return getClassNames(
-      getStyles(
-        undefined,
-        props.styles,
-        props.animateBeaconSignal,
-        props.beaconColorOne,
-        props.beaconColorTwo,
-        props.isCompact
-      ),
+      getStyles(undefined, props.styles, props.animateBeaconSignal, props.beaconColorOne, props.beaconColorTwo, props.isCompact),
       props.className!,
       props.activityPersonas!,
       props.isCompact!
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
index 3566611300ae3..607300a892751 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
@@ -5,7 +5,7 @@ import { getStyles, IActivityItemExampleStyleProps, IActivityItemExampleStyles }
 import { Icon } from '../../../Icon';
 import { Link } from '../../../Link';
 
-export class ActivityItemBasicExample extends React.Component<React.Props<ActivityItemBasicExample>, {}> {
+export class ActivityItemBasicExample extends React.Component<React.ClassAttributes<ActivityItemBasicExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles, {});
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
index 225e2789bd858..7e881173b356e 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
@@ -6,12 +6,12 @@ import { getStyles, IActivityItemExampleStyleProps, IActivityItemExampleStyles }
 import { TestImages } from '../../../common/TestImages';
 import { Icon } from '../../../Icon';
 
-export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
+export class ActivityItemCompactExample extends React.Component<React.ClassAttributes<ActivityItemCompactExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles, {});
 
-    const activityItemExamples: Partial<IActivityItemProps & React.Props<{}>>[] = [
+    const activityItemExamples: Partial<IActivityItemProps & React.ClassAttributes<{}>>[] = [
       {
         key: 1,
         activityDescription: [
@@ -81,9 +81,7 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
     const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item: { key: string | number }) => {
       const props = item;
-      activityExampleList.push(
-        <ActivityItem {...props as IActivityItemProps} key={item.key} className={css(classNames.exampleRoot)} />
-      );
+      activityExampleList.push(<ActivityItem {...props as IActivityItemProps} key={item.key} className={css(classNames.exampleRoot)} />);
     });
 
     return <div>{activityExampleList}</div>;
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
index 20b7864d75830..fc85a7f6a4879 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
@@ -5,7 +5,7 @@ import { getStyles, IActivityItemExampleStyleProps, IActivityItemExampleStyles }
 import { TestImages } from '../../../common/TestImages';
 import { Link } from '../../../Link';
 
-export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
+export class ActivityItemPersonaExample extends React.Component<React.ClassAttributes<ActivityItemPersonaExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles, {});
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
index 10ea7c8a6d91b..63b35b633c908 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IAutofillProps, IAutofill } from './Autofill.types';
-import { BaseComponent, KeyCodes, getNativeProps, inputProperties, createRef } from '../../Utilities';
+import { BaseComponent, KeyCodes, getNativeProps, inputProperties } from '../../Utilities';
 
 export interface IAutofillState {
   displayValue?: string;
@@ -14,7 +14,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up]
   };
 
-  private _inputElement = createRef<HTMLInputElement>();
+  private _inputElement = React.createRef<HTMLInputElement>();
   private _autoFillEnabled = true;
   private _value: string;
 
@@ -78,12 +78,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     const { suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate } = this.props;
     let differenceIndex = 0;
 
-    if (
-      this._autoFillEnabled &&
-      value &&
-      suggestedDisplayValue &&
-      this._doesTextStartWith(suggestedDisplayValue, value)
-    ) {
+    if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) {
       let shouldSelectFullRange = false;
 
       if (shouldSelectFullInputValueInComponentDidUpdate) {
@@ -100,11 +95,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
           differenceIndex++;
         }
         if (differenceIndex > 0 && this._inputElement.current) {
-          this._inputElement.current.setSelectionRange(
-            differenceIndex,
-            suggestedDisplayValue.length,
-            SELECTION_BACKWARD
-          );
+          this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
         }
       }
     }
@@ -284,12 +275,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
    */
   private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string): string {
     let displayValue = inputValue;
-    if (
-      suggestedDisplayValue &&
-      inputValue &&
-      this._doesTextStartWith(suggestedDisplayValue, displayValue) &&
-      this._autoFillEnabled
-    ) {
+    if (suggestedDisplayValue && inputValue && this._doesTextStartWith(suggestedDisplayValue, displayValue) && this._autoFillEnabled) {
       displayValue = suggestedDisplayValue;
     }
     return displayValue;
@@ -306,4 +292,4 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 /**
  *  Legacy, @deprecated, do not use.
  */
-export class BaseAutoFill extends Autofill { }
+export class BaseAutoFill extends Autofill {}
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
index bb9eaab1e8520..aed8395a4a24f 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseComponent, getRTL, createRef, classNamesFunction } from '../../Utilities';
+import { BaseComponent, getRTL, classNamesFunction } from '../../Utilities';
 import { IProcessedStyleSet } from '../../Styling';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Link } from '../../Link';
@@ -30,7 +30,7 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
   };
 
   private _classNames: IProcessedStyleSet<IBreadcrumbStyles>;
-  private _focusZone = createRef<FocusZone>();
+  private _focusZone = React.createRef<FocusZone>();
 
   constructor(props: IBreadcrumbProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
index b9ec9424d6876..70b4fdcbd8923 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -11,7 +11,7 @@ export interface IBreadcrumb {
   focus(): void;
 }
 
-export interface IBreadcrumbProps extends React.Props<BreadcrumbBase> {
+export interface IBreadcrumbProps extends React.ClassAttributes<BreadcrumbBase> {
   /**
    * Optional callback to access the IBreadcrumb interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
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 0572269021acf..334a96f21c793 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -8,7 +8,6 @@ import {
   getId,
   getNativeProps,
   KeyCodes,
-  createRef,
   css,
   mergeAriaAttributeValues,
   portalContainsElement
@@ -50,8 +49,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     split: false
   };
 
-  private _buttonElement = createRef<HTMLElement>();
-  private _splitButtonContainer = createRef<HTMLDivElement>();
+  private _buttonElement = React.createRef<HTMLElement>();
+  private _splitButtonContainer = React.createRef<HTMLDivElement>();
   private _labelId: string;
   private _descriptionId: string;
   private _ariaDescriptionId: string;
@@ -140,7 +139,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     const tag = renderAsAnchor ? 'a' : 'button';
 
     const nativeProps = getNativeProps(
-      assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props),
+      assign(renderAsAnchor ? {} : { type: 'button' }, this.props),
       renderAsAnchor ? anchorProperties : buttonProperties,
       [
         'disabled' // let disabled buttons be focused and styled as disabled.
@@ -217,8 +216,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     // For split buttons, touching anywhere in the button should drop the dropdown, which should contain the primary action.
     // This gives more hit target space for touch environments. We're setting the onpointerdown here, because React
     // does not support Pointer events yet.
-    if (this._isSplitButton && this._splitButtonContainer.value && 'onpointerdown' in this._splitButtonContainer.value) {
-      this._events.on(this._splitButtonContainer.value, 'pointerdown', this._onPointerDown, true);
+    if (this._isSplitButton && this._splitButtonContainer.current && 'onpointerdown' in this._splitButtonContainer.current) {
+      this._events.on(this._splitButtonContainer.current, 'pointerdown', this._onPointerDown, true);
     }
   }
 
@@ -317,7 +316,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     const {
       text,
       children,
-      secondaryText = this.props.description,
+      secondaryText = this.props.secondaryText,
       onRenderText = this._onRenderText,
       onRenderDescription = this._onRenderDescription
     } = this.props;
@@ -667,7 +666,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   };
 
   private _onTouchStart: () => void = () => {
-    if (this._isSplitButton && this._splitButtonContainer.value && !('onpointerdown' in this._splitButtonContainer.value)) {
+    if (this._isSplitButton && this._splitButtonContainer.current && !('onpointerdown' in this._splitButtonContainer.current)) {
       this._handleTouchAndPointerEvent();
     }
   };
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
index 860d9c90d04e4..bddaaad0004f9 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BaseButton } from './BaseButton';
-import { Button } from './Button';
 import { IButtonClassNames } from './BaseButton.classNames';
 import { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 import { IRefObject, IRenderFunction, KeyCodes, IComponentAs } from '../../Utilities';
@@ -31,8 +30,7 @@ export interface IButton {
   openMenu: (shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;
 }
 
-export interface IButtonProps
-  extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button> {
+export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton> {
   /**
    * Optional callback to access the IButton interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index c895d44744e31..4629f4af8ab1b 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -38,7 +38,7 @@ export interface ICalendarDay {
   focus(): void;
 }
 
-export interface ICalendarDayProps extends React.Props<CalendarDay> {
+export interface ICalendarDayProps extends React.ClassAttributes<CalendarDay> {
   componentRef?: (c: ICalendarDay) => void;
   strings: ICalendarStrings;
   selectedDate: Date;
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 726e9cbca979e..fd8e8524b83eb 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -19,7 +19,7 @@ export interface ICalendarMonth {
   focus(): void;
 }
 
-export interface ICalendarMonthProps extends React.Props<CalendarMonth> {
+export interface ICalendarMonthProps extends React.ClassAttributes<CalendarMonth> {
   componentRef?: (c: ICalendarMonth) => void;
   navigatedDate: Date;
   selectedDate: Date;
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index 01a2a4e09e43b..a883a69e32cbc 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -11,7 +11,6 @@ import {
   getWindow,
   getDocument,
   css,
-  createRef,
   getNativeProps,
   divProperties
 } from '../../Utilities';
@@ -62,8 +61,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   private _classNames: { [key in keyof ICalloutContentStyles]: string };
   private _didSetInitialFocus: boolean;
-  private _hostElement = createRef<HTMLDivElement>();
-  private _calloutElement = createRef<HTMLDivElement>();
+  private _hostElement = React.createRef<HTMLDivElement>();
+  private _calloutElement = React.createRef<HTMLDivElement>();
   private _targetWindow: Window;
   private _bounds: IRectangle;
   private _positionAttempts: number;
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
index 58f6ab4c49cbf..3da959e870351 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
@@ -67,11 +67,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
     return (
       <div>
         <div className={styles.buttonArea} ref={this._menuButtonElement}>
-          <DefaultButton
-            id="toggleCallout"
-            onClick={this._onShowMenuClicked}
-            text={isCalloutVisible ? 'Hide callout' : 'Show callout'}
-          />
+          <DefaultButton id="toggleCallout" onClick={this._onShowMenuClicked} text={isCalloutVisible ? 'Hide callout' : 'Show callout'} />
         </div>
         <Callout
           className="ms-CalloutExample-callout"
@@ -79,7 +75,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
           ariaDescribedBy={'callout-description-1'}
           role={'alertdialog'}
           gapSpace={0}
-          target={this._menuButtonElement.value}
+          target={this._menuButtonElement.current}
           onDismiss={this._onCalloutDismiss}
           setInitialFocus={true}
           hidden={!this.state.isCalloutVisible}
@@ -92,8 +88,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
           <div className="ms-CalloutExample-inner">
             <div className="ms-CalloutExample-content">
               <p className="ms-CalloutExample-subText" id={'callout-description-1'}>
-                Message body is optional. If help documentation is available, consider adding a link to learn more at
-                the bottom.
+                Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
               </p>
             </div>
             <div className="ms-CalloutExample-actions">
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts
index 1be8d165ce5a6..3050c99425c2a 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts
@@ -3,7 +3,7 @@ import { CheckBase } from './Check.base';
 import { IStyle, ITheme } from '../../Styling';
 import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
 
-export interface ICheckProps extends React.Props<CheckBase> {
+export interface ICheckProps extends React.ClassAttributes<CheckBase> {
   /**
    * Gets the component ref.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.base.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.base.tsx
index a92ca9ed486f2..d58f1387b413b 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.base.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Label } from '../../Label';
 import { ChoiceGroupOption, OnFocusCallback, OnChangeCallback } from './ChoiceGroupOption/index';
 import { IChoiceGroupOption, IChoiceGroupProps, IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types';
-import { BaseComponent, classNamesFunction, createRef, getId, find } from '../../Utilities';
+import { BaseComponent, classNamesFunction, getId, find } from '../../Utilities';
 
 const getClassNames = classNamesFunction<IChoiceGroupStyleProps, IChoiceGroupStyles>();
 
@@ -20,7 +20,7 @@ export class ChoiceGroupBase extends BaseComponent<IChoiceGroupProps, IChoiceGro
 
   private _id: string;
   private _labelId: string;
-  private _inputElement = createRef<HTMLInputElement>();
+  private _inputElement = React.createRef<HTMLInputElement>();
   private focusedVars: { [key: string]: OnFocusCallback } = {};
   private changedVars: { [key: string]: OnChangeCallback } = {};
 

From 9a70bf768710aee94ca31bd3eb8eb2b1c6b952f8 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 22 Oct 2018 16:26:08 -0700
Subject: [PATCH 02/10] Adding corresponding change file.

---
 .../master_2018-10-22-23-24.json                      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json

diff --git a/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json b/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json
new file mode 100644
index 0000000000000..3e2f94027a7e3
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removing some of the deprecated components flaged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file

From 9e4a6435ca495abc43c1e10521689b26ee64f4ff Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Tue, 23 Oct 2018 14:02:38 -0700
Subject: [PATCH 03/10] Reverting changes that affected backwards compatibility
 because it removed own deprecated usage.

---
 .../src/components/ActivityItem/ActivityItem.tsx              | 4 ++--
 .../src/components/Button/BaseButton.tsx                      | 2 +-
 .../src/components/Button/Button.types.ts                     | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
index 2de6b0b334113..9cea2841ca288 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -53,7 +53,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   private _onRenderActivityDescription = (props: IActivityItemProps): JSX.Element | null => {
     const classNames = this._getClassNames(props);
 
-    const activityDescription = props.activityDescription;
+    const activityDescription = props.activityDescription || props.activityDescriptionText;
 
     if (activityDescription) {
       return <span className={classNames.activityText}>{activityDescription}</span>;
@@ -65,7 +65,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   private _onRenderComments = (props: IActivityItemProps): JSX.Element | null => {
     const classNames = this._getClassNames(props);
 
-    const comments = props.comments;
+    const comments = props.comments || props.commentText;
 
     if (!props.isCompact && comments) {
       return <div className={classNames.commentText}>{comments}</div>;
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 334a96f21c793..a46fde7ee6891 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -139,7 +139,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     const tag = renderAsAnchor ? 'a' : 'button';
 
     const nativeProps = getNativeProps(
-      assign(renderAsAnchor ? {} : { type: 'button' }, this.props),
+      assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props),
       renderAsAnchor ? anchorProperties : buttonProperties,
       [
         'disabled' // let disabled buttons be focused and styled as disabled.
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
index bddaaad0004f9..860d9c90d04e4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BaseButton } from './BaseButton';
+import { Button } from './Button';
 import { IButtonClassNames } from './BaseButton.classNames';
 import { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 import { IRefObject, IRenderFunction, KeyCodes, IComponentAs } from '../../Utilities';
@@ -30,7 +31,8 @@ export interface IButton {
   openMenu: (shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;
 }
 
-export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton> {
+export interface IButtonProps
+  extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button> {
   /**
    * Optional callback to access the IButton interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

From 146d37ac94d34e9e968e359d58626608fad6735a Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Tue, 23 Oct 2018 14:16:17 -0700
Subject: [PATCH 04/10] Adding missing deprecation reversion in BaseButton.

---
 .../office-ui-fabric-react/src/components/Button/BaseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a46fde7ee6891..5c9dbb8bb48f9 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -316,7 +316,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     const {
       text,
       children,
-      secondaryText = this.props.secondaryText,
+      secondaryText = this.props.description,
       onRenderText = this._onRenderText,
       onRenderDescription = this._onRenderDescription
     } = this.props;

From e5e4743954a6633f99c2ac652371f2d250f4654c Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 29 Oct 2018 13:48:51 -0700
Subject: [PATCH 05/10] Adding changes in oufr api.

---
 .../office-ui-fabric-react/etc/office-ui-fabric-react.api.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
index 0061d5c1337c6..9d2babf86dabd 100644
--- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
+++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
@@ -2111,7 +2111,7 @@ interface IBreadcrumbItem {
 }
 
 // @public (undocumented)
-interface IBreadcrumbProps extends React.Props<BreadcrumbBase> {
+interface IBreadcrumbProps extends React.ClassAttributes<BreadcrumbBase> {
   ariaLabel?: string;
   className?: string;
   componentRef?: IRefObject<IBreadcrumb>;
@@ -2500,7 +2500,7 @@ interface ICheckboxStyles {
 }
 
 // @public (undocumented)
-interface ICheckProps extends React.Props<CheckBase> {
+interface ICheckProps extends React.ClassAttributes<CheckBase> {
   alwaysShowCheck?: boolean;
   checked?: boolean;
   className?: string;

From 64f2b458fb630a33921d249491bb07b9ef43a3f2 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Thu, 29 Nov 2018 15:29:34 -0800
Subject: [PATCH 06/10] Lifting the resolution of default and user provided
 style variables to Utilities.

---
 .../src/components/Button/Button.styles.ts    | 11 +++++++++-
 .../src/components/Toggle/Toggle.styles.ts    | 11 +++-------
 .../src/utilities/VariableProcessing.ts       | 22 +++++++++++++------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/experiments/src/components/Button/Button.styles.ts b/packages/experiments/src/components/Button/Button.styles.ts
index 41094e17b9942..64abaa4f011c3 100644
--- a/packages/experiments/src/components/Button/Button.styles.ts
+++ b/packages/experiments/src/components/Button/Button.styles.ts
@@ -1,6 +1,6 @@
 import { IButtonComponent, IButtonStyles, IButtonStyleVariablesTypes, IButtonStates } from './Button.types';
 import { getFocusStyle, getGlobalClassNames, concatStyleSets } from '../../Styling';
-import { processVariables } from '../../utilities/VariableProcessing';
+import { merge } from '../../Utilities';
 
 export const getButtonStyles: IButtonComponent['styles'] = props => {
   const { theme, disabled, expanded, className, circular, primary, styleVariables } = props;
@@ -222,3 +222,12 @@ export const getButtonStyles: IButtonComponent['styles'] = props => {
     }
   );
 };
+
+export type IProcessedVariables<T> = { [P in keyof T]-?: IProcessedVariables<T[P]> };
+
+export function processVariables<T>(partialVariables: T, customVariables?: T): IProcessedVariables<T> {
+  // tslint:disable-next-line:no-any
+  const result = customVariables ? merge({}, partialVariables, customVariables) : partialVariables;
+
+  return result as IProcessedVariables<T>;
+}
diff --git a/packages/experiments/src/components/Toggle/Toggle.styles.ts b/packages/experiments/src/components/Toggle/Toggle.styles.ts
index 83baf87131285..562f1cbfe230b 100644
--- a/packages/experiments/src/components/Toggle/Toggle.styles.ts
+++ b/packages/experiments/src/components/Toggle/Toggle.styles.ts
@@ -1,5 +1,6 @@
 import { IToggleComponent, IToggleStyles, IToggleStyleVariablesTypes, IToggleStyleVariables, IToggleViewProps } from './Toggle.types';
 import { getFocusStyle, getGlobalClassNames, HighContrastSelector, concatStyleSets } from '../../Styling';
+import { resolveStyleVariables } from '../../utilities/VariableProcessing';
 
 const GlobalClassNames = {
   root: 'ms-Toggle',
@@ -214,15 +215,9 @@ export const ToggleStyles: IToggleComponent['styles'] = props => {
   }
 
   function getToggleStyles(userStyleVariables: IToggleStyleVariables): Partial<IToggleStyles> {
-    let toggleVariables: IToggleStyleVariablesTypes;
+    let toggleVariables = getToggleViewStyleVariables(props);
 
-    toggleVariables = getToggleViewStyleVariables(props);
-
-    if (typeof userStyleVariables === 'function') {
-      toggleVariables = { ...toggleVariables, ...userStyleVariables(props) };
-    } else if (userStyleVariables !== undefined) {
-      toggleVariables = { ...toggleVariables, ...userStyleVariables };
-    }
+    toggleVariables = resolveStyleVariables(props, toggleVariables, userStyleVariables);
 
     return getToggleStylesFromState(toggleVariables);
   }
diff --git a/packages/experiments/src/utilities/VariableProcessing.ts b/packages/experiments/src/utilities/VariableProcessing.ts
index b16af3dff4f47..91d6e27507e73 100644
--- a/packages/experiments/src/utilities/VariableProcessing.ts
+++ b/packages/experiments/src/utilities/VariableProcessing.ts
@@ -1,10 +1,18 @@
-import { merge } from '../Utilities';
+export type IComponentStyleVariables<TComponentViewProps, TComponentStyleVariablesTypes> =
+  | TComponentStyleVariablesTypes
+  | ((props: TComponentViewProps) => TComponentStyleVariablesTypes)
+  | undefined;
 
-export type IProcessedVariables<T> = { [P in keyof T]-?: IProcessedVariables<T[P]> };
+export function resolveStyleVariables<
+  TViewProps,
+  TStyleVariablesTypes,
+  TStyleVariables extends IComponentStyleVariables<TViewProps, TStyleVariablesTypes>
+>(props: TViewProps, componentStyleVariables: TStyleVariablesTypes, userStyleVariables: TStyleVariables): TStyleVariablesTypes {
+  if (typeof userStyleVariables === 'function') {
+    componentStyleVariables = { ...(componentStyleVariables as any), ...(userStyleVariables as Function)(props) };
+  } else if (userStyleVariables !== undefined) {
+    componentStyleVariables = { ...(componentStyleVariables as any), ...(userStyleVariables as any) };
+  }
 
-export function processVariables<T>(partialVariables: T, customVariables?: T): IProcessedVariables<T> {
-  // tslint:disable-next-line:no-any
-  const result = customVariables ? merge({}, partialVariables, customVariables) : partialVariables;
-
-  return result as IProcessedVariables<T>;
+  return componentStyleVariables;
 }

From b058c6b8ac4a7c20a057b222ba4027a2c5cac51c Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Thu, 29 Nov 2018 15:33:50 -0800
Subject: [PATCH 07/10] Adding change file.

---
 .../experiments/styleUtils_2018-11-29-23-33.json      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@uifabric/experiments/styleUtils_2018-11-29-23-33.json

diff --git a/common/changes/@uifabric/experiments/styleUtils_2018-11-29-23-33.json b/common/changes/@uifabric/experiments/styleUtils_2018-11-29-23-33.json
new file mode 100644
index 0000000000000..cb40b35056cf7
--- /dev/null
+++ b/common/changes/@uifabric/experiments/styleUtils_2018-11-29-23-33.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Lifting the resolution of default and user provided style variables to Utilities.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file

From 0511664df8b841621127df42b877a262ff2e42cd Mon Sep 17 00:00:00 2001
From: Humberto Makoto Morimoto Burgos <Humberto.Morimoto@microsoft.com>
Date: Thu, 29 Nov 2018 15:36:49 -0800
Subject: [PATCH 08/10] Delete master_2018-10-22-23-24.json

---
 .../master_2018-10-22-23-24.json                      | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json

diff --git a/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json b/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json
deleted file mode 100644
index 3e2f94027a7e3..0000000000000
--- a/common/changes/office-ui-fabric-react/master_2018-10-22-23-24.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Removing some of the deprecated components flaged when turning the tslint deprecation flag to true in the office-ui-fabric-react package.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "Humberto.Morimoto@microsoft.com"
-}
\ No newline at end of file

From 12c1e81b85a9d543a8d6f1301b47ace6c9564948 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Fri, 30 Nov 2018 09:59:59 -0800
Subject: [PATCH 09/10] Camel casing variable processing utility file.

---
 .../{VariableProcessing.ts => styleVariableProcessing.ts}         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/experiments/src/utilities/{VariableProcessing.ts => styleVariableProcessing.ts} (100%)

diff --git a/packages/experiments/src/utilities/VariableProcessing.ts b/packages/experiments/src/utilities/styleVariableProcessing.ts
similarity index 100%
rename from packages/experiments/src/utilities/VariableProcessing.ts
rename to packages/experiments/src/utilities/styleVariableProcessing.ts

From 5e8e30f59b0061a3b64644dc26b19ec3fa9d88f8 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Fri, 30 Nov 2018 10:10:19 -0800
Subject: [PATCH 10/10] Simplifying resolveStyleVariables to one line with less
 repeat.

---
 .../src/components/Toggle/Toggle.styles.ts     |  2 +-
 .../src/utilities/styleVariableProcessing.ts   | 18 ------------------
 .../src/utilities/variableProcessing.ts        | 15 +++++++++++++++
 3 files changed, 16 insertions(+), 19 deletions(-)
 delete mode 100644 packages/experiments/src/utilities/styleVariableProcessing.ts
 create mode 100644 packages/experiments/src/utilities/variableProcessing.ts

diff --git a/packages/experiments/src/components/Toggle/Toggle.styles.ts b/packages/experiments/src/components/Toggle/Toggle.styles.ts
index 562f1cbfe230b..4c3e9cd6f8f2a 100644
--- a/packages/experiments/src/components/Toggle/Toggle.styles.ts
+++ b/packages/experiments/src/components/Toggle/Toggle.styles.ts
@@ -1,6 +1,6 @@
 import { IToggleComponent, IToggleStyles, IToggleStyleVariablesTypes, IToggleStyleVariables, IToggleViewProps } from './Toggle.types';
 import { getFocusStyle, getGlobalClassNames, HighContrastSelector, concatStyleSets } from '../../Styling';
-import { resolveStyleVariables } from '../../utilities/VariableProcessing';
+import { resolveStyleVariables } from '../../utilities/variableProcessing';
 
 const GlobalClassNames = {
   root: 'ms-Toggle',
diff --git a/packages/experiments/src/utilities/styleVariableProcessing.ts b/packages/experiments/src/utilities/styleVariableProcessing.ts
deleted file mode 100644
index 91d6e27507e73..0000000000000
--- a/packages/experiments/src/utilities/styleVariableProcessing.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type IComponentStyleVariables<TComponentViewProps, TComponentStyleVariablesTypes> =
-  | TComponentStyleVariablesTypes
-  | ((props: TComponentViewProps) => TComponentStyleVariablesTypes)
-  | undefined;
-
-export function resolveStyleVariables<
-  TViewProps,
-  TStyleVariablesTypes,
-  TStyleVariables extends IComponentStyleVariables<TViewProps, TStyleVariablesTypes>
->(props: TViewProps, componentStyleVariables: TStyleVariablesTypes, userStyleVariables: TStyleVariables): TStyleVariablesTypes {
-  if (typeof userStyleVariables === 'function') {
-    componentStyleVariables = { ...(componentStyleVariables as any), ...(userStyleVariables as Function)(props) };
-  } else if (userStyleVariables !== undefined) {
-    componentStyleVariables = { ...(componentStyleVariables as any), ...(userStyleVariables as any) };
-  }
-
-  return componentStyleVariables;
-}
diff --git a/packages/experiments/src/utilities/variableProcessing.ts b/packages/experiments/src/utilities/variableProcessing.ts
new file mode 100644
index 0000000000000..dba5c754b0340
--- /dev/null
+++ b/packages/experiments/src/utilities/variableProcessing.ts
@@ -0,0 +1,15 @@
+export type IComponentStyleVariables<TComponentViewProps, TComponentStyleVariablesTypes> =
+  | TComponentStyleVariablesTypes
+  | ((props: TComponentViewProps) => TComponentStyleVariablesTypes)
+  | undefined;
+
+export function resolveStyleVariables<
+  TViewProps,
+  TStyleVariablesTypes,
+  TStyleVariables extends IComponentStyleVariables<TViewProps, TStyleVariablesTypes>
+>(props: TViewProps, ...variableArray: TStyleVariables[]): TStyleVariablesTypes {
+  return Object.assign(
+    {},
+    ...variableArray.map(variables => (typeof variables === 'function' ? (variables as Function)(props) : variables))
+  );
+}