From b6d1149633292f0ccbcbb6c962a9ec75c5fc4233 Mon Sep 17 00:00:00 2001 From: "REDMOND\\miclo" Date: Fri, 9 Jun 2017 13:00:08 -0700 Subject: [PATCH 1/3] Switch from React.HTMLProps to React.HTMLAttributes --- .../fabric-website/src/components/CodeBlock/CodeBlock.tsx | 2 +- apps/todo-app/src/components/Todo.tsx | 4 ++-- apps/todo-app/src/components/TodoItem.tsx | 2 +- .../src/components/Highlight/Highlight.tsx | 2 +- packages/example-component/src/ExampleComponent.Props.ts | 2 +- packages/example-component/src/ExampleComponent.tsx | 4 ++-- .../office-ui-fabric-react/src/common/connect.test.tsx | 2 +- .../src/components/Button/Button.Props.ts | 2 +- .../src/components/Checkbox/Checkbox.Props.ts | 4 ++-- .../src/components/ChoiceGroup/ChoiceGroup.Props.ts | 2 +- .../src/components/CommandBar/CommandBar.Props.ts | 2 +- .../src/components/DetailsList/DetailsRowCheck.tsx | 2 +- .../src/components/DocumentCard/DocumentCardPreview.tsx | 4 ++-- .../src/components/Fabric/Fabric.tsx | 2 +- .../src/components/Facepile/Facepile.Props.ts | 4 ++-- .../src/components/FocusTrapZone/FocusTrapZone.Props.ts | 2 +- .../examples/FocusTrapZone.Box.Click.Example.tsx | 2 +- .../FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx | 2 +- .../FocusTrapZone.Box.FocusOnCustomElement.Example.tsx | 2 +- .../examples/FocusTrapZone.Nested.Example.tsx | 2 +- .../src/components/FocusZone/FocusZone.Props.ts | 4 ++-- .../src/components/Icon/Icon.Props.ts | 2 +- .../src/components/Image/Image.Props.ts | 2 +- .../src/components/Label/Label.Props.ts | 2 +- .../src/components/Layer/Layer.Props.ts | 2 +- .../src/components/Layer/LayerHost.Props.ts | 2 +- .../src/components/Layer/LayerHost.tsx | 2 +- .../src/components/Link/Link.Props.ts | 2 +- .../src/components/List/List.Props.ts | 2 +- .../components/MarqueeSelection/MarqueeSelection.Props.ts | 2 +- .../src/components/MessageBar/MessageBar.Props.ts | 2 +- .../src/components/MessageBar/MessageBar.tsx | 4 ++-- .../src/components/Overlay/Overlay.Props.ts | 2 +- .../src/components/Persona/Persona.Props.ts | 2 +- .../src/components/Pivot/PivotItem.Props.ts | 2 +- .../src/components/Popup/Popup.Props.ts | 2 +- .../src/components/Rating/Rating.Props.ts | 2 +- .../src/components/ResizeGroup/ResizeGroup.Props.ts | 2 +- .../src/components/Slider/Slider.Props.ts | 2 +- .../src/components/TextField/TextField.Props.ts | 2 +- .../src/components/TextField/TextField.tsx | 6 +++--- .../src/components/Toggle/Toggle.Props.ts | 2 +- .../src/components/Tooltip/Tooltip.Props.ts | 2 +- .../src/components/Tooltip/TooltipHost.Props.ts | 2 +- .../src/components/pickers/AutoFill/BaseAutoFill.Props.ts | 2 +- .../src/components/pickers/BasePicker.Props.ts | 2 +- packages/styling/src/examples/IconTile/IconTile.tsx | 2 +- packages/utilities/src/properties.test.ts | 8 ++++---- 48 files changed, 60 insertions(+), 60 deletions(-) diff --git a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx index 46a6a4f450780..869df7be29064 100644 --- a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx +++ b/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 { +export interface ICodeBlockProps extends React.HTMLAttributes { /** * The language of the code block. See https://highlightjs.org/static/demo/ for a list of supported languages. * @default html diff --git a/apps/todo-app/src/components/Todo.tsx b/apps/todo-app/src/components/Todo.tsx index af55e278f4aad..a9ee3fa419776 100644 --- a/apps/todo-app/src/components/Todo.tsx +++ b/apps/todo-app/src/components/Todo.tsx @@ -54,7 +54,7 @@ export default class Todo extends React.Component { ); } - private _renderWorkingOnItSpinner(): React.ReactElement> { + private _renderWorkingOnItSpinner(): React.ReactElement> { return this.props.dataProvider.isLoading && this.state.items.length > 0 ?
@@ -62,7 +62,7 @@ export default class Todo extends React.Component { : undefined; } - private _renderFetchingTasksSpinner(): React.ReactElement> { + private _renderFetchingTasksSpinner(): React.ReactElement> { return this.props.dataProvider.isLoading && this.state.items.length === 0 ?
diff --git a/apps/todo-app/src/components/TodoItem.tsx b/apps/todo-app/src/components/TodoItem.tsx index 2fa2f1565e1ef..0108328a22443 100644 --- a/apps/todo-app/src/components/TodoItem.tsx +++ b/apps/todo-app/src/components/TodoItem.tsx @@ -35,7 +35,7 @@ export default class TodoItem extends React.Component { window.clearTimeout(this._animationTimeoutId); } - public render(): React.ReactElement> { + public render(): React.ReactElement> { const className: string = css( styles.todoItem, this.props.item.isComplete === true ? styles.isCompleted : '', diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx index 5c102f2c359f8..69d177046e47c 100644 --- a/packages/example-app-base/src/components/Highlight/Highlight.tsx +++ b/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, {}> { +export class Highlight extends BaseComponent, {}> { private _codeElement: HTMLElement; public render() { diff --git a/packages/example-component/src/ExampleComponent.Props.ts b/packages/example-component/src/ExampleComponent.Props.ts index c62e8435a6059..67d9cfe2d9387 100644 --- a/packages/example-component/src/ExampleComponent.Props.ts +++ b/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 { +export interface IExampleComponentProps extends React.HTMLAttributes { /** * Optional icon name using fabric icons. * diff --git a/packages/example-component/src/ExampleComponent.tsx b/packages/example-component/src/ExampleComponent.tsx index 9dbd859c5a1c8..3353b2ebddaa8 100644 --- a/packages/example-component/src/ExampleComponent.tsx +++ b/packages/example-component/src/ExampleComponent.tsx @@ -42,7 +42,7 @@ export class ExampleComponent extends BaseComponent const { className, href }: IExampleComponentProps = this.props; if (!!href) { - const anchorProps: React.HTMLProps = + const anchorProps: React.HTMLAttributes = getNativeProps(this.props, anchorProperties); return ( @@ -53,7 +53,7 @@ export class ExampleComponent extends BaseComponent /> ); } else { - const buttonProps: React.HTMLProps = + const buttonProps: React.HTMLAttributes = getNativeProps(this.props, buttonProperties); return ( diff --git a/packages/office-ui-fabric-react/src/common/connect.test.tsx b/packages/office-ui-fabric-react/src/common/connect.test.tsx index d1ed5782cd1e6..1275e1ddd6d99 100644 --- a/packages/office-ui-fabric-react/src/common/connect.test.tsx +++ b/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 { } +interface ITestComponentProps extends React.HTMLAttributes { } // Dumb component. const TestComponent = (props: ITestComponentProps) => ( diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts index 4dbbee37e0218..5fe44938302a6 100644 --- a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts @@ -138,7 +138,7 @@ export interface IButtonProps extends React.HTMLAttributes | React.HTMLProps; + rootProps?: React.HTMLAttributes | React.HTMLAttributes; /** * Deprecated on 4/15/2017, use iconProps={ { iconName: 'Emoji2' } }. diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts index 97224334d7e7e..20033e76dd2a3 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts +++ b/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 { +export interface ICheckboxProps extends React.HTMLAttributes { /** * 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; + inputProps?: React.HTMLAttributes; } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts index 7eb1810c4503d..c7ed0d8159471 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts @@ -6,7 +6,7 @@ export interface IChoiceGroup { } -export interface IChoiceGroupProps extends React.HTMLProps { +export interface IChoiceGroupProps extends React.HTMLAttributes { /** * Optional callback to access the IChoiceGroup 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/CommandBar/CommandBar.Props.ts b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.Props.ts index 94019e5aa1b9b..317dd8184b2bf 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.Props.ts +++ b/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 { +export interface ICommandBarProps extends React.HTMLAttributes { /** * Optional callback to access the ICommandBar 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/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx index 0d06c9da8afb3..fdb0032ad21c2 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx +++ b/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 { +export interface IDetailsRowCheckProps extends React.HTMLAttributes { selected?: boolean; /** * Deprecated at v.65.1 and will be removed by v 1.0. Use 'selected' instead. diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx index cc40147dc45b5..65630a08469b7 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx @@ -40,7 +40,7 @@ export class DocumentCardPreview extends BaseComponent> { + private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement> { let { width, height, imageFit } = previewImage; let image = ( @@ -66,7 +66,7 @@ export class DocumentCardPreview extends BaseComponent> { + private _renderPreviewList(previewImages: IDocumentCardPreviewImage[]): React.ReactElement> { let { getOverflowDocumentCountText } = this.props; // Determine how many documents we won't be showing diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx index 0a0b2b398b8e3..4bd15dbbd820c 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx +++ b/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, IFabricState> { +export class Fabric extends BaseComponent, IFabricState> { public refs: { [key: string]: React.ReactInstance; root: HTMLElement; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts index 351d033bbdd3a..26d6bf2c3ffaf 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts @@ -53,14 +53,14 @@ export interface IFacepileProps extends React.Props { /** 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 { +export interface IFacepilePersona extends React.HTMLAttributes { /** * Name of the person. */ diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts index 14905c8b238c5..1244ec61ae6e1 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.Props.ts +++ b/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 { +export interface IFocusTrapZoneProps extends React.HTMLAttributes { /** * Optional callback to access the IFocusTrapZone 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/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx index 08ee38f5201f6..2ed81f1d67da1 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx +++ b/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, IBoxNoClickExampleExampleState> { +export default class BoxNoClickExample extends React.Component, IBoxNoClickExampleExampleState> { private _toggle: IToggle; constructor(props) { diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx index 7350d5c3154c0..67eebef037b29 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx +++ b/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, IBoxExampleExampleState> { +export default class BoxExample extends React.Component, IBoxExampleExampleState> { private _toggle: IToggle; constructor(props) { diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx index e65a3aa307c1f..0cabce5b0b161 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx +++ b/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, IBoxExampleExampleState> { +export default class BoxExample extends React.Component, IBoxExampleExampleState> { private _toggle: IToggle; constructor(props) { diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx index 28b88bcaaaa1e..94fbc1a7e8e83 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx +++ b/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, IFocusTrapZoneNestedExampleState> { +export default class FocusTrapZoneNestedExample extends React.Component, IFocusTrapZoneNestedExampleState> { constructor() { super(); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts index fc26078a3ed11..aee62c1a0a134 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.Props.ts +++ b/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 { +export interface IFocusZoneProps extends React.HTMLAttributes { /** * 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; + rootProps?: React.HTMLAttributes; /** * Callback method for determining if focus should indeed be set on the given element. diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.Props.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.Props.ts index 3a5be57cc9844..91c093a1bc997 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/Icon.Props.ts +++ b/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 { +export interface IIconProps extends React.HTMLAttributes { /** * The name of the icon to use from the icon font. * diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.Props.ts b/packages/office-ui-fabric-react/src/components/Image/Image.Props.ts index ac6a3391a5516..1e8b7bd8b4ef9 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Image/Image.Props.ts @@ -4,7 +4,7 @@ export interface IImage { } -export interface IImageProps extends React.HTMLProps { +export interface IImageProps extends React.HTMLAttributes { /** * Optional callback to access the ICheckbox 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/Label/Label.Props.ts b/packages/office-ui-fabric-react/src/components/Label/Label.Props.ts index 71c733f8d479f..ab2e569623fe9 100644 --- a/packages/office-ui-fabric-react/src/components/Label/Label.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Label/Label.Props.ts @@ -6,7 +6,7 @@ export interface ILabel { } -export interface ILabelProps extends React.HTMLProps { +export interface ILabelProps extends React.HTMLAttributes { /** * Optional callback to access the ILabel 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/Layer/Layer.Props.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts index 3671781df3343..fb6f36842cef0 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.Props.ts @@ -5,7 +5,7 @@ export interface ILayer { } -export interface ILayerProps extends React.HTMLProps { +export interface ILayerProps extends React.HTMLAttributes { /** * Optional callback to access the ILayer 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/Layer/LayerHost.Props.ts b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.Props.ts index fa539655ff7fc..9f1f2b74ac945 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.Props.ts @@ -4,7 +4,7 @@ export interface ILayerHost { } -export interface ILayerHostProps extends React.HTMLProps { +export interface ILayerHostProps extends React.HTMLAttributes { /** * Optional callback to access the ILayerHost 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/Layer/LayerHost.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx index bef9098341ca5..fee19b2a81252 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx @@ -7,7 +7,7 @@ import { Layer } from './Layer'; -export class LayerHost extends BaseComponent, {}> { +export class LayerHost extends BaseComponent, {}> { public shouldComponentUpdate() { return false; diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.Props.ts b/packages/office-ui-fabric-react/src/components/Link/Link.Props.ts index 2ee4575f68676..5493d4f483568 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.Props.ts +++ b/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 { +export interface ILinkProps extends React.HTMLAttributes { /** * Optional callback to access the ILink 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/List/List.Props.ts b/packages/office-ui-fabric-react/src/components/List/List.Props.ts index 4cbf90d5bfb9c..2fba651a9cf9b 100644 --- a/packages/office-ui-fabric-react/src/components/List/List.Props.ts +++ b/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 { +export interface IListProps extends React.HTMLAttributes { /** * Optional callback to access the IList 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/MarqueeSelection/MarqueeSelection.Props.ts b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.Props.ts index 91f8ec729dbab..858ca0aeaecec 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.Props.ts +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.Props.ts @@ -21,7 +21,7 @@ export interface IMarqueeSelectionProps extends React.Props { /** * Optional props to mix into the root DIV element. */ - rootProps?: React.HTMLProps; + rootProps?: React.HTMLAttributes; /** * Optional callback that is called, when the mouse down event occurs, in order to determine diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts index de75e9e5815f7..a80c29a0fe59e 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.Props.ts @@ -4,7 +4,7 @@ export interface IMessageBar { } -export interface IMessageBarProps extends React.HTMLProps { +export interface IMessageBarProps extends React.HTMLAttributes { /** * Optional callback to access the IMessageBar 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/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx index 41690ab2bac90..dfa4b341cad86 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx @@ -111,7 +111,7 @@ export class MessageBar extends BaseComponent> { + private _renderMultiLine(): React.ReactElement> { return (
> { + private _renderSingleLine(): React.ReactElement> { return (
{ +export interface IOverlayProps extends React.HTMLAttributes { /** * Optional callback to access the IOverlay 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/Persona/Persona.Props.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts index 3938c40b3af53..5bacf9f2ff04e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.Props.ts @@ -6,7 +6,7 @@ export interface IPersona { } -export interface IPersonaProps extends React.HTMLProps { +export interface IPersonaProps extends React.HTMLAttributes { /** * Optional callback to access the IPersona 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/Pivot/PivotItem.Props.ts b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.Props.ts index 9b9328f8c213f..d6af8306cbe72 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.Props.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; -export interface IPivotItemProps extends React.HTMLProps { +export interface IPivotItemProps extends React.HTMLAttributes { /** * The text displayed of each pivot link. */ diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.Props.ts b/packages/office-ui-fabric-react/src/components/Popup/Popup.Props.ts index 816795bbd2c43..03a92f97f4ece 100644 --- a/packages/office-ui-fabric-react/src/components/Popup/Popup.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.Props.ts @@ -7,7 +7,7 @@ export interface IPopup { } -export interface IPopupProps extends React.HTMLProps { +export interface IPopupProps extends React.HTMLAttributes { /** * Optional callback to access the IPopup 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/Rating/Rating.Props.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.Props.ts index 907183eeceb8a..65839082209b4 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.Props.ts @@ -7,7 +7,7 @@ export interface IRating { /** * Rating component props. */ -export interface IRatingProps extends React.HTMLProps { +export interface IRatingProps extends React.HTMLAttributes { /** * Optional callback to access the IRating 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/ResizeGroup/ResizeGroup.Props.ts b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.Props.ts index 24d1738dde2a7..0431ec2cb4a0c 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.Props.ts +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.Props.ts @@ -5,7 +5,7 @@ export interface IResizeGroup { } -export interface IResizeGroupProps extends React.HTMLProps { +export interface IResizeGroupProps extends React.HTMLAttributes { /** * Optional callback to access the IResizeGroup interface. Use this instead of ref for accessing diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.Props.ts b/packages/office-ui-fabric-react/src/components/Slider/Slider.Props.ts index 6b284d4073c25..9ef3df689a999 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.Props.ts @@ -77,5 +77,5 @@ export interface ISliderProps { /** * Optional mixin for additional props on the thumb button within the slider. */ - buttonProps?: React.HTMLProps; + buttonProps?: React.HTMLAttributes; } diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.Props.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.Props.ts index e55f80b4ab2f8..c2bd028ff60a7 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.Props.ts +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.Props.ts @@ -29,7 +29,7 @@ export interface ITextField { /** * TextField component props. */ -export interface ITextFieldProps extends React.HTMLProps { +export interface ITextFieldProps extends React.HTMLAttributes { /** * Optional callback to access the ITextField 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/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx index b7f419fb619c8..27e54c5afcea0 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -285,7 +285,7 @@ export class TextField extends BaseComponent i return errorMessage; } - private _renderTextArea(): React.ReactElement> { + private _renderTextArea(): React.ReactElement> { let textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']); return ( @@ -306,8 +306,8 @@ export class TextField extends BaseComponent i ); } - private _renderInput(): React.ReactElement> { - let inputProps = getNativeProps>(this.props, inputProperties, ['defaultValue']); + private _renderInput(): React.ReactElement> { + let inputProps = getNativeProps>(this.props, inputProperties, ['defaultValue']); return ( { +export interface IToggleProps extends React.HTMLAttributes { /** * Optional callback to access the IToggle 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/Tooltip/Tooltip.Props.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts index 4d0f7054036a4..97d95ce2f9390 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.Props.ts @@ -11,7 +11,7 @@ export interface ITooltip { /** * Tooltip component props. */ -export interface ITooltipProps extends React.HTMLProps { +export interface ITooltipProps extends React.HTMLAttributes { /** * Optional callback to access the ITooltip 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/Tooltip/TooltipHost.Props.ts b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts index d709b9f428c28..d82e435f430b3 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.Props.ts @@ -19,7 +19,7 @@ export enum TooltipOverflowMode { /** * Tooltip component props. */ -export interface ITooltipHostProps extends React.HTMLProps { +export interface ITooltipHostProps extends React.HTMLAttributes { /** * Optional callback to access the ITooltipHost 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/pickers/AutoFill/BaseAutoFill.Props.ts b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.Props.ts index 09f8613191931..ace79d62535cd 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.Props.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.Props.ts @@ -40,7 +40,7 @@ export interface IBaseAutoFill { clear(): void; } -export interface IBaseAutoFillProps extends React.HTMLProps { +export interface IBaseAutoFillProps extends React.HTMLAttributes { /** * The suggested autofill value that will display. */ diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts index f95ac98cebeb1..693088670e7ea 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.Props.ts @@ -52,7 +52,7 @@ export interface IBasePickerProps extends React.Props { * AutoFill input native props * @default undefined */ - inputProps?: React.HTMLProps; + inputProps?: React.HTMLAttributes; /** * A callback for when a persona is removed from the suggestion list */ diff --git a/packages/styling/src/examples/IconTile/IconTile.tsx b/packages/styling/src/examples/IconTile/IconTile.tsx index c1f67a3ee8a39..221dd8d4ef4f3 100644 --- a/packages/styling/src/examples/IconTile/IconTile.tsx +++ b/packages/styling/src/examples/IconTile/IconTile.tsx @@ -3,7 +3,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { IconClassNames } from '@uifabric/styling'; import { IIconTileStyles, getStyles } from './IconTile.styles'; -export interface IIconTileProps extends React.HTMLProps { +export interface IIconTileProps extends React.HTMLAttributes { iconName: string; } diff --git a/packages/utilities/src/properties.test.ts b/packages/utilities/src/properties.test.ts index 01a622cefee96..d3aa465be5b5b 100644 --- a/packages/utilities/src/properties.test.ts +++ b/packages/utilities/src/properties.test.ts @@ -8,21 +8,21 @@ let { expect } = chai; describe('getNativeProps', () => { it('can pass through data tags', () => { - let result = getNativeProps>({ + let result = getNativeProps>({ 'data-automation-id': 1 }, divProperties); expect(result['data-automation-id']).equals(1); }); it('can pass through aria tags', () => { - let result = getNativeProps>({ + let result = getNativeProps>({ 'aria-label': 1 }, divProperties); expect(result['aria-label']).equals(1); }); it('can pass through basic div properties and events', () => { - let result = getNativeProps>({ + let result = getNativeProps>({ className: 'foo', onClick: () => { /* no-op */ }, onClickCapture: () => { /* no-op */ } @@ -33,7 +33,7 @@ describe('getNativeProps', () => { }); it('can remove unexpected properties', () => { - let result = getNativeProps>({ + let result = getNativeProps>({ 'foobar': 1, className: 'hi' }, divProperties); From 6037a366560504104c88bef5df3653a4715a49ff Mon Sep 17 00:00:00 2001 From: "REDMOND\\miclo" Date: Fri, 9 Jun 2017 13:27:07 -0700 Subject: [PATCH 2/3] Add rush files --- ...tch-from-props-to-attributes_2017-06-09-20-27.json | 11 +++++++++++ ...tch-from-props-to-attributes_2017-06-09-20-27.json | 11 +++++++++++ ...tch-from-props-to-attributes_2017-06-09-20-27.json | 11 +++++++++++ ...tch-from-props-to-attributes_2017-06-09-20-27.json | 11 +++++++++++ ...tch-from-props-to-attributes_2017-06-09-20-27.json | 11 +++++++++++ 5 files changed, 55 insertions(+) create mode 100644 common/changes/@uifabric/example-app-base/types-switch-from-props-to-attributes_2017-06-09-20-27.json create mode 100644 common/changes/@uifabric/fabric-website/types-switch-from-props-to-attributes_2017-06-09-20-27.json create mode 100644 common/changes/@uifabric/styling/types-switch-from-props-to-attributes_2017-06-09-20-27.json create mode 100644 common/changes/@uifabric/utilities/types-switch-from-props-to-attributes_2017-06-09-20-27.json create mode 100644 common/changes/office-ui-fabric-react/types-switch-from-props-to-attributes_2017-06-09-20-27.json diff --git a/common/changes/@uifabric/example-app-base/types-switch-from-props-to-attributes_2017-06-09-20-27.json b/common/changes/@uifabric/example-app-base/types-switch-from-props-to-attributes_2017-06-09-20-27.json new file mode 100644 index 0000000000000..6e9ba724f56cc --- /dev/null +++ b/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": "miclo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/types-switch-from-props-to-attributes_2017-06-09-20-27.json b/common/changes/@uifabric/fabric-website/types-switch-from-props-to-attributes_2017-06-09-20-27.json new file mode 100644 index 0000000000000..477fdb89846cb --- /dev/null +++ b/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": "miclo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/types-switch-from-props-to-attributes_2017-06-09-20-27.json b/common/changes/@uifabric/styling/types-switch-from-props-to-attributes_2017-06-09-20-27.json new file mode 100644 index 0000000000000..1e116b37d633c --- /dev/null +++ b/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": "miclo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/types-switch-from-props-to-attributes_2017-06-09-20-27.json b/common/changes/@uifabric/utilities/types-switch-from-props-to-attributes_2017-06-09-20-27.json new file mode 100644 index 0000000000000..eccc273e30dae --- /dev/null +++ b/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": "miclo@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/types-switch-from-props-to-attributes_2017-06-09-20-27.json b/common/changes/office-ui-fabric-react/types-switch-from-props-to-attributes_2017-06-09-20-27.json new file mode 100644 index 0000000000000..2fef18e362d6a --- /dev/null +++ b/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": "miclo@microsoft.com" +} \ No newline at end of file From 9d05e63e32cf4ca4b91e273cbe3b11ef15ac15b8 Mon Sep 17 00:00:00 2001 From: "REDMOND\\miclo" Date: Fri, 9 Jun 2017 13:42:40 -0700 Subject: [PATCH 3/3] Fix build --- .../pickers/PeoplePicker/examples/PeoplePickerExampleData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts index 53a9478cd7404..871751efc82b3 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts @@ -1,7 +1,7 @@ import { IPersonaProps, PersonaPresence } from 'office-ui-fabric-react/lib/Persona'; import { TestImages } from '../../../../common/TestImages'; -export const people: IPersonaProps[] = [ +export const people: (IPersonaProps & { key: string | number })[] = [ { key: 0,