From 70d9afb0fce8864731a9e525f93efb1697900a13 Mon Sep 17 00:00:00 2001
From: Mark Polak <mark@thedutchies.com>
Date: Sun, 18 Feb 2018 16:40:14 +0100
Subject: [PATCH 1/3] Re-enable jsx-key

---
 .../examples/ContextualMenu.Customization.Example.tsx     | 2 +-
 .../src/components/OverflowSet/OverflowSet.tsx            | 8 +++-----
 .../PeoplePicker/examples/PeoplePicker.Types.Example.tsx  | 4 ++--
 packages/office-ui-fabric-react/tslint.json               | 1 -
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
index 39bcefdc86f68..cdf6e3742ce65 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
@@ -204,7 +204,7 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}>
       <ul className='ms-ContextualMenu-customizationExample-categoriesList'>
         <li className='ms-ContextualMenu-item'>
           { item.categoryList.map((category: any) =>
-            <button className='ms-ContextualMenu-link' role='menuitem'>
+            <button className='ms-ContextualMenu-link' role='menuitem' key={category.name}>
               <div>
                 <span
                   className='ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch'
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
index e151126bddb1a..657f8613d0538 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -55,11 +55,9 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
   private _onRenderItems(items: any[]): JSX.Element[] {
     return items.map((item, i) => {
       let wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-item', styles.item) };
-      if (item.key) {
-        wrapperDivProps.key = item.key;
-      }
+
       return (
-        <div {...wrapperDivProps}>
+        <div key={ item.key } { ...wrapperDivProps }>
           { this.props.onRenderItem(item) }
         </div>
       );
@@ -70,7 +68,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
   private _onRenderOverflowButtonWrapper(items: any[]): JSX.Element {
     let wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-overflowButton', styles.item) };
     return (
-      <div {...wrapperDivProps}>
+      <div { ...wrapperDivProps }>
         { this.props.onRenderOverflowButton(items) }
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
index d2fe5f67ef39e..d2b20d0a54d3d 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
@@ -289,7 +289,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           componentRef={ this._resolveRef('_picker') }
         />
         <label> Click to Add a person </label>
-        { controlledItems.map(item => <div>
+        { controlledItems.map((item, index) => <div key={ index }>
           <DefaultButton
             className='controlledPickerButton'
             // tslint:disable-next-line:jsx-no-lambda
@@ -299,7 +299,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
               });
             } }
           >
-            <Persona { ...item} />
+            <Persona { ...item } />
           </DefaultButton>
         </div>) }
       </div>
diff --git a/packages/office-ui-fabric-react/tslint.json b/packages/office-ui-fabric-react/tslint.json
index cbaba79e30a85..eda7ee8d21243 100644
--- a/packages/office-ui-fabric-react/tslint.json
+++ b/packages/office-ui-fabric-react/tslint.json
@@ -4,7 +4,6 @@
   ],
   "rules": {
     "jsx-no-string-ref": false,
-    "jsx-key": false,
     "jsx-boolean-value": false,
     "jsx-ban-props": false,
     "max-line-length": [

From 97d34c370f0e9dd9695fc74c16bd52439e2572a0 Mon Sep 17 00:00:00 2001
From: Mark Polak <mark@thedutchies.com>
Date: Sun, 18 Feb 2018 16:43:42 +0100
Subject: [PATCH 2/3] Use correct typings

---
 .../src/components/OverflowSet/OverflowSet.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
index 657f8613d0538..c338896852799 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -5,7 +5,7 @@ import {
   BaseComponent
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
-import { IOverflowSet, IOverflowSetProps } from './OverflowSet.types';
+import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 
 import * as stylesImport from './OverflowSet.scss';
@@ -52,7 +52,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
   }
 
   @autobind
-  private _onRenderItems(items: any[]): JSX.Element[] {
+  private _onRenderItems(items: IOverflowSetItemProps[]): JSX.Element[] {
     return items.map((item, i) => {
       let wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-item', styles.item) };
 

From 3acfd70816dcf9d687259cf778899c835dbcc02c Mon Sep 17 00:00:00 2001
From: Mark Polak <mark@thedutchies.com>
Date: Sun, 18 Feb 2018 16:44:43 +0100
Subject: [PATCH 3/3] Add npm change file

---
 .../enable-jsx-key_2018-02-18-15-44.json              | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/enable-jsx-key_2018-02-18-15-44.json

diff --git a/common/changes/office-ui-fabric-react/enable-jsx-key_2018-02-18-15-44.json b/common/changes/office-ui-fabric-react/enable-jsx-key_2018-02-18-15-44.json
new file mode 100644
index 0000000000000..fa18d8566bd88
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/enable-jsx-key_2018-02-18-15-44.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Enable jsx-key tslint rule",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "mark@thedutchies.com"
+}
\ No newline at end of file