Switch from using React.HTMLProps to React.HTMLAttributes (#1967)

* Switch from React.HTMLProps to React.HTMLAttributes

* Add rush files

* Fix build

apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx

@@ -5,7 +5,7 @@ const styles: any = stylesImport;
 
 const Highlight = require('react-highlight');
 
-export interface ICodeBlockProps extends React.HTMLProps<HTMLElement> {
+export interface ICodeBlockProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The language of the code block. See https://highlightjs.org/static/demo/ for a list of supported languages.
    * @default html

apps/todo-app/src/components/Todo.tsx

@@ -54,15 +54,15 @@ export default class Todo extends React.Component<ITodoProps, ITodoState> {
     );
   }
 
-  private _renderWorkingOnItSpinner(): React.ReactElement<React.HTMLProps<HTMLDivElement>> {
+  private _renderWorkingOnItSpinner(): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     return this.props.dataProvider.isLoading && this.state.items.length > 0
       ? <div className={ styles.workingOnItSpinner }>
         <Spinner type={ SpinnerType.normal } />
       </div>
       : undefined;
   }
 
-  private _renderFetchingTasksSpinner(): React.ReactElement<React.HTMLProps<HTMLDivElement>> {
+  private _renderFetchingTasksSpinner(): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     return this.props.dataProvider.isLoading && this.state.items.length === 0
       ? <div className={ styles.fetchingTasksSpinner }>
         <Spinner type={ SpinnerType.large } label={ strings.fetchingTasksLabel } />

apps/todo-app/src/components/TodoItem.tsx

@@ -35,7 +35,7 @@ export default class TodoItem extends React.Component<ITodoItemProps, {}> {
     window.clearTimeout(this._animationTimeoutId);
   }
 
-  public render(): React.ReactElement<React.HTMLProps<HTMLDivElement>> {
+  public render(): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     const className: string = css(
       styles.todoItem,
       this.props.item.isComplete === true ? styles.isCompleted : '',

common/changes/@uifabric/example-app-base/types-switch-from-props-to-attributes_2017-06-09-20-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "[email protected]"
+}

common/changes/@uifabric/fabric-website/types-switch-from-props-to-attributes_2017-06-09-20-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/fabric-website",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}

common/changes/@uifabric/styling/types-switch-from-props-to-attributes_2017-06-09-20-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/styling",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "[email protected]"
+}

common/changes/@uifabric/utilities/types-switch-from-props-to-attributes_2017-06-09-20-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/types-switch-from-props-to-attributes_2017-06-09-20-27.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Component properties now extend React.HTMLAttributes, rather than React.HTMLProps",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/example-app-base/src/components/Highlight/Highlight.tsx

@@ -5,7 +5,7 @@ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 
 hljs.registerLanguage('javascript', javascript);
 
-export class Highlight extends BaseComponent<React.HTMLProps<HTMLDivElement>, {}> {
+export class Highlight extends BaseComponent<React.HTMLAttributes<HTMLDivElement>, {}> {
   private _codeElement: HTMLElement;
 
   public render() {

packages/example-component/src/ExampleComponent.Props.ts

@@ -1,7 +1,7 @@
 import { ExampleComponent } from './ExampleComponent';
 import { IRenderFunction } from '@uifabric/utilities';
 
-export interface IExampleComponentProps extends React.HTMLProps<HTMLDivElement | ExampleComponent> {
+export interface IExampleComponentProps extends React.HTMLAttributes<HTMLDivElement | ExampleComponent> {
   /**
    * Optional icon name using fabric icons.
    *

packages/example-component/src/ExampleComponent.tsx

@@ -42,7 +42,7 @@ export class ExampleComponent extends BaseComponent<IExampleComponentProps, {}>
     const { className, href }: IExampleComponentProps = this.props;
 
     if (!!href) {
-      const anchorProps: React.HTMLProps<HTMLAnchorElement> =
+      const anchorProps: React.HTMLAttributes<HTMLAnchorElement> =
         getNativeProps(this.props, anchorProperties);
 
       return (
@@ -53,7 +53,7 @@ export class ExampleComponent extends BaseComponent<IExampleComponentProps, {}>
         />
       );
     } else {
-      const buttonProps: React.HTMLProps<HTMLButtonElement> =
+      const buttonProps: React.HTMLAttributes<HTMLButtonElement> =
         getNativeProps(this.props, buttonProperties);
 
       return (

packages/office-ui-fabric-react/src/common/connect.test.tsx

@@ -13,7 +13,7 @@ import { ISubscribable } from './ISubscribable';
 
 let { expect } = chai;
 
-interface ITestComponentProps extends React.HTMLProps<HTMLDivElement> { }
+interface ITestComponentProps extends React.HTMLAttributes<HTMLDivElement> { }
 
 // Dumb component.
 const TestComponent = (props: ITestComponentProps) => (

packages/office-ui-fabric-react/src/components/Button/Button.Props.ts

@@ -138,7 +138,7 @@ export interface IButtonProps extends React.HTMLAttributes<HTMLButtonElement | H
    * they will be mixed into the button/anchor element rendered by the component.
    * @deprecated
    */
-  rootProps?: React.HTMLProps<HTMLButtonElement> | React.HTMLProps<HTMLAnchorElement>;
+  rootProps?: React.HTMLAttributes<HTMLButtonElement> | React.HTMLAttributes<HTMLAnchorElement>;
 
   /**
    * Deprecated on 4/15/2017, use iconProps={ { iconName: 'Emoji2' } }.

packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts

@@ -14,7 +14,7 @@ export interface ICheckbox {
 /**
  * Checkbox properties.
  */
-export interface ICheckboxProps extends React.HTMLProps<HTMLElement | HTMLInputElement> {
+export interface ICheckboxProps extends React.HTMLAttributes<HTMLElement | HTMLInputElement> {
   /**
    * Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -59,5 +59,5 @@ export interface ICheckboxProps extends React.HTMLProps<HTMLElement | HTMLInputE
    * Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take
    * precedence over the later.
    */
-  inputProps?: React.HTMLProps<HTMLElement | HTMLInputElement>;
+  inputProps?: React.HTMLAttributes<HTMLElement | HTMLInputElement>;
 }

packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts

@@ -6,7 +6,7 @@ export interface IChoiceGroup {
 
 }
 
-export interface IChoiceGroupProps extends React.HTMLProps<HTMLElement | HTMLInputElement> {
+export interface IChoiceGroupProps extends React.HTMLAttributes<HTMLElement | HTMLInputElement> {
   /**
    * Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.Props.ts

@@ -8,7 +8,7 @@ export interface ICommandBar {
   focus(): void;
 }
 
-export interface ICommandBarProps extends React.HTMLProps<HTMLDivElement> {
+export interface ICommandBarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the ICommandBar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx

@@ -5,7 +5,7 @@ import { css } from '../../Utilities';
 import { Check } from '../../Check';
 import * as styles from './DetailsRowCheck.scss';
 
-export interface IDetailsRowCheckProps extends React.HTMLProps<HTMLElement> {
+export interface IDetailsRowCheckProps extends React.HTMLAttributes<HTMLElement> {
   selected?: boolean;
   /**
    * Deprecated at v.65.1 and will be removed by v 1.0. Use 'selected' instead.

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx

@@ -40,7 +40,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
     );
   }
 
-  private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLProps<HTMLDivElement>> {
+  private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     let { width, height, imageFit } = previewImage;
 
     let image = (
@@ -66,7 +66,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
   }
 
   @autobind
-  private _renderPreviewList(previewImages: IDocumentCardPreviewImage[]): React.ReactElement<React.HTMLProps<HTMLDivElement>> {
+  private _renderPreviewList(previewImages: IDocumentCardPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
     let { getOverflowDocumentCountText } = this.props;
 
     // Determine how many documents we won't be showing

packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx

@@ -33,7 +33,7 @@ if (typeof (document) === 'object' && document.documentElement && !document.docu
   document.documentElement.setAttribute('dir', 'ltr');
 }
 
-export class Fabric extends BaseComponent<React.HTMLProps<HTMLDivElement>, IFabricState> {
+export class Fabric extends BaseComponent<React.HTMLAttributes<HTMLDivElement>, IFabricState> {
   public refs: {
     [key: string]: React.ReactInstance;
     root: HTMLElement;

packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts

@@ -53,14 +53,14 @@ export interface IFacepileProps extends React.Props<Facepile> {
 
   /** Method to access properties on the underlying Persona control */
   getPersonaProps?: (persona: IFacepilePersona) => IPersonaProps;
-  
+
   /**
    * Optional class for Facepile root element.
    */
   className?: string;
 }
 
-export interface IFacepilePersona extends React.HTMLProps<HTMLButtonElement | HTMLDivElement> {
+export interface IFacepilePersona extends React.HTMLAttributes<HTMLButtonElement | HTMLDivElement> {
   /**
    * Name of the person.
    */

packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts

@@ -7,7 +7,7 @@ export interface IFocusTrapZone {
   focus: () => void;
 }
 
-export interface IFocusTrapZoneProps extends React.HTMLProps<HTMLDivElement> {
+export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the IFocusTrapZone interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx

@@ -14,7 +14,7 @@ export interface IBoxNoClickExampleExampleState {
   isToggled: boolean;
 }
 
-export default class BoxNoClickExample extends React.Component<React.HTMLProps<HTMLDivElement>, IBoxNoClickExampleExampleState> {
+export default class BoxNoClickExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxNoClickExampleExampleState> {
   private _toggle: IToggle;
 
   constructor(props) {

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx

@@ -14,7 +14,7 @@ export interface IBoxExampleExampleState {
   isChecked: boolean;
 }
 
-export default class BoxExample extends React.Component<React.HTMLProps<HTMLDivElement>, IBoxExampleExampleState> {
+export default class BoxExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxExampleExampleState> {
   private _toggle: IToggle;
 
   constructor(props) {

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx

@@ -13,7 +13,7 @@ export interface IBoxExampleExampleState {
   isChecked: boolean;
 }
 
-export default class BoxExample extends React.Component<React.HTMLProps<HTMLDivElement>, IBoxExampleExampleState> {
+export default class BoxExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxExampleExampleState> {
   private _toggle: IToggle;
 
   constructor(props) {

packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx

@@ -75,7 +75,7 @@ export interface IFocusTrapZoneNestedExampleState {
 
 const NAMES: string[] = ['One', 'Two', 'Three', 'Four', 'Five'];
 
-export default class FocusTrapZoneNestedExample extends React.Component<React.HTMLProps<HTMLDivElement>, IFocusTrapZoneNestedExampleState> {
+export default class FocusTrapZoneNestedExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IFocusTrapZoneNestedExampleState> {
 
   constructor() {
     super();

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts

@@ -24,7 +24,7 @@ export interface IFocusZone {
 /**
  * FocusZone component props.
  */
-export interface IFocusZoneProps extends React.HTMLProps<HTMLElement | FocusZone> {
+export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | FocusZone> {
   /**
    * Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -86,7 +86,7 @@ export interface IFocusZoneProps extends React.HTMLProps<HTMLElement | FocusZone
    * Deprecated at v1.12.1. DIV props provided to the FocusZone will be mixed into the root element.
    * @deprecated
    */
-  rootProps?: React.HTMLProps<HTMLDivElement>;
+  rootProps?: React.HTMLAttributes<HTMLDivElement>;
 
   /**
    * Callback method for determining if focus should indeed be set on the given element.

packages/office-ui-fabric-react/src/components/Icon/Icon.Props.ts

@@ -34,7 +34,7 @@ export interface IIconStyles {
   imageContainer?: IStyle;
 }
 
-export interface IIconProps extends React.HTMLProps<HTMLElement> {
+export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The name of the icon to use from the icon font.
    *

packages/office-ui-fabric-react/src/components/Image/Image.Props.ts

@@ -4,7 +4,7 @@ export interface IImage {
 
 }
 
-export interface IImageProps extends React.HTMLProps<HTMLImageElement> {
+export interface IImageProps extends React.HTMLAttributes<HTMLImageElement> {
   /**
    * Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/Label/Label.Props.ts

@@ -6,7 +6,7 @@ export interface ILabel {
 
 }
 
-export interface ILabelProps extends React.HTMLProps<HTMLLabelElement> {
+export interface ILabelProps extends React.HTMLAttributes<HTMLLabelElement> {
   /**
    * Optional callback to access the ILabel interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts

@@ -5,7 +5,7 @@ export interface ILayer {
 
 }
 
-export interface ILayerProps extends React.HTMLProps<HTMLDivElement | Layer> {
+export interface ILayerProps extends React.HTMLAttributes<HTMLDivElement | Layer> {
   /**
    * Optional callback to access the ILayer interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/Layer/LayerHost.Props.ts

@@ -4,7 +4,7 @@ export interface ILayerHost {
 
 }
 
-export interface ILayerHostProps extends React.HTMLProps<HTMLElement> {
+export interface ILayerHostProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Optional callback to access the ILayerHost interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx

@@ -7,7 +7,7 @@ import {
   Layer
 } from './Layer';
 
-export class LayerHost extends BaseComponent<React.HTMLProps<HTMLElement>, {}> {
+export class LayerHost extends BaseComponent<React.HTMLAttributes<HTMLElement>, {}> {
 
   public shouldComponentUpdate() {
     return false;

packages/office-ui-fabric-react/src/components/Link/Link.Props.ts

@@ -8,7 +8,7 @@ export interface ILink {
   focus(): void;
 }
 
-export interface ILinkProps extends React.HTMLProps<HTMLAnchorElement | HTMLButtonElement | HTMLElement | Link> {
+export interface ILinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement | Link> {
   /**
    * Optional callback to access the ILink interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/List/List.Props.ts

@@ -16,7 +16,7 @@ export interface IList {
   scrollToIndex(index: number, measureItem?: (itemIndex: number) => number): void;
 }
 
-export interface IListProps extends React.HTMLProps<List | HTMLDivElement> {
+export interface IListProps extends React.HTMLAttributes<List | HTMLDivElement> {
   /**
    * Optional callback to access the IList interface. Use this instead of ref for accessing
    * the public methods and properties of the component.

packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.Props.ts

@@ -21,7 +21,7 @@ export interface IMarqueeSelectionProps extends React.Props<MarqueeSelection> {
   /**
    * Optional props to mix into the root DIV element.
    */
-  rootProps?: React.HTMLProps<HTMLDivElement>;
+  rootProps?: React.HTMLAttributes<HTMLDivElement>;
 
   /**
    * Optional callback that is called, when the mouse down event occurs, in order to determine

packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts

@@ -4,7 +4,7 @@ export interface IMessageBar {
 
 }
 
-export interface IMessageBarProps extends React.HTMLProps<HTMLElement> {
+export interface IMessageBarProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Optional callback to access the IMessageBar interface. Use this instead of ref for accessing
    * the public methods and properties of the component.