From a113dcdfdbefd3122e25aae4dbf15467d292fe41 Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:19:46 +0200 Subject: [PATCH 01/86] Added className to Calendar root (see #4514) --- .../src/components/Calendar/Calendar.test.tsx | 12 ++++++++++++ .../src/components/Calendar/Calendar.tsx | 4 ++-- .../src/components/Calendar/Calendar.types.ts | 3 +++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 6616d450c70a45..4c3130777a2d3d 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -173,6 +173,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } + className="CalendarTestClass" />) as Calendar; }); @@ -246,6 +247,17 @@ describe('Calendar', () => { expect(lastSelectedDateRange!.length).toEqual(7); lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(firstDate, i))).toEqual(true)); }); + + it('Verify class name', () => { + const calendarRoot = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'CalendarTestClass'); + expect(calendarRoot).toBeDefined(); + expect(calendarRoot.length).toEqual(1); + const root = calendarRoot[0]; + expect(root.classList).toBeDefined(); + expect(root.classList.length).toEqual(2); + expect(root.classList[0]).toEqual("ms-DatePicker"); + expect(root.classList[1]).toEqual("CalendarTestClass"); + }); }); describe('render with date boundaries', () => { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 6d999bf54e92f6..a95b017a0788e7 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -123,14 +123,14 @@ export class Calendar extends BaseComponent impl public render() { const rootClass = 'ms-DatePicker'; - const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate, className } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday; return ( -
+
{ */ componentRef?: (component: ICalendar | null) => void; + /** Optional class name to add to the root element. */ + className?: string; + /** * Callback issued when a date is selected * @param date - The date the user selected From 7df10cdcbfbb74f5e615b8ba9ed3c96dcbc9e4ac Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 09:22:50 +0200 Subject: [PATCH 02/86] Added Change Request File --- .../ClassName_2018-04-16-07-21.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json diff --git a/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json new file mode 100644 index 00000000000000..c3c4a5f41b02d7 --- /dev/null +++ b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added optional className property to Calendar", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "aur@gmx.de" +} \ No newline at end of file From 526f93d5f838cf262fa43e739a5710776ce4e6f4 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Mon, 16 Apr 2018 10:23:26 +0000 Subject: [PATCH 03/86] Applying package updates. --- apps/fabric-website/CHANGELOG.json | 19 +++ apps/fabric-website/CHANGELOG.md | 9 +- apps/fabric-website/package.json | 4 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- .../edit-docs-buttons_2018-03-31-00-27.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- .../experiments/M365Nav_2018-03-29-21-53.json | 11 -- .../amyngu-preferConst_2018-04-10-23-09.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- .../v-vibr-EnumFix_2018-04-13-01-58.json | 11 -- ...-Experiments-imports_2018-04-13-23-51.json | 11 -- ...vibr-Shimmer-example_2018-04-14-01-44.json | 11 -- ...r-shimmer-importsFix_2018-04-13-01-05.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- .../utilities/misc-fixs_2018-04-01-07-38.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../utilities/ts-2-8_2018-03-30-06-33.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../breadcrumbFocus_2018-04-12-22-52.json | 11 -- ...nuSplitButtonStyling_2018-04-12-20-45.json | 11 -- ...na-popupScrollBarFix_2018-04-12-05-44.json | 11 -- .../details-header_2018-04-07-01-42.json | 11 -- ...opdown-role-fix-4386_2018-04-10-21-58.json | 11 -- .../edit-docs-buttons_2018-03-31-00-27.json | 11 -- ...e_suggestions_footer_2018-04-13-18-56.json | 11 -- ...-contextualmenu-perf_2018-04-11-23-07.json | 11 -- ...KeysInsideSpinButton_2018-04-12-14-31.json | 11 -- ...ox-handle-weird-text_2018-04-13-00-10.json | 11 -- ...ndering-optomization_2018-04-12-00-59.json | 11 -- .../layer-host_2018-04-11-15-15.json | 11 -- .../master_2018-04-04-05-56.json | 11 -- .../misc-fixs_2018-04-01-07-38.json | 11 -- ...el-grammarlyfix-4305_2018-04-06-19-47.json | 11 -- .../pivotFocus_2018-04-12-22-55.json | 11 -- ...edo-focuszone-change_2018-04-15-19-20.json | 11 -- ...emove-module-entries_2018-04-15-20-25.json | 11 -- .../selection-link_2018-04-13-14-47.json | 11 -- ...picker-itemrole-3385_2018-04-12-18-36.json | 11 -- .../ts-2-8_2018-03-30-06-33.json | 11 -- ...ndo-focuszone-change_2018-04-15-18-09.json | 11 -- .../update-react_2018-04-16-00-49.json | 11 -- ...n-ariaRowIndexBugfix_2018-04-11-10-40.json | 11 -- ...kerWhenAlphaIsHidden_2018-04-12-14-47.json | 11 -- packages/example-app-base/CHANGELOG.json | 34 ++++ packages/example-app-base/CHANGELOG.md | 14 +- packages/example-app-base/package.json | 6 +- packages/experiments/CHANGELOG.json | 63 ++++++++ packages/experiments/CHANGELOG.md | 16 +- packages/experiments/package.json | 10 +- packages/file-type-icons/CHANGELOG.json | 24 +++ packages/file-type-icons/CHANGELOG.md | 10 +- packages/file-type-icons/package.json | 4 +- packages/icons/CHANGELOG.json | 19 +++ packages/icons/CHANGELOG.md | 9 +- packages/icons/package.json | 4 +- .../jest-serializer-merge-styles/package.json | 2 +- packages/merge-styles/CHANGELOG.json | 14 ++ packages/merge-styles/CHANGELOG.md | 9 +- packages/merge-styles/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 153 ++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 36 ++++- packages/office-ui-fabric-react/package.json | 12 +- packages/styling/CHANGELOG.json | 27 ++++ packages/styling/CHANGELOG.md | 10 +- packages/styling/package.json | 6 +- packages/utilities/CHANGELOG.json | 36 +++++ packages/utilities/CHANGELOG.md | 15 +- packages/utilities/package.json | 4 +- packages/variants/CHANGELOG.json | 19 +++ packages/variants/CHANGELOG.md | 9 +- packages/variants/package.json | 4 +- scripts/package.json | 4 +- 84 files changed, 570 insertions(+), 573 deletions(-) delete mode 100644 common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json delete mode 100644 common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json delete mode 100644 common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json delete mode 100644 common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json delete mode 100644 common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json delete mode 100644 common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json delete mode 100644 common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json delete mode 100644 common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json delete mode 100644 common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json delete mode 100644 common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json delete mode 100644 common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json delete mode 100644 common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json delete mode 100644 common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json delete mode 100644 common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json delete mode 100644 common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json delete mode 100644 common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json delete mode 100644 common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json delete mode 100644 common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json delete mode 100644 common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json delete mode 100644 common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json delete mode 100644 common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json delete mode 100644 common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json delete mode 100644 common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json delete mode 100644 common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json delete mode 100644 common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json delete mode 100644 common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json delete mode 100644 common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json delete mode 100644 common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json delete mode 100644 common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json delete mode 100644 common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json delete mode 100644 common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json delete mode 100644 common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json delete mode 100644 common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json delete mode 100644 common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json index ec6015e7ba8ae1..4c40bf1184759b 100644 --- a/apps/fabric-website/CHANGELOG.json +++ b/apps/fabric-website/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/fabric-website", "entries": [ + { + "version": "5.6.1", + "tag": "@uifabric/fabric-website_v5.6.1", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.81.1 <6.0.0` to `>=5.82.0 <6.0.0`" + } + ] + } + }, { "version": "5.6.0", "tag": "@uifabric/fabric-website_v5.6.0", diff --git a/apps/fabric-website/CHANGELOG.md b/apps/fabric-website/CHANGELOG.md index d9d87e339be9db..a7b05c947402ba 100644 --- a/apps/fabric-website/CHANGELOG.md +++ b/apps/fabric-website/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/fabric-website -This log was last generated on Thu, 05 Apr 2018 10:15:39 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.6.1 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Updating build to React 16.3.1. ## 5.6.0 Thu, 05 Apr 2018 10:15:39 GMT diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 98198f63c3a67d..4b3802b97de513 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/fabric-website", - "version": "5.6.0", + "version": "5.6.1", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.81.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 14da544821c6d1..548b77ea382baa 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.81.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 3366d6813c4ddd..cd41e4da6137a6 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.81.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index c6de7b07c05263..2a20d007c345ce 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.81.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index aa79a27ddfbe8e..1a276c48b40909 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.81.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json deleted file mode 100644 index df66dfe34204b1..00000000000000 --- a/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/example-app-base", - "comment": "Add new APIs for editing sections on GitHub.", - "type": "minor" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index 6385145549e737..00000000000000 --- a/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/example-app-base", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json deleted file mode 100644 index 354e192e1b1cdd..00000000000000 --- a/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/example-app-base", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json b/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json deleted file mode 100644 index 4fc42b890fe667..00000000000000 --- a/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "M365Nav component as an experiment", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "sikrishn@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json b/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json deleted file mode 100644 index d67c6f9a773511..00000000000000 --- a/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "amyngu@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index b2b545b919dd76..00000000000000 --- a/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json deleted file mode 100644 index ef31fc935af03c..00000000000000 --- a/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json b/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json deleted file mode 100644 index 9ff1f486081567..00000000000000 --- a/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Shimmer: Changes casing on enums in Shimmer.types", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "v-vibr@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json b/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json deleted file mode 100644 index c26a701cdba6ab..00000000000000 --- a/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Experiments: fixing imports for example pages for better user understanding.", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "v-vibr@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json b/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json deleted file mode 100644 index 8231e782bad39a..00000000000000 --- a/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Shimmer: adding two more examples as per designers request.", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "v-vibr@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json b/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json deleted file mode 100644 index e4eec79859a9f0..00000000000000 --- a/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Shimmer: imports audited", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "v-vibr@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json deleted file mode 100644 index 07f4b1ea334470..00000000000000 --- a/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/fabric-website", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/fabric-website", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index d2aa44a583db11..00000000000000 --- a/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/file-type-icons", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/file-type-icons", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json deleted file mode 100644 index f2a33bcc6a0384..00000000000000 --- a/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/file-type-icons", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/file-type-icons", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index a8418444ddc29c..00000000000000 --- a/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/icons", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/icons", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index a837bbb41be96b..00000000000000 --- a/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/merge-styles", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/merge-styles", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index 294fc484291532..00000000000000 --- a/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/styling", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/styling", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json deleted file mode 100644 index 666b6b4d236703..00000000000000 --- a/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/styling", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/styling", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json b/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json deleted file mode 100644 index a7c2fe449ef133..00000000000000 --- a/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Adding some helpers which ensure that `ms-Fabric.is-focusVisible` class name is added to the document body when focus rectangles should be fixible. Also ensuring that the `documentElement` has a `dir` attribute.", - "type": "minor" - } - ], - "packageName": "@uifabric/utilities", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index 90c6fe87c370a7..00000000000000 --- a/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/utilities", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json b/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json deleted file mode 100644 index 82d9ea20e0742a..00000000000000 --- a/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Upgrade to TypeScript 2.8.1", - "type": "minor" - } - ], - "packageName": "@uifabric/utilities", - "email": "christianjordangonzalez@gmail.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json deleted file mode 100644 index c8e3c5efb59a7e..00000000000000 --- a/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "@uifabric/utilities", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index 28c5496e55ddb6..00000000000000 --- a/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/variants", - "comment": "Removing module entry temporarily. (Will be added back in 6.0.)", - "type": "patch" - } - ], - "packageName": "@uifabric/variants", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json b/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json deleted file mode 100644 index d13446f5d7708b..00000000000000 --- a/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Add focus method to Breadcrumb", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-hudole@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json b/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json deleted file mode 100644 index 1ee10bfcd06d59..00000000000000 --- a/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Contextual Split Button: Change styling to only have one split button container instead of two", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "chiechan@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json b/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json deleted file mode 100644 index 796dbfa4cb471f..00000000000000 --- a/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix scroll bar shows when it should not.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "ddlbrena@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json b/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json deleted file mode 100644 index 711ddf9131d25d..00000000000000 --- a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix style and alignment issues with DetailsList headers", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json b/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json deleted file mode 100644 index c9eb3c2d78e28b..00000000000000 --- a/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Changed Dropdown components role from combobox to dropdown", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-brgarl@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json deleted file mode 100644 index 4f81ceaabfd170..00000000000000 --- a/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Add new component page prop for editing on GitHub.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json b/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json deleted file mode 100644 index 3be40d9e521cb1..00000000000000 --- a/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Bring back isResultsFooterVisible that is props but never used.", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "joezha@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json b/common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json deleted file mode 100644 index 41c50e59c4b210..00000000000000 --- a/common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ContextualMenu/Button: Improve perf and add hiddenvariable to buttons", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "joschect@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json b/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json deleted file mode 100644 index 0843c29e1b9a60..00000000000000 --- a/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "SpinButton: Make sure up/down Arrow do not leave the spinButton", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "jspurlin@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json b/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json deleted file mode 100644 index 6ef7bdc0515621..00000000000000 --- a/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Handling the scenario where embedded text is passed in as the option's text. In This case, the ariaLabel prop will be displayed in the input and used for autocomplete matching. The value rendered in the menu will not change.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "kysedate@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json b/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json deleted file mode 100644 index 964aedd7e6c239..00000000000000 --- a/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Wrapping combobox options in an internal component which only performs an update if the props have changed. We are currently updating every option on every mouse or keyboard event. This gives awful performance in comboboxes with many elements. ", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "kysedate@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json b/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json deleted file mode 100644 index 685591bbf61b71..00000000000000 --- a/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Add ability to use Customer to provide a default layer host", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json b/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json deleted file mode 100644 index 43328552a57560..00000000000000 --- a/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Adds tests for DocumentCardTitle title truncation", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json b/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json deleted file mode 100644 index 898cd84eb1991c..00000000000000 --- a/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fabric component: all logic that was in the component has moved to a helper which is initialized within BaseComponent. This ensures that focus rectangles show up even if you don't use the Fabric wrapper.", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json b/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json deleted file mode 100644 index c3eb1bccc378ab..00000000000000 --- a/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-brgarl@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json b/common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json deleted file mode 100644 index 1e900f6f3b5b06..00000000000000 --- a/common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Add focus method to Pivot.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-hudole@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json b/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json deleted file mode 100644 index cf6dfeb297c7d0..00000000000000 --- a/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "FocusZone: redoing the \"reset alignment on mouse down\" change in a less intrusive manner, with test coverage.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json b/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json deleted file mode 100644 index b145c901792938..00000000000000 --- a/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Removing module entry until we change `lib` to output es6 modules in 6.0. If you would like tree shaking to work, please use webpack aliasing to alias `{packageName}/lib` to `{packageName}/lib-es2015`. In 6.0, we will change `lib` to be es6, so that current partners will just get tree shaking out of the box without aliasing.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json b/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json deleted file mode 100644 index 6207afae72398e..00000000000000 --- a/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Prevent SelectionZone from interfering with links and buttons", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json b/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json deleted file mode 100644 index fe4ba75157d19b..00000000000000 --- a/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Added missing role to TagPicker's TagItem.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-brgarl@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json b/common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json deleted file mode 100644 index 835cd2aa8d58a9..00000000000000 --- a/common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Upgrade to TypeScript 2.8.1", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "christianjordangonzalez@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json b/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json deleted file mode 100644 index 977b7a95f4352f..00000000000000 --- a/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "FocusZone: undoing the \"click\" change, which was causing non-focusable targets to be tracked as the \"active\" element. This created side-effects such as elements becoming focusable upon clicking them more than once, leaving behind unexpected focus outlines.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json b/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json deleted file mode 100644 index c9f7173a66dfe0..00000000000000 --- a/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Updating build to React 16.3.1.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json b/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json deleted file mode 100644 index 60c6c3d01c3990..00000000000000 --- a/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "preetsaimutneja@gmail.com" -} diff --git a/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json b/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json deleted file mode 100644 index f91d3314e6eaf7..00000000000000 --- a/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ColorPicker: text fields now update when `alphaSliderHidden` is `true`.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "wuthao@microsoft.com" -} diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json index d4aa248d3b5fa9..f77fcb056da710 100644 --- a/packages/example-app-base/CHANGELOG.json +++ b/packages/example-app-base/CHANGELOG.json @@ -1,6 +1,40 @@ { "name": "@uifabric/example-app-base", "entries": [ + { + "version": "5.10.0", + "tag": "@uifabric/example-app-base_v5.10.0", + "date": "Mon, 16 Apr 2018 10:23:25 GMT", + "comments": { + "minor": [ + { + "author": "Jordan Janzen ", + "commit": "ebbb57390d6fbaba5106ea5d0ca18aa022348f4b", + "comment": "Add new APIs for editing sections on GitHub." + } + ], + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`" + } + ] + } + }, { "version": "5.9.0", "tag": "@uifabric/example-app-base_v5.9.0", diff --git a/packages/example-app-base/CHANGELOG.md b/packages/example-app-base/CHANGELOG.md index 5207c37bdc3bd6..db246a4a736782 100644 --- a/packages/example-app-base/CHANGELOG.md +++ b/packages/example-app-base/CHANGELOG.md @@ -1,6 +1,18 @@ # Change Log - @uifabric/example-app-base -This log was last generated on Thu, 12 Apr 2018 10:15:54 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:25 GMT and should not be manually modified. + +## 5.10.0 +Mon, 16 Apr 2018 10:23:25 GMT + +### Minor changes + +- Add new APIs for editing sections on GitHub. + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) +- Updating build to React 16.3.1. ## 5.9.0 Thu, 12 Apr 2018 10:15:54 GMT diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index 5222e8cf041e5b..8e3699a9a68156 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/example-app-base", - "version": "5.9.0", + "version": "5.10.0", "description": "Office UI Fabric example app base utilities for building example sites.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -33,8 +33,8 @@ "react-dom": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0" }, "dependencies": { - "@uifabric/styling": ">=5.23.0 <6.0.0", - "@uifabric/utilities": ">=5.23.0 <6.0.0", + "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/utilities": ">=5.24.0 <6.0.0", "highlight.js": "^9.12.0", "markdown-to-jsx": "^6.6.0", "office-ui-fabric-react": ">=5.1.0 <6.0.0", diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 41ea85b74ebaf8..01b85b0af744f9 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,69 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.31.1", + "tag": "@uifabric/experiments_v5.31.1", + "date": "Mon, 16 Apr 2018 10:23:25 GMT", + "comments": { + "patch": [ + { + "author": "amyngu <31973030+amyngu@users.noreply.github.com>", + "commit": "7a5e2c39132dad0e66277ea7ae098bc90727e131", + "comment": "prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists" + }, + { + "author": "Sivaraman Krishnan <12967315+sikrishn@users.noreply.github.com>", + "commit": "d6f161bad359e580606f95dfec1ce7095a7bbe48", + "comment": "M365Nav component as an experiment" + }, + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + }, + { + "author": "Vitalie Braga ", + "commit": "a1d92a6b96a7bfe0c93814dd7a539ce7cc52e0c9", + "comment": "Shimmer: Changes casing on enums in Shimmer.types" + }, + { + "author": "Vitalie Braga ", + "commit": "c38b371b09a813f345a90739689e391d221a6262", + "comment": "Experiments: fixing imports for example pages for better user understanding." + }, + { + "author": "Vitalie Braga ", + "commit": "7c9c5c62c5430ae386672012dd1f5ee46d0852bd", + "comment": "Shimmer: adding two more examples as per designers request." + }, + { + "author": "Vitalie Braga ", + "commit": "5a67c36391186ce30d25130b69a358525e1f0823", + "comment": "Shimmer: imports audited" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.81.1 <6.0.0` to `>=5.82.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/icons\" from `>=5.7.0 <6.0.0` to `>=5.7.1 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/file-type-icons\" from `>=0.6.0 <1.0.0` to `>=0.6.1 <1.0.0`" + } + ] + } + }, { "version": "5.31.0", "tag": "@uifabric/experiments_v5.31.0", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index 851a24ceb9d5eb..5e15b9fa60d94f 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,20 @@ # Change Log - @uifabric/experiments -This log was last generated on Thu, 12 Apr 2018 10:15:54 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:25 GMT and should not be manually modified. + +## 5.31.1 +Mon, 16 Apr 2018 10:23:25 GMT + +### Patches + +- prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists +- M365Nav component as an experiment +- Removing module entry temporarily. (Will be added back in 6.0.) +- Updating build to React 16.3.1. +- Shimmer: Changes casing on enums in Shimmer.types +- Experiments: fixing imports for example pages for better user understanding. +- Shimmer: adding two more examples as per designers request. +- Shimmer: imports audited ## 5.31.0 Thu, 12 Apr 2018 10:15:54 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 77aab3ce1ecd51..f1880e7ac178b4 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.31.0", + "version": "5.31.1", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,8 +30,8 @@ "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", "@types/webpack-env": "1.13.0", - "@uifabric/example-app-base": ">=5.9.0 <6.0.0", - "@uifabric/file-type-icons": ">=0.6.0 <1.0.0", + "@uifabric/example-app-base": ">=5.10.0 <6.0.0", + "@uifabric/file-type-icons": ">=0.6.1 <1.0.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", "es6-weak-map": "^2.0.2", "enzyme": "^3.2.0", @@ -45,8 +45,8 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.81.1 <6.0.0", - "@uifabric/icons": ">=5.7.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/file-type-icons/CHANGELOG.json b/packages/file-type-icons/CHANGELOG.json index e1b8ecf4206083..57283ad4c2423c 100644 --- a/packages/file-type-icons/CHANGELOG.json +++ b/packages/file-type-icons/CHANGELOG.json @@ -1,6 +1,30 @@ { "name": "@uifabric/file-type-icons", "entries": [ + { + "version": "0.6.1", + "tag": "@uifabric/file-type-icons_v0.6.1", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`" + } + ] + } + }, { "version": "0.6.0", "tag": "@uifabric/file-type-icons_v0.6.0", diff --git a/packages/file-type-icons/CHANGELOG.md b/packages/file-type-icons/CHANGELOG.md index 1b3c25d8e0b5dc..20fd399cc6fa94 100644 --- a/packages/file-type-icons/CHANGELOG.md +++ b/packages/file-type-icons/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log - @uifabric/file-type-icons -This log was last generated on Sun, 25 Mar 2018 03:08:03 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 0.6.1 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) +- Updating build to React 16.3.1. ## 0.6.0 Sun, 25 Mar 2018 03:08:03 GMT diff --git a/packages/file-type-icons/package.json b/packages/file-type-icons/package.json index 67be8678fc5379..f083c3dc3dfe66 100644 --- a/packages/file-type-icons/package.json +++ b/packages/file-type-icons/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/file-type-icons", - "version": "0.6.0", + "version": "0.6.1", "description": "Office UI Fabric file type icon set.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -27,7 +27,7 @@ "react-dom": "^16.3.1" }, "dependencies": { - "@uifabric/styling": ">=5.23.0 <6.0.0", + "@uifabric/styling": ">=5.23.1 <6.0.0", "tslib": "^1.7.1" }, "peerDependencies": { diff --git a/packages/icons/CHANGELOG.json b/packages/icons/CHANGELOG.json index 59545bead55198..6c202a8fc75c02 100644 --- a/packages/icons/CHANGELOG.json +++ b/packages/icons/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/icons", "entries": [ + { + "version": "5.7.1", + "tag": "@uifabric/icons_v5.7.1", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`" + } + ] + } + }, { "version": "5.7.0", "tag": "@uifabric/icons_v5.7.0", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 641bd0a6687ec0..2dbe4fc4159b83 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/icons -This log was last generated on Sun, 25 Mar 2018 03:08:03 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.7.1 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) ## 5.7.0 Sun, 25 Mar 2018 03:08:03 GMT diff --git a/packages/icons/package.json b/packages/icons/package.json index 619936e5818bb3..459406d1d88d01 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/icons", - "version": "5.7.0", + "version": "5.7.1", "description": "Office UI Fabric icon set.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -23,7 +23,7 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/styling": ">=5.23.0 <6.0.0", + "@uifabric/styling": ">=5.23.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json index 3b974a9b93175c..ed705070aade72 100644 --- a/packages/jest-serializer-merge-styles/package.json +++ b/packages/jest-serializer-merge-styles/package.json @@ -24,6 +24,6 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/merge-styles": ">=5.15.0 <6.0.0" + "@uifabric/merge-styles": ">=5.15.1 <6.0.0" } } \ No newline at end of file diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json index f2ec5f548aaa56..065b99ae924d90 100644 --- a/packages/merge-styles/CHANGELOG.json +++ b/packages/merge-styles/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/merge-styles", "entries": [ + { + "version": "5.15.1", + "tag": "@uifabric/merge-styles_v5.15.1", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + } + ] + } + }, { "version": "5.15.0", "tag": "@uifabric/merge-styles_v5.15.0", diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md index 4a4c5761757cf9..ac67b739de0a89 100644 --- a/packages/merge-styles/CHANGELOG.md +++ b/packages/merge-styles/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/merge-styles -This log was last generated on Tue, 10 Apr 2018 17:37:28 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.15.1 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) ## 5.15.0 Tue, 10 Apr 2018 17:37:28 GMT diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json index 463c24c13f34ed..ce4fe2b5985675 100644 --- a/packages/merge-styles/package.json +++ b/packages/merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/merge-styles", - "version": "5.15.0", + "version": "5.15.1", "description": "Office UI Fabric style loading utilities.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 90298946491365..4b31da17426e66 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,159 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.82.0", + "tag": "office-ui-fabric-react_v5.82.0", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "Hugo Dolemieux ", + "commit": "706932515cd11f2f65da2a22210b6990de1681be", + "comment": "Add focus method to Breadcrumb" + }, + { + "author": "David De La Brena <36862912+ddlbrena@users.noreply.github.com>", + "commit": "944bee5f8e150ef80793f44dc485e33ba1259645", + "comment": "Fix scroll bar shows when it should not." + }, + { + "author": "Thomas Michon ", + "commit": "be86d92568d91ccc75731322d148213475214971", + "comment": "Fix style and alignment issues with DetailsList headers" + }, + { + "author": "Jordan Janzen ", + "commit": "ebbb57390d6fbaba5106ea5d0ca18aa022348f4b", + "comment": "Add new component page prop for editing on GitHub." + }, + { + "author": "jspurlin ", + "commit": "3ab70bd14836c4298784d8733e474073ef37a870", + "comment": "SpinButton: Make sure up/down Arrow do not leave the spinButton" + }, + { + "author": "kysedate <35615581+kysedate@users.noreply.github.com>", + "commit": "8ef07e5a6fe206a89cbd3291bcecc3c721510e06", + "comment": "Handling the scenario where embedded text is passed in as the option's text. In This case, the ariaLabel prop will be displayed in the input and used for autocomplete matching. The value rendered in the menu will not change." + }, + { + "author": "kysedate <35615581+kysedate@users.noreply.github.com>", + "commit": "589eb521fa6ec57b6c9b61744b2e81d6f17e7be2", + "comment": "Wrapping combobox options in an internal component which only performs an update if the props have changed. We are currently updating every option on every mouse or keyboard event. This gives awful performance in comboboxes with many elements. " + }, + { + "author": "Mark Polak ", + "commit": "3628c32bef64366f39f051d95ca6d352dc4b7286", + "comment": "Adds tests for DocumentCardTitle title truncation" + }, + { + "author": "Hugo Dolemieux ", + "commit": "e924e27c0442d63556bf53582f6b44eb7364e96f", + "comment": "Add focus method to Pivot." + }, + { + "author": "David Zearing ", + "commit": "1e2afca81ae952207f798d11c66cb935c847cdbb", + "comment": "FocusZone: redoing the \"reset alignment on mouse down\" change in a less intrusive manner, with test coverage." + }, + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry until we change `lib` to output es6 modules in 6.0. If you would like tree shaking to work, please use webpack aliasing to alias `{packageName}/lib` to `{packageName}/lib-es2015`. In 6.0, we will change `lib` to be es6, so that current partners will just get tree shaking out of the box without aliasing." + }, + { + "author": "Thomas Michon ", + "commit": "acc2c4b47318d1ac54be9e22c906c78af0eb3fa5", + "comment": "Prevent SelectionZone from interfering with links and buttons" + }, + { + "author": "Brian Garland ", + "commit": "547c418585c4b78e6047a61eb78955aaba1cdf91", + "comment": "Added missing role to TagPicker's TagItem." + }, + { + "author": "David Zearing ", + "commit": "c3d5683deb1309f464e04218a952439e8eb207d8", + "comment": "FocusZone: undoing the \"click\" change, which was causing non-focusable targets to be tracked as the \"active\" element. This created side-effects such as elements becoming focusable upon clicking them more than once, leaving behind unexpected focus outlines." + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + }, + { + "author": "Preet Sai Mutneja ", + "commit": "0803ee2b1dd00b67b7ec61f902f0ebb609c92faf", + "comment": "DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex" + }, + { + "author": "wutonghao <38301383+wutonghao@users.noreply.github.com>", + "commit": "6d4cfa6bd31dbc0b39b78511a5a1505982b0a21f", + "comment": "ColorPicker: text fields now update when `alphaSliderHidden` is `true`." + } + ], + "minor": [ + { + "author": "Josh Chang ", + "commit": "51e5f2304e859b56007e931a856e046f49b59a6c", + "comment": "Contextual Split Button: Change styling to only have one split button container instead of two" + }, + { + "author": "Brian Garland ", + "commit": "0e2e8bd053fc2d77341ea03c4d76a25ab9d7c768", + "comment": "Changed Dropdown components role from combobox to dropdown" + }, + { + "author": "Joe Zhang ", + "commit": "836bffff34d84ae46aab18edde50ca9d4a9e17c6", + "comment": "Bring back isResultsFooterVisible that is props but never used." + }, + { + "author": "Jon Schectman ", + "commit": "4ea06e597851f76cdf3482dcb4046fc664b2e492", + "comment": "ContextualMenu/Button: Improve perf and add hiddenvariable to buttons" + }, + { + "author": "Thomas Michon ", + "commit": "40b585d6ba42d45a2302c9161612461d8ab2fca9", + "comment": "Add ability to use Customer to provide a default layer host" + }, + { + "author": "David Zearing ", + "commit": "0c830b2d32319e5455c2c652765b9d4d6cda8268", + "comment": "Fabric component: all logic that was in the component has moved to a helper which is initialized within BaseComponent. This ensures that focus rectangles show up even if you don't use the Fabric wrapper." + }, + { + "author": "Brian Garland ", + "commit": "0e488caa96a9ca0d8b48567aa2b87cc04c415e76", + "comment": "Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open" + }, + { + "author": "Christian Gonzalez ", + "commit": "a79de6bee8a344b392da6308988ce075c0206382", + "comment": "Upgrade to TypeScript 2.8.1" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/icons\" from `>=5.7.0 <6.0.0` to `>=5.7.1 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`" + } + ] + } + }, { "version": "5.81.1", "tag": "office-ui-fabric-react_v5.81.1", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 4e2ec9e59ac13e..b4dd9b36a52496 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,40 @@ # Change Log - office-ui-fabric-react -This log was last generated on Thu, 12 Apr 2018 15:59:01 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.82.0 +Mon, 16 Apr 2018 10:23:26 GMT + +### Minor changes + +- Contextual Split Button: Change styling to only have one split button container instead of two +- Changed Dropdown components role from combobox to dropdown +- Bring back isResultsFooterVisible that is props but never used. +- ContextualMenu/Button: Improve perf and add hiddenvariable to buttons +- Add ability to use Customer to provide a default layer host +- Fabric component: all logic that was in the component has moved to a helper which is initialized within BaseComponent. This ensures that focus rectangles show up even if you don't use the Fabric wrapper. +- Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open +- Upgrade to TypeScript 2.8.1 + +### Patches + +- Add focus method to Breadcrumb +- Fix scroll bar shows when it should not. +- Fix style and alignment issues with DetailsList headers +- Add new component page prop for editing on GitHub. +- SpinButton: Make sure up/down Arrow do not leave the spinButton +- Handling the scenario where embedded text is passed in as the option's text. In This case, the ariaLabel prop will be displayed in the input and used for autocomplete matching. The value rendered in the menu will not change. +- Wrapping combobox options in an internal component which only performs an update if the props have changed. We are currently updating every option on every mouse or keyboard event. This gives awful performance in comboboxes with many elements. +- Adds tests for DocumentCardTitle title truncation +- Add focus method to Pivot. +- FocusZone: redoing the "reset alignment on mouse down" change in a less intrusive manner, with test coverage. +- Removing module entry until we change `lib` to output es6 modules in 6.0. If you would like tree shaking to work, please use webpack aliasing to alias `{packageName}/lib` to `{packageName}/lib-es2015`. In 6.0, we will change `lib` to be es6, so that current partners will just get tree shaking out of the box without aliasing. +- Prevent SelectionZone from interfering with links and buttons +- Added missing role to TagPicker's TagItem. +- FocusZone: undoing the "click" change, which was causing non-focusable targets to be tracked as the "active" element. This created side-effects such as elements becoming focusable upon clicking them more than once, leaving behind unexpected focus outlines. +- Updating build to React 16.3.1. +- DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex +- ColorPicker: text fields now update when `alphaSliderHidden` is `true`. ## 5.81.1 Thu, 12 Apr 2018 15:59:01 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 7a4a51f94f5700..c77fa22732e628 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.81.1", + "version": "5.82.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,7 +30,7 @@ "@types/sinon": "2.2.2", "@types/webpack-env": "1.13.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", - "@uifabric/example-app-base": ">=5.9.0 <6.0.0", + "@uifabric/example-app-base": ">=5.10.0 <6.0.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.1.0", "es6-promise": "^4.1.0", @@ -48,10 +48,10 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/icons": ">=5.7.0 <6.0.0", - "@uifabric/merge-styles": ">=5.15.0 <6.0.0", - "@uifabric/styling": ">=5.23.0 <6.0.0", - "@uifabric/utilities": ">=5.23.0 <6.0.0", + "@uifabric/icons": ">=5.7.1 <6.0.0", + "@uifabric/merge-styles": ">=5.15.1 <6.0.0", + "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/utilities": ">=5.24.0 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/styling/CHANGELOG.json b/packages/styling/CHANGELOG.json index 836a4130eb4483..55cb89e454e274 100644 --- a/packages/styling/CHANGELOG.json +++ b/packages/styling/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@uifabric/styling", "entries": [ + { + "version": "5.23.1", + "tag": "@uifabric/styling_v5.23.1", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`" + } + ] + } + }, { "version": "5.23.0", "tag": "@uifabric/styling_v5.23.0", diff --git a/packages/styling/CHANGELOG.md b/packages/styling/CHANGELOG.md index 1a3a1b6bffc569..2d1951bf51cb06 100644 --- a/packages/styling/CHANGELOG.md +++ b/packages/styling/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log - @uifabric/styling -This log was last generated on Tue, 10 Apr 2018 17:37:28 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.23.1 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) +- Updating build to React 16.3.1. ## 5.23.0 Tue, 10 Apr 2018 17:37:28 GMT diff --git a/packages/styling/package.json b/packages/styling/package.json index 270f437952d973..7e95b55f3274ec 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/styling", - "version": "5.23.0", + "version": "5.23.1", "description": "Defines the core Office UI Fabric styles through a JavaScript interface.", "repository": { "type": "git", @@ -29,8 +29,8 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/utilities": ">=5.23.0 <6.0.0", - "@uifabric/merge-styles": ">=5.15.0 <6.0.0", + "@uifabric/utilities": ">=5.24.0 <6.0.0", + "@uifabric/merge-styles": ">=5.15.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json index 409572ed25b5a2..bc1dfc8893ed2c 100644 --- a/packages/utilities/CHANGELOG.json +++ b/packages/utilities/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@uifabric/utilities", "entries": [ + { + "version": "5.24.0", + "tag": "@uifabric/utilities_v5.24.0", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "minor": [ + { + "author": "David Zearing ", + "commit": "0c830b2d32319e5455c2c652765b9d4d6cda8268", + "comment": "Adding some helpers which ensure that `ms-Fabric.is-focusVisible` class name is added to the document body when focus rectangles should be fixible. Also ensuring that the `documentElement` has a `dir` attribute." + }, + { + "author": "Christian Gonzalez ", + "commit": "a79de6bee8a344b392da6308988ce075c0206382", + "comment": "Upgrade to TypeScript 2.8.1" + } + ], + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + }, + { + "author": "David Zearing ", + "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e", + "comment": "Updating build to React 16.3.1." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`" + } + ] + } + }, { "version": "5.23.0", "tag": "@uifabric/utilities_v5.23.0", diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index 26e970fc07c2ce..b95669b1de5974 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,6 +1,19 @@ # Change Log - @uifabric/utilities -This log was last generated on Thu, 05 Apr 2018 10:15:39 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.24.0 +Mon, 16 Apr 2018 10:23:26 GMT + +### Minor changes + +- Adding some helpers which ensure that `ms-Fabric.is-focusVisible` class name is added to the document body when focus rectangles should be fixible. Also ensuring that the `documentElement` has a `dir` attribute. +- Upgrade to TypeScript 2.8.1 + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) +- Updating build to React 16.3.1. ## 5.23.0 Thu, 05 Apr 2018 10:15:39 GMT diff --git a/packages/utilities/package.json b/packages/utilities/package.json index c8b8d070c291b6..2e53d0aea00b1e 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/utilities", - "version": "5.23.0", + "version": "5.24.0", "description": "Office UI Fabric utilities for building React components.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -36,7 +36,7 @@ "sinon": "^4.1.3" }, "dependencies": { - "@uifabric/merge-styles": ">=5.15.0 <6.0.0", + "@uifabric/merge-styles": ">=5.15.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/variants/CHANGELOG.json b/packages/variants/CHANGELOG.json index 7cc8f9a269fa4d..aec063ef1b7f40 100644 --- a/packages/variants/CHANGELOG.json +++ b/packages/variants/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/variants", "entries": [ + { + "version": "5.3.3", + "tag": "@uifabric/variants_v5.3.3", + "date": "Mon, 16 Apr 2018 10:23:26 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4", + "comment": "Removing module entry temporarily. (Will be added back in 6.0.)" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`" + } + ] + } + }, { "version": "5.3.2", "tag": "@uifabric/variants_v5.3.2", diff --git a/packages/variants/CHANGELOG.md b/packages/variants/CHANGELOG.md index f63c788906178b..b5f9dfb80f068c 100644 --- a/packages/variants/CHANGELOG.md +++ b/packages/variants/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/variants -This log was last generated on Mon, 02 Apr 2018 22:15:06 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. + +## 5.3.3 +Mon, 16 Apr 2018 10:23:26 GMT + +### Patches + +- Removing module entry temporarily. (Will be added back in 6.0.) ## 5.3.2 Mon, 02 Apr 2018 22:15:06 GMT diff --git a/packages/variants/package.json b/packages/variants/package.json index f49123dc52b65e..47c49f3b07f6ea 100644 --- a/packages/variants/package.json +++ b/packages/variants/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/variants", - "version": "5.3.2", + "version": "5.3.3", "description": "Office UI Fabric subtheme generator.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -26,6 +26,6 @@ }, "dependencies": { "tslib": "^1.7.1", - "@uifabric/styling": ">=5.23.0 <6.0.0" + "@uifabric/styling": ">=5.23.1 <6.0.0" } } \ No newline at end of file diff --git a/scripts/package.json b/scripts/package.json index 08bb66a58b3c1f..8d21c4f3ea4e6b 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -11,7 +11,7 @@ "@microsoft/api-extractor": "^4.2.6", "@microsoft/load-themed-styles": "^1.7.13", "@microsoft/loader-load-themed-styles": "^1.6.0", - "@uifabric/merge-styles": ">=5.15.0 <6.0.0", + "@uifabric/merge-styles": ">=5.15.1 <6.0.0", "autoprefixer": "^7.1.5", "bundlesize": "^0.15.2", "chalk": "^2.1.0", @@ -53,4 +53,4 @@ "maxSize": "46.5 kB" } ] -} +} \ No newline at end of file From 68d99e21972347fe8d3f9279e112b3427ebf1d0e Mon Sep 17 00:00:00 2001 From: David Zearing Date: Mon, 16 Apr 2018 09:25:52 -0700 Subject: [PATCH 04/86] Adding scss temp files to the clean script to avoid surprises when syncing and building. --- scripts/clean.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/clean.js b/scripts/clean.js index 10e03833a7b695..98043438aa1cf2 100644 --- a/scripts/clean.js +++ b/scripts/clean.js @@ -7,7 +7,8 @@ const path = require('path'); 'dist', 'lib-amd', 'lib-es2015', - 'coverage' + 'coverage', + 'src/**/*.scss.ts' ].forEach(folder => { rimraf(path.resolve(process.cwd(), folder)); }); \ No newline at end of file From 5131956d069af4a4afa8aef32958104067268700 Mon Sep 17 00:00:00 2001 From: lafe Date: Mon, 16 Apr 2018 18:28:33 +0200 Subject: [PATCH 05/86] Changed single line comment to multi line comment --- .../src/components/Calendar/Calendar.types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts index e238f79163581a..baf7ff93fcc9bf 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts @@ -16,7 +16,9 @@ export interface ICalendarProps extends React.Props { */ componentRef?: (component: ICalendar | null) => void; - /** Optional class name to add to the root element. */ + /** + * Optional class name to add to the root element. + */ className?: string; /** From 5ab46126a513abf87f63a9447b5cbf960b18265e Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Mon, 16 Apr 2018 19:03:08 +0200 Subject: [PATCH 06/86] Fix for onMenuClick firing on every keyDown (#4557) * Do not call onMenuClick on every keyDown * Add change file * Simplify if condition * Don't ignore default key down handling --- ...ick-firing-on-every-key-down_2018-04-14-10-09.json | 11 +++++++++++ .../src/components/Button/BaseButton.tsx | 11 +++++------ 2 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json diff --git a/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json b/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json new file mode 100644 index 00000000000000..ea531e6888d2f8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Do not call the onMenuClick on every keyDown event", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mark@thedutchies.com" +} \ No newline at end of file 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 06c66aee2304b6..7cbdaeca15f986 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -570,14 +570,13 @@ export class BaseButton extends BaseComponent Date: Mon, 16 Apr 2018 21:49:29 +0000 Subject: [PATCH 07/86] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...-firing-on-every-key-down_2018-04-14-10-09.json | 11 ----------- packages/experiments/package.json | 2 +- packages/office-ui-fabric-react/CHANGELOG.json | 14 ++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 9 ++++++++- packages/office-ui-fabric-react/package.json | 2 +- 10 files changed, 29 insertions(+), 19 deletions(-) delete mode 100644 common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 4b3802b97de513..28e257d16f60de 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 548b77ea382baa..d749ef01d14b48 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index cd41e4da6137a6..a8826e7cefb922 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 2a20d007c345ce..0891c89b996803 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 1a276c48b40909..3fd32c888ad513 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json b/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json deleted file mode 100644 index ea531e6888d2f8..00000000000000 --- a/common/changes/office-ui-fabric-react/mapol-fix-onMenuClick-firing-on-every-key-down_2018-04-14-10-09.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Do not call the onMenuClick on every keyDown event", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/packages/experiments/package.json b/packages/experiments/package.json index f1880e7ac178b4..08c9feb0bfd491 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.82.0 <6.0.0", + "office-ui-fabric-react": ">=5.82.1 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 4b31da17426e66..934b7dab105f0d 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.82.1", + "tag": "office-ui-fabric-react_v5.82.1", + "date": "Mon, 16 Apr 2018 21:49:29 GMT", + "comments": { + "patch": [ + { + "author": "Mark Polak ", + "commit": "5ab46126a513abf87f63a9447b5cbf960b18265e", + "comment": "Do not call the onMenuClick on every keyDown event" + } + ] + } + }, { "version": "5.82.0", "tag": "office-ui-fabric-react_v5.82.0", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index b4dd9b36a52496..9b50f106cd5507 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - office-ui-fabric-react -This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. +This log was last generated on Mon, 16 Apr 2018 21:49:29 GMT and should not be manually modified. + +## 5.82.1 +Mon, 16 Apr 2018 21:49:29 GMT + +### Patches + +- Do not call the onMenuClick on every keyDown event ## 5.82.0 Mon, 16 Apr 2018 10:23:26 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index c77fa22732e628..b3a323d15ae667 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.82.0", + "version": "5.82.1", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", From 68acb9b5f356c7b76ef334984ce4a9258a926061 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Mon, 16 Apr 2018 18:17:01 -0700 Subject: [PATCH 08/86] mergeStyles: asynchronously reset the next style element being used (#4574) * Async registration of styling. * Adding change file. --- .../merge-styles/async-style_2018-04-16-22-29.json | 11 +++++++++++ packages/merge-styles/src/Stylesheet.ts | 5 +++++ 2 files changed, 16 insertions(+) create mode 100644 common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json diff --git a/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json b/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json new file mode 100644 index 00000000000000..b37b1d11d11c00 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "mergeStyles: rules are now registered in separate styling objects, improving performance significantly.", + "type": "patch" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts index 12de4f0d2f5b2c..c3b1a87a52ee63 100644 --- a/packages/merge-styles/src/Stylesheet.ts +++ b/packages/merge-styles/src/Stylesheet.ts @@ -215,6 +215,11 @@ export class Stylesheet { private _getElement(): HTMLStyleElement | undefined { if (!this._styleElement && typeof document !== 'undefined') { this._styleElement = _createStyleElement(); + + // Reset the style element on the next frame. + window.requestAnimationFrame(() => { + this._styleElement = undefined; + }); } return this._styleElement; } From 08644fad0d1eb59d3ea6ff9c1de8761c06a63173 Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:43:41 +0200 Subject: [PATCH 09/86] Changed double quotes to single quotes --- .../src/components/Calendar/Calendar.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 4c3130777a2d3d..643eddeab900d8 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -255,8 +255,8 @@ describe('Calendar', () => { const root = calendarRoot[0]; expect(root.classList).toBeDefined(); expect(root.classList.length).toEqual(2); - expect(root.classList[0]).toEqual("ms-DatePicker"); - expect(root.classList[1]).toEqual("CalendarTestClass"); + expect(root.classList[0]).toEqual('ms-DatePicker'); + expect(root.classList[1]).toEqual('CalendarTestClass'); }); }); From cc4d58593092f4402c63368ca49fdfb4a10697c5 Mon Sep 17 00:00:00 2001 From: lafe Date: Tue, 17 Apr 2018 08:44:53 +0200 Subject: [PATCH 10/86] Missed one double quotation --- .../src/components/Calendar/Calendar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 643eddeab900d8..506a16ad157868 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -173,7 +173,7 @@ describe('Calendar', () => { dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } onSelectDate={ onSelectDate() } - className="CalendarTestClass" + className='CalendarTestClass' />) as Calendar; }); From 3c5e9c98329dbd3df53024ad19acfcfd96993303 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 17 Apr 2018 00:20:50 -0700 Subject: [PATCH 11/86] Fixing build. (#4579) * Fixing build. * Updating sass because of load order differences. * more visual bug fixes. * Tweaking css. --- apps/vr-tests/package.json | 2 +- common/config/rush/npm-shrinkwrap.json | 652 +++++++++++------- .../src/components/Dropdown/Dropdown.scss | 9 +- .../pickers/Suggestions/Suggestions.scss | 9 +- 4 files changed, 426 insertions(+), 246 deletions(-) diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 3fd32c888ad513..840281f65035cd 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -23,7 +23,7 @@ "style-loader": "^0.19.0", "awesome-typescript-loader": "^3.2.3", "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0", - "screener-storybook": "^0.11.1", + "screener-storybook": "^0.12.5", "screener-runner": "^0.6.19", "storybook-readme": "=3.0.6" }, diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json index bf7f32d9e86f70..bb7886a232192e 100644 --- a/common/config/rush/npm-shrinkwrap.json +++ b/common/config/rush/npm-shrinkwrap.json @@ -88,14 +88,14 @@ }, "@rush-temp/build": { "version": "file:projects/build.tgz", - "integrity": "sha1-s/+4I1stfHVNJUr02wUGBqmXKrw=", + "integrity": "sha1-T3Z8HKKujQsa0eU2LZzotfg3L4g=", "requires": { "@microsoft/api-extractor": "4.3.7", "@microsoft/load-themed-styles": "1.7.50", "@microsoft/loader-load-themed-styles": "1.7.32", "autoprefixer": "7.2.6", "bundlesize": "0.15.3", - "chalk": "2.3.2", + "chalk": "2.4.0", "command-line-args": "4.0.7", "cpx": "1.5.0", "css-loader": "0.28.11", @@ -548,7 +548,7 @@ "sockjs-client": "1.1.4", "spdy": "3.4.7", "strip-ansi": "3.0.1", - "supports-color": "5.3.0", + "supports-color": "5.4.0", "webpack-dev-middleware": "3.1.2", "webpack-log": "1.2.0", "yargs": "11.0.0" @@ -595,7 +595,7 @@ }, "@rush-temp/example-app-base": { "version": "file:projects/example-app-base.tgz", - "integrity": "sha1-g2umsH4jBo7kU+WDzaVJkbNlwaw=", + "integrity": "sha1-DkUcfRVaa8xwsxbZRsRwvrr9KbU=", "requires": { "@types/es6-promise": "0.0.32", "@types/highlight.js": "9.12.2", @@ -607,16 +607,16 @@ "es6-weak-map": "2.0.2", "highlight.js": "9.12.0", "markdown-to-jsx": "6.6.1", - "office-ui-fabric-react": "5.81.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "office-ui-fabric-react": "5.82.1", + "react": "16.3.2", + "react-dom": "16.3.2", "react-syntax-highlighter": "7.0.2", "tslib": "1.9.0" } }, "@rush-temp/experiments": { "version": "file:projects/experiments.tgz", - "integrity": "sha1-1MOz3fzgJdgsZbnqVpEEpLVm8IU=", + "integrity": "sha1-daarXQdKu4kkuBeXhStW7KW9YK8=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/enzyme": "3.1.5", @@ -635,17 +635,17 @@ "enzyme-adapter-react-16": "1.1.1", "es6-weak-map": "2.0.2", "prop-types": "15.6.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "react-highlight": "0.10.0", - "react-test-renderer": "16.3.1", + "react-test-renderer": "16.3.2", "sinon": "4.5.0", "tslib": "1.9.0" } }, "@rush-temp/fabric-website": { "version": "file:projects/fabric-website.tgz", - "integrity": "sha1-dZr7KSR9vJoixvZQPJFiSIX+DLU=", + "integrity": "sha1-a1mHbvDvXnWaXuyFJEIvClcuHpI=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/es6-promise": "0.0.32", @@ -661,8 +661,8 @@ "highlight.js": "9.12.0", "json-loader": "0.5.7", "office-ui-fabric-core": "9.6.0", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "react-highlight": "0.10.0", "tslib": "1.9.0", "write-file-webpack-plugin": "4.2.0" @@ -670,32 +670,32 @@ }, "@rush-temp/file-type-icons": { "version": "file:projects/file-type-icons.tgz", - "integrity": "sha1-MLLcWZH3dcQlOIsFVjHP+jkHwB8=", + "integrity": "sha1-Yn+JPy99YoMSgbFnw5ID2WktWNs=", "requires": { "@types/react": "16.3.10", "@types/react-dom": "16.0.5", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "tslib": "1.9.0" } }, "@rush-temp/icons": { "version": "file:projects/icons.tgz", - "integrity": "sha1-2XwOquDqAafVO8IpJupgyDrA+oI=", + "integrity": "sha1-pVQHHai8Itvqt9Yu8AHEDXB1BRs=", "requires": { "tslib": "1.9.0" } }, "@rush-temp/jest-serializer-merge-styles": { "version": "file:projects/jest-serializer-merge-styles.tgz", - "integrity": "sha1-5FDKIBEZN+O4wvS9p7J00Br0V3s=", + "integrity": "sha1-n+RTd+E26yjhauT284rh4gXLfzo=", "requires": { "@types/jest": "21.1.8" } }, "@rush-temp/merge-styles": { "version": "file:projects/merge-styles.tgz", - "integrity": "sha1-QIuSxyehZfdDcAXXirfgoWEEP7o=", + "integrity": "sha1-KQC+5a/Yux9UOIoWq7SnCXAGbYI=", "requires": { "@types/jest": "21.1.8", "tslib": "1.9.0" @@ -703,7 +703,7 @@ }, "@rush-temp/office-ui-fabric-react": { "version": "file:projects/office-ui-fabric-react.tgz", - "integrity": "sha1-i8JOWnOFhaTSFEmXCm+h8r+9j+E=", + "integrity": "sha1-15D4XJwcbRk65so2L5a1u+DEUCU=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/enzyme": "3.1.5", @@ -725,10 +725,10 @@ "highlight.js": "9.12.0", "office-ui-fabric-core": "9.6.0", "prop-types": "15.6.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "react-highlight": "0.10.0", - "react-test-renderer": "16.3.1", + "react-test-renderer": "16.3.2", "resemblejs": "2.2.6", "sinon": "4.5.0", "tslib": "1.9.0" @@ -736,14 +736,14 @@ }, "@rush-temp/office-ui-fabric-react-tslint": { "version": "file:projects/office-ui-fabric-react-tslint.tgz", - "integrity": "sha1-8Ghyr4/qGNQ/YEHwqaygWsDmMD4=", + "integrity": "sha1-Lpw29kpo8XYUjrbjk3AiOmKBc2I=", "requires": { "tslint-react": "3.5.1" } }, "@rush-temp/ssr-tests": { "version": "file:projects/ssr-tests.tgz", - "integrity": "sha1-+nK7SlDCapSHb/B61UlRABKdQd4=", + "integrity": "sha1-ApHvumLVdD5xovN/qT2v5tac+0M=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/es6-promise": "0.0.32", @@ -752,8 +752,8 @@ "es6-promise": "4.2.4", "mocha": "3.5.3", "raw-loader": "0.5.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "tslib": "1.9.0", "webpack": "4.5.0" }, @@ -1060,7 +1060,7 @@ }, "@rush-temp/styling": { "version": "file:projects/styling.tgz", - "integrity": "sha1-03CC7l1s8xhZIFkk4JIqB3iFNJY=", + "integrity": "sha1-oCh2p/rfJ1hLnsJ+kA4etUwi93s=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/jest": "21.1.8", @@ -1068,27 +1068,27 @@ "@types/webpack-env": "1.13.0", "es6-map": "0.1.5", "es6-weak-map": "2.0.2", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "tslib": "1.9.0" } }, "@rush-temp/test-bundle-button": { "version": "file:projects/test-bundle-button.tgz", - "integrity": "sha1-Sud3Qsm2huOFkMCfFZJT/XShdZ8=", + "integrity": "sha1-DEKsr3vPRqOJSyHa++oqhlnkt9Q=", "requires": { "@types/prop-types": "15.5.2", "@types/react": "16.3.10", "@types/react-dom": "16.0.5", "@types/webpack-env": "1.13.0", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "tslib": "1.9.0" } }, "@rush-temp/todo-app": { "version": "file:projects/todo-app.tgz", - "integrity": "sha1-k4V69iaBHsJ8QloWsHkmBsbqx1w=", + "integrity": "sha1-g+j/qa8VUW7jubOkemtdrdiWsRM=", "requires": { "@microsoft/load-themed-styles": "1.7.50", "@types/es6-promise": "0.0.32", @@ -1097,15 +1097,15 @@ "@types/webpack-env": "1.13.0", "es6-promise": "4.2.4", "immutability-helper": "2.6.6", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "tslib": "1.9.0", "typescript": "2.8.1" } }, "@rush-temp/utilities": { "version": "file:projects/utilities.tgz", - "integrity": "sha1-UQZx1Uyz4Cd32KAug5xteFLzSFU=", + "integrity": "sha1-/OUe7tPLUU+ih/KZ/03w8cRa5L0=", "requires": { "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", @@ -1117,15 +1117,15 @@ "enzyme": "3.3.0", "enzyme-adapter-react-16": "1.1.1", "prop-types": "15.6.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "sinon": "4.5.0", "tslib": "1.9.0" } }, "@rush-temp/variants": { "version": "file:projects/variants.tgz", - "integrity": "sha1-V9Y+UfNieu0HjBP64XMsygPdE68=", + "integrity": "sha1-8x6mkzR8vS0Ro1fs0Ctch++yuY8=", "requires": { "@types/jest": "21.1.8", "tslib": "1.9.0" @@ -1133,7 +1133,7 @@ }, "@rush-temp/vr-tests": { "version": "file:projects/vr-tests.tgz", - "integrity": "sha1-Lf3JH56MLke69+FuXZfn/W/Go38=", + "integrity": "sha1-km3rck0pwUcIkwCcmzEE5OtXAtU=", "requires": { "@storybook/addon-options": "3.2.3", "@storybook/react": "3.4.1", @@ -1145,10 +1145,10 @@ "file-loader": "0.11.2", "postcss-loader": "2.1.4", "raw-loader": "0.5.1", - "react": "16.3.1", - "react-dom": "16.3.1", + "react": "16.3.2", + "react-dom": "16.3.2", "screener-runner": "0.6.19", - "screener-storybook": "0.11.5", + "screener-storybook": "0.12.5", "storybook-readme": "3.0.6", "style-loader": "0.19.1", "tslib": "1.9.0", @@ -1251,7 +1251,7 @@ "@storybook/ui": "3.4.1", "autoprefixer": "7.2.6", "babel-runtime": "6.26.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "commander": "2.15.1", "css-loader": "0.28.11", "dotenv": "5.0.1", @@ -1577,40 +1577,39 @@ "integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw=" }, "@uifabric/icons": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.7.0.tgz", - "integrity": "sha512-3aYM53nPq+nAftXK3bN6ozjsTon0ms/yn5OW6Ht0fFDrhkx88At1i4rQXNJxECglM37VCAPRHVtb486dRaUZzA==", + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.7.1.tgz", + "integrity": "sha512-UwfDU6A0bj/QAdTsO20g9mrKXo3zxvumkBWx0F0sEHn1DF/IQDiq4zYVBjRZ3NikQe2o7koWe3Gb0NR84Qr2Sg==", "requires": { - "@uifabric/styling": "5.23.0", + "@uifabric/styling": "5.23.1", "tslib": "1.9.0" } }, "@uifabric/merge-styles": { - "version": "5.15.0", - "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.0.tgz", - "integrity": "sha512-VwUaVBKbqVbmpcaaKoLbv02B5v7BXhRvsnHOmmnOjSUrKyeZzg1lOwKbk0aoZCpH57lWkdf0RGMZN66imfyaSg==", + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.1.tgz", + "integrity": "sha512-Uk9+80TEXlAYOE3eqRUPMnGYG8XMLYOpv3lSPcBK3suS7nBFWJdwpQlbuCMyCGVlxKPhHGOAaUU6bKgRs02+Gw==", "requires": { "tslib": "1.9.0" } }, "@uifabric/styling": { - "version": "5.23.0", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.23.0.tgz", - "integrity": "sha512-X/hye1euUUosGEPWY878yiyfIIvkw9YCADfU6N0slMcmb205ePbCPUs8ehgVDnZ97zdGHn8cYweK5aO+UTh6SA==", + "version": "5.23.1", + "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.23.1.tgz", + "integrity": "sha512-u+DPLjz9YJIsxexqEogLcrHgvIvtz92sUKqlGHpVrcQdYuwD+wMmxdg/Bem671aXgGywfH5ypplXJ8+4Lix3qQ==", "requires": { "@microsoft/load-themed-styles": "1.7.50", - "@uifabric/merge-styles": "5.15.0", - "@uifabric/utilities": "5.23.0", + "@uifabric/merge-styles": "5.15.1", + "@uifabric/utilities": "5.24.0", "tslib": "1.9.0" } }, "@uifabric/utilities": { - "version": "5.23.0", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.23.0.tgz", - "integrity": "sha512-qd1V2ZofVeTFZsNQ2+RmUSSIbxLBg1MmjhJQWeeXPZ3DexJ7aNlL+RgW6uUKSlzbq5F9WFgTA7SCRtQmBQdHpw==", + "version": "5.24.0", + "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.24.0.tgz", + "integrity": "sha512-SiAfpvncj68RrxvceBCGr1QtFXXVc7gtd2RBMkoLj3GTYSum5ZywMEcksa4BHyyY5haJYvQspkFiV9sIPDtX2w==", "requires": { - "@microsoft/load-themed-styles": "1.7.50", - "@uifabric/merge-styles": "5.15.0", + "@uifabric/merge-styles": "5.15.1", "prop-types": "15.6.1", "tslib": "1.9.0" } @@ -2027,7 +2026,7 @@ "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-3.5.0.tgz", "integrity": "sha512-qzgm9SEvodVkSi9QY7Me1/rujg+YBNMjayNSAyzNghwTEez++gXoPCwMvpbHRG7wrOkDCiF6dquvv9ESmUBAuw==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "enhanced-resolve": "3.3.0", "loader-utils": "1.1.0", "lodash": "4.17.5", @@ -3908,6 +3907,11 @@ "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" }, + "browser-process-hrtime": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz", + "integrity": "sha1-Ql1opY00R/AqBKqJQYf86K+Le44=" + }, "browser-resolve": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz", @@ -4281,13 +4285,13 @@ } }, "chalk": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", - "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", + "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", "requires": { "ansi-styles": "3.2.1", "escape-string-regexp": "1.0.5", - "supports-color": "5.3.0" + "supports-color": "5.4.0" } }, "chardet": { @@ -5404,6 +5408,41 @@ "assert-plus": "1.0.0" } }, + "data-urls": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.0.0.tgz", + "integrity": "sha512-ai40PPQR0Fn1lD2PPie79CibnlMN2AYiDhwFX/rZHVsxbs5kNJSjegqXIprhouGXlRdEnfybva7kqRGnB6mypA==", + "requires": { + "abab": "1.0.4", + "whatwg-mimetype": "2.1.0", + "whatwg-url": "6.4.0" + }, + "dependencies": { + "punycode": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", + "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=" + }, + "tr46": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", + "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", + "requires": { + "punycode": "2.1.0" + } + }, + "whatwg-url": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz", + "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==", + "requires": { + "lodash.sortby": "4.7.0", + "tr46": "1.0.1", + "webidl-conversions": "4.0.2" + } + } + } + }, "date-fns": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz", @@ -5756,6 +5795,14 @@ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=" }, + "domexception": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", + "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", + "requires": { + "webidl-conversions": "4.0.2" + } + }, "domhandler": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.1.tgz", @@ -5933,7 +5980,7 @@ "object.values": "1.0.4", "prop-types": "15.6.1", "react-reconciler": "0.7.0", - "react-test-renderer": "16.3.1" + "react-test-renderer": "16.3.2" }, "dependencies": { "lodash": { @@ -7536,15 +7583,15 @@ "requires": { "es6-templates": "0.2.3", "fastparse": "1.1.1", - "html-minifier": "3.5.14", + "html-minifier": "3.5.15", "loader-utils": "1.1.0", "object-assign": "4.1.1" } }, "html-minifier": { - "version": "3.5.14", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.14.tgz", - "integrity": "sha512-sZjw6zhQgyUnIlIPU+W80XpRjWjdxHtNcxjfyOskOsCTDKytcfLY04wsQY/83Yqb4ndoiD2FtauiL7Yg6uUQFQ==", + "version": "3.5.15", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.15.tgz", + "integrity": "sha512-OZa4rfb6tZOZ3Z8Xf0jKxXkiDcFWldQePGYFDcgKqES2sXeWaEv9y6QQvWUtX3ySI3feApQi5uCsHLINQ6NoAw==", "requires": { "camel-case": "3.0.0", "clean-css": "4.1.11", @@ -7577,7 +7624,7 @@ "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=", "requires": { "bluebird": "3.5.1", - "html-minifier": "3.5.14", + "html-minifier": "3.5.15", "loader-utils": "0.2.17", "lodash": "4.17.5", "pretty-error": "2.1.1", @@ -8724,7 +8771,7 @@ "integrity": "sha512-T1BzrbFxDIW/LLYQqVfo94y/hhaj1NzVQkZgBumAC+sxbjMROI7VkihOdxNR758iYbQykL2ZOWUBurFgkQrzdg==", "requires": { "ansi-escapes": "3.1.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "glob": "7.1.2", "graceful-fs": "4.1.11", "is-ci": "1.1.0", @@ -8797,7 +8844,7 @@ "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-21.2.1.tgz", "integrity": "sha512-fJru5HtlD/5l2o25eY9xT0doK3t2dlglrqoGpbktduyoI0T5CwuB++2YfoNZCrgZipTwPuAGonYv0q7+8yDc/A==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "glob": "7.1.2", "jest-environment-jsdom": "21.2.1", "jest-environment-node": "21.2.1", @@ -8815,7 +8862,7 @@ "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-21.2.1.tgz", "integrity": "sha512-E5fu6r7PvvPr5qAWE1RaUwIh/k6Zx/3OOkZ4rk5dBJkEWRrUuSgbMt2EO8IUTPTd6DOqU3LW6uTIwX5FRvXoFA==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "diff": "3.5.0", "jest-get-type": "21.2.0", "pretty-format": "21.2.1" @@ -8868,7 +8915,7 @@ "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-21.2.1.tgz", "integrity": "sha512-lw8FXXIEekD+jYNlStfgNsUHpfMWhWWCgHV7n0B7mA/vendH7vBFs8xybjQsDzJSduptBZJHqQX9SMssya9+3A==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "expect": "21.2.1", "graceful-fs": "4.1.11", "jest-diff": "21.2.1", @@ -8883,7 +8930,7 @@ "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-21.2.1.tgz", "integrity": "sha512-kn56My+sekD43dwQPrXBl9Zn9tAqwoy25xxe7/iY4u+mG8P3ALj5IK7MLHZ4Mi3xW7uWVCjGY8cm4PqgbsqMCg==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "jest-get-type": "21.2.0", "pretty-format": "21.2.1" } @@ -8893,7 +8940,7 @@ "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-21.2.1.tgz", "integrity": "sha512-EbC1X2n0t9IdeMECJn2BOg7buOGivCvVNjqKMXTzQOu7uIfLml+keUfCALDh8o4rbtndIeyGU8/BKfoTr/LVDQ==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "micromatch": "2.3.11", "slash": "1.0.0" } @@ -8914,7 +8961,7 @@ "integrity": "sha512-vefQ/Lr+VdNvHUZFQXWtOqHX3HEdOc2MtSahBO89qXywEbUxGPB9ZLP9+BHinkxb60UT2Q/tTDOS6rYc6Mwigw==", "requires": { "browser-resolve": "1.11.2", - "chalk": "2.3.2", + "chalk": "2.4.0", "is-builtin-module": "1.0.0" } }, @@ -8951,7 +8998,7 @@ "babel-core": "6.26.0", "babel-jest": "21.2.0", "babel-plugin-istanbul": "4.1.6", - "chalk": "2.3.2", + "chalk": "2.4.0", "convert-source-map": "1.5.1", "graceful-fs": "4.1.11", "jest-config": "21.2.1", @@ -8994,7 +9041,7 @@ "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-21.2.1.tgz", "integrity": "sha512-bpaeBnDpdqaRTzN8tWg0DqOTo2DvD3StOemxn67CUd1p1Po+BUpvePAp44jdJ7Pxcjfg+42o4NHw1SxdCA2rvg==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "jest-diff": "21.2.1", "jest-matcher-utils": "21.2.1", "mkdirp": "0.5.1", @@ -9008,7 +9055,7 @@ "integrity": "sha512-r20W91rmHY3fnCoO7aOAlyfC51x2yeV3xF+prGsJAUsYhKeV670ZB8NO88Lwm7ASu8SdH0S+U+eFf498kjhA4g==", "requires": { "callsites": "2.0.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "graceful-fs": "4.1.11", "jest-message-util": "21.2.1", "jest-mock": "21.2.0", @@ -9021,7 +9068,7 @@ "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-21.2.1.tgz", "integrity": "sha512-k4HLI1rZQjlU+EC682RlQ6oZvLrE5SCh3brseQc24vbZTxzT/k/3urar5QMCVgjadmSO7lECeGdc6YxnM3yEGg==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "jest-get-type": "21.2.0", "leven": "2.1.0", "pretty-format": "21.2.1" @@ -9269,6 +9316,11 @@ "invert-kv": "1.0.0" } }, + "left-pad": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz", + "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==" + }, "leven": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", @@ -9701,7 +9753,7 @@ "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", "requires": { - "chalk": "2.3.2" + "chalk": "2.4.0" } }, "log-update": { @@ -10577,7 +10629,7 @@ "stream-browserify": "2.0.1", "stream-http": "2.8.1", "string_decoder": "1.1.1", - "timers-browserify": "2.0.6", + "timers-browserify": "2.0.7", "tty-browserify": "0.0.0", "url": "0.11.0", "util": "0.10.3", @@ -11030,15 +11082,15 @@ "integrity": "sha1-KhZgU8ye+wlWUGPn/Td8yKywNBw=" }, "office-ui-fabric-react": { - "version": "5.81.1", - "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.81.1.tgz", - "integrity": "sha512-caZGXpLjwVmr9iSD8jWedxrsBymI0tI4tVq+3+/b0rUGg65I2tDOteVtAdDnzDfhT3EUJA4JX3x4+6SkPptlwg==", + "version": "5.82.1", + "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.82.1.tgz", + "integrity": "sha512-ChqMfWuUWir7Xlt4szC5ysOwJwz9Ja67+j3w4PsHz94YVZDyLRexuLw5ALvNDlhF0OtIlONNdte5lv74HDcpMg==", "requires": { "@microsoft/load-themed-styles": "1.7.50", - "@uifabric/icons": "5.7.0", - "@uifabric/merge-styles": "5.15.0", - "@uifabric/styling": "5.23.0", - "@uifabric/utilities": "5.23.0", + "@uifabric/icons": "5.7.1", + "@uifabric/merge-styles": "5.15.1", + "@uifabric/styling": "5.23.1", + "@uifabric/utilities": "5.24.0", "prop-types": "15.6.1", "tslib": "1.9.0" } @@ -11516,6 +11568,11 @@ "find-up": "2.1.0" } }, + "pn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", + "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==" + }, "portfinder": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz", @@ -11551,9 +11608,9 @@ "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz", "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "source-map": "0.6.1", - "supports-color": "5.3.0" + "supports-color": "5.4.0" } }, "postcss-calc": { @@ -13306,9 +13363,9 @@ "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=" }, "prettier": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.12.0.tgz", - "integrity": "sha512-Wz0SMncgaglBzDcohH3ZIAi4nVpzOIEweFzCOmgVEoRSeO72b4dcKGfgxoRGVMaFlh1r7dlVaJ+f3CIHfeH6xg==" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.12.1.tgz", + "integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU=" }, "pretty-bytes": { "version": "4.0.2", @@ -13668,9 +13725,9 @@ "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=" }, "react": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.3.1.tgz", - "integrity": "sha512-NbkxN9jsZ6+G+ICsLdC7/wUD26uNbvKU/RAxEWgc9kcdKvROt+5d5j2cNQm5PSFTQ4WNGsR3pa4qL2Q0/WSy1w==", + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz", + "integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==", "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -13741,7 +13798,7 @@ "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", "requires": { "ansi-escapes": "3.1.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "cli-cursor": "2.1.0", "cli-width": "2.2.0", "external-editor": "2.2.0", @@ -13765,13 +13822,13 @@ } }, "chalk": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz", - "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", + "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", "requires": { "ansi-styles": "3.2.1", "escape-string-regexp": "1.0.5", - "supports-color": "5.3.0" + "supports-color": "5.4.0" } }, "strip-ansi": { @@ -13783,9 +13840,9 @@ } }, "supports-color": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz", - "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "requires": { "has-flag": "3.0.0" } @@ -13859,9 +13916,9 @@ } }, "react-dom": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.1.tgz", - "integrity": "sha512-2Infg89vzahq8nfVi1GkjPqq0vrBvf0f3T0+dTtyjq4f6HKOqKixAK25Vr593O3QTx4kw/vmUtAJwerlevNWOA==", + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz", + "integrity": "sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA==", "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -13951,9 +14008,9 @@ } }, "react-is": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.1.tgz", - "integrity": "sha512-3XpazGqS5DEOLiuR6JQ2Sg6URq/33d1BHJVaUvtMz579KRhd2D0pqabNEe5czv785yzKBPZimOf0UNIXa3jw1A==" + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz", + "integrity": "sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==" }, "react-modal": { "version": "3.3.2", @@ -14015,14 +14072,14 @@ } }, "react-test-renderer": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.1.tgz", - "integrity": "sha512-emEcIPUowMjT5EQ+rrb0FAwVCzuJ+LKDweoYDh073v2/jHxrBDPUk8nzI5dofG3R+140+Bb9TMcT2Ez5OP6pQw==", + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.2.tgz", + "integrity": "sha512-lL8WHIpCTMdSe+CRkt0rfMxBkJFyhVrpdQ54BaJRIrXf9aVmbeHbRA8GFRpTvohPN5tPzMabmrzW2PUfWCfWwQ==", "requires": { "fbjs": "0.8.16", "object-assign": "4.1.1", "prop-types": "15.6.1", - "react-is": "16.3.1" + "react-is": "16.3.2" } }, "react-transition-group": { @@ -14452,6 +14509,16 @@ "lodash": "4.15.0" } }, + "request-promise-native": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.5.tgz", + "integrity": "sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=", + "requires": { + "request-promise-core": "1.1.1", + "stealthy-require": "1.1.1", + "tough-cookie": "2.3.4" + } + }, "requestretry": { "version": "1.12.3", "resolved": "https://registry.npmjs.org/requestretry/-/requestretry-1.12.3.tgz", @@ -15348,36 +15415,36 @@ } }, "screener-storybook": { - "version": "0.11.5", - "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.11.5.tgz", - "integrity": "sha1-AeT31Pjt8qMwxMysVPxj4Y/zGEM=", + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.12.5.tgz", + "integrity": "sha1-B+L579ZC+fs9K9B/PVJGGnoQnQw=", "requires": { "bluebird": "3.4.7", "colors": "1.1.2", "commander": "2.9.0", "get-port": "3.2.0", "joi": "10.0.6", - "jsdom": "9.8.3", + "jsdom": "11.7.0", "lodash": "4.17.5", "prop-types": "15.6.1", "react": "15.6.2", "react-dom": "15.4.2", "request": "2.81.0", "requestretry": "1.12.3", - "screener-runner": "0.8.2" + "screener-runner": "0.9.1" }, "dependencies": { "acorn": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz", - "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=" + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz", + "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==" }, "acorn-globals": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz", - "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.1.0.tgz", + "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==", "requires": { - "acorn": "2.7.0" + "acorn": "5.5.3" } }, "ajv": { @@ -15399,11 +15466,6 @@ "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=" }, - "aws-sign2": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", - "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=" - }, "bluebird": { "version": "3.4.7", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz", @@ -15478,58 +15540,11 @@ "ms": "0.7.1" } }, - "form-data": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", - "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", - "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.6", - "mime-types": "2.1.18" - } - }, "har-schema": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=" }, - "har-validator": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", - "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", - "requires": { - "ajv": "4.11.8", - "har-schema": "1.0.5" - } - }, - "hawk": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", - "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", - "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" - }, - "dependencies": { - "hoek": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" - } - } - }, - "http-signature": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", - "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", - "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.1", - "sshpk": "1.14.1" - } - }, "joi": { "version": "10.0.6", "resolved": "https://registry.npmjs.org/joi/-/joi-10.0.6.tgz", @@ -15542,30 +15557,67 @@ } }, "jsdom": { - "version": "9.8.3", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.8.3.tgz", - "integrity": "sha1-/eKcEJwyoRMeC2xlkU5kGY+Xw3A=", + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.7.0.tgz", + "integrity": "sha512-9NzSc4Iz4gN9p4uoPbBUzro21QdgL32swaWIaWS8eEVQ2I69fRJAy/MKyvlEIk0V7HtKgfMbbOKyTZUrzR2Hsw==", "requires": { "abab": "1.0.4", - "acorn": "2.7.0", - "acorn-globals": "1.0.9", + "acorn": "5.5.3", + "acorn-globals": "4.1.0", "array-equal": "1.0.0", - "content-type-parser": "1.0.2", "cssom": "0.3.2", "cssstyle": "0.2.37", + "data-urls": "1.0.0", + "domexception": "1.0.1", "escodegen": "1.9.1", "html-encoding-sniffer": "1.0.2", - "iconv-lite": "0.4.21", + "left-pad": "1.3.0", "nwmatcher": "1.4.4", - "parse5": "1.5.1", - "request": "2.81.0", + "parse5": "4.0.0", + "pn": "1.1.0", + "request": "2.85.0", + "request-promise-native": "1.0.5", "sax": "1.2.4", "symbol-tree": "3.2.2", "tough-cookie": "2.3.4", - "webidl-conversions": "3.0.1", + "w3c-hr-time": "1.0.1", + "webidl-conversions": "4.0.2", "whatwg-encoding": "1.0.3", - "whatwg-url": "3.1.0", - "xml-name-validator": "2.0.1" + "whatwg-mimetype": "2.1.0", + "whatwg-url": "6.4.0", + "ws": "4.1.0", + "xml-name-validator": "3.0.0" + }, + "dependencies": { + "request": { + "version": "2.85.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz", + "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==", + "requires": { + "aws-sign2": "0.7.0", + "aws4": "1.7.0", + "caseless": "0.12.0", + "combined-stream": "1.0.6", + "extend": "3.0.1", + "forever-agent": "0.6.1", + "form-data": "2.3.2", + "har-validator": "5.0.3", + "hawk": "6.0.2", + "http-signature": "1.2.0", + "is-typedarray": "1.0.0", + "isstream": "0.1.2", + "json-stringify-safe": "5.0.1", + "mime-types": "2.1.18", + "oauth-sign": "0.8.2", + "performance-now": "2.1.0", + "qs": "6.5.1", + "safe-buffer": "5.1.1", + "stringstream": "0.0.5", + "tough-cookie": "2.3.4", + "tunnel-agent": "0.6.0", + "uuid": "3.2.1" + } + } } }, "lodash": { @@ -15595,19 +15647,14 @@ "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc=" }, "parse5": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", - "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=" - }, - "performance-now": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", - "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", + "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==" }, - "qs": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", - "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=" + "punycode": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", + "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=" }, "react": { "version": "15.6.2", @@ -15658,12 +15705,74 @@ "tough-cookie": "2.3.4", "tunnel-agent": "0.6.0", "uuid": "3.2.1" + }, + "dependencies": { + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=" + }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.6", + "mime-types": "2.1.18" + } + }, + "har-validator": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", + "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", + "requires": { + "ajv": "4.11.8", + "har-schema": "1.0.5" + } + }, + "hawk": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + } + }, + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.1", + "sshpk": "1.14.1" + } + }, + "performance-now": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", + "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=" + }, + "qs": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", + "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=" + } } }, "screener-runner": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.8.2.tgz", - "integrity": "sha1-6s1x1kjguLZLTc6BA/E2uElTUFc=", + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.9.1.tgz", + "integrity": "sha1-+k9X6DbU0+zo8yld/9te49Cs4BM=", "requires": { "bluebird": "3.4.7", "colors": "1.1.2", @@ -15679,11 +15788,26 @@ "request-promise": "4.1.1" }, "dependencies": { + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=" + }, "caseless": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=" }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.6", + "mime-types": "2.1.18" + } + }, "har-validator": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", @@ -15695,6 +15819,34 @@ "pinkie-promise": "2.0.1" } }, + "hawk": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + }, + "dependencies": { + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" + } + } + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.1", + "sshpk": "1.14.1" + } + }, "joi": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/joi/-/joi-9.2.0.tgz", @@ -15771,19 +15923,28 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, - "webidl-conversions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + "tr46": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", + "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", + "requires": { + "punycode": "2.1.0" + } }, "whatwg-url": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-3.1.0.tgz", - "integrity": "sha1-e9yuSQ+SGu9kUftnOexrvY6Qe/Y=", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz", + "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==", "requires": { - "tr46": "0.0.3", - "webidl-conversions": "3.0.1" + "lodash.sortby": "4.7.0", + "tr46": "1.0.1", + "webidl-conversions": "4.0.2" } + }, + "xml-name-validator": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", + "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==" } } }, @@ -16047,7 +16208,7 @@ "lodash.get": "4.4.2", "lolex": "2.3.2", "nise": "1.3.2", - "supports-color": "5.3.0", + "supports-color": "5.4.0", "type-detect": "4.0.8" } }, @@ -16681,9 +16842,9 @@ } }, "supports-color": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz", - "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", "requires": { "has-flag": "3.0.0" } @@ -17158,9 +17319,9 @@ "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" }, "timers-browserify": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz", - "integrity": "sha512-HQ3nbYRAowdVd0ckGFvmJPPCOH/CHleFN/Y0YQCX1DVaB7t+KFvisuyN09fuP8Jtp1CpfSh8O8bMkHbdbPe6Pw==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.7.tgz", + "integrity": "sha512-U7DtjfsHeYjNAyEz4MdCLGZMY3ySyHIgZZp6ba9uxZlMRMiK5yTHUYc2XfGQHKFgxGcmvBF2jafoNtQYvlDpOw==", "requires": { "setimmediate": "1.0.5" } @@ -17417,7 +17578,7 @@ "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.2.0.tgz", "integrity": "sha512-EvnwgbEUklPQK82OiZS0NDrG0ZoH91+zef8PFXSOZocSQ5jklQyvAM84Id20UxjVdXVIzMgFu+vlKCQomfq27A==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "enhanced-resolve": "4.0.0", "loader-utils": "1.1.0", "micromatch": "3.1.10", @@ -17694,7 +17855,7 @@ "requires": { "babel-code-frame": "6.26.0", "builtin-modules": "1.1.1", - "chalk": "2.3.2", + "chalk": "2.4.0", "commander": "2.15.1", "diff": "3.5.0", "glob": "7.1.2", @@ -18226,6 +18387,14 @@ "parse5": "3.0.3" } }, + "w3c-hr-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", + "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=", + "requires": { + "browser-process-hrtime": "0.1.2" + } + }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", @@ -18872,7 +19041,7 @@ "requires": { "acorn": "5.5.3", "bfj-node4": "5.3.1", - "chalk": "2.3.2", + "chalk": "2.4.0", "commander": "2.15.1", "ejs": "2.5.8", "express": "4.16.3", @@ -18910,7 +19079,7 @@ "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-2.0.14.tgz", "integrity": "sha512-gRoWaxSi2JWiYsn1QgOTb6ENwIeSvN1YExZ+kJ0STsTZK7bWPElW+BBBv1UnTbvcPC3v7E17mK8hlFX8DOYSGw==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "cross-spawn": "6.0.5", "diff": "3.5.0", "enhanced-resolve": "4.0.0", @@ -18929,8 +19098,8 @@ "mkdirp": "0.5.1", "p-each-series": "1.0.0", "p-lazy": "1.0.0", - "prettier": "1.12.0", - "supports-color": "5.3.0", + "prettier": "1.12.1", + "supports-color": "5.4.0", "v8-compile-cache": "1.1.2", "webpack-addons": "1.1.5", "yargs": "11.1.0", @@ -18976,7 +19145,7 @@ "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==", "requires": { "ansi-escapes": "3.1.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "cli-cursor": "2.1.0", "cli-width": "2.2.0", "external-editor": "2.2.0", @@ -19082,7 +19251,7 @@ "sockjs-client": "1.1.4", "spdy": "3.4.7", "strip-ansi": "3.0.1", - "supports-color": "5.3.0", + "supports-color": "5.4.0", "webpack-dev-middleware": "1.12.2", "yargs": "6.6.0" }, @@ -19555,7 +19724,7 @@ "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz", "integrity": "sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "log-symbols": "2.2.0", "loglevelnext": "1.0.4", "uuid": "3.2.1" @@ -19614,6 +19783,11 @@ "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" }, + "whatwg-mimetype": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz", + "integrity": "sha512-FKxhYLytBQiUKjkYteN71fAUA3g6KpNXoho1isLiLSB3N1G4F35Q5vUxWfKFhBwi5IWF27VE6WxhrnnC+m0Mew==" + }, "whatwg-url": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-4.8.0.tgz", @@ -19967,7 +20141,7 @@ "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.0.6.tgz", "integrity": "sha512-jzHBTTy8EPI4ImV8dpUMt+Q5zELkSU5xvGpndHcHudQ4tqN6YgIWaCGmRFl+HDchwRUkcgyjQ+n6/w5zlJBCPg==", "requires": { - "chalk": "2.3.2", + "chalk": "2.4.0", "debug": "3.1.0", "diff": "3.5.0", "escape-string-regexp": "1.0.5", @@ -19998,7 +20172,7 @@ "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", "requires": { "ansi-escapes": "3.1.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "cli-cursor": "2.1.0", "cli-width": "2.2.0", "external-editor": "2.2.0", @@ -20034,7 +20208,7 @@ "integrity": "sha512-Sgvz3MAkOpEIobcpW3rjEl6bOTNnl8SkibP9z7hYKfIGIlw0QDC2k0MAeXvyE2pLqc2M0Duql+6R7/W9GrJojg==", "requires": { "async": "2.6.0", - "chalk": "2.3.2", + "chalk": "2.4.0", "cli-table": "0.3.1", "cross-spawn": "5.1.0", "dargs": "5.1.0", diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index 265e0effa99e10..66cba6b8feecd4 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -172,7 +172,7 @@ $DropDown-item-height: 32px; } } -.callout { +.callout.callout { box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.2); border: 1px solid $ms-color-neutralLight; } @@ -195,10 +195,13 @@ $DropDown-item-height: 32px; cursor: pointer; display: block; width: 100%; - height: auto; min-height: $DropDown-item-height; line-height: 20px; - padding: 4px 16px; + + /* once this is converted to js css, then specificity won't be an issue. */ + height: auto !important; + padding: 4px 16px !important; + position: relative; border: 1px solid transparent; word-wrap: break-word; diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss index c8a4d6fe6eb526..1b148db35156f1 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss @@ -138,9 +138,11 @@ } } -.itemButton { - height: 100%; +.itemButton.itemButton { width: 100%; + + /* once this is converted to js css, then specificity won't be an issue. */ + height: 100%; padding: 7px 12px; @include high-contrast { @@ -148,7 +150,8 @@ } } -.closeButton { +.closeButton.closeButton { + /* once this is converted to js css, then specificity won't be an issue. */ padding: 0 4px; height: auto; width: 32px; From 8829b1fde1bbe2e6920b5e619727835184a15b45 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 17 Apr 2018 10:11:35 -0700 Subject: [PATCH 12/86] Website: Make titles on GetStarted page clickable (#4570) * Make titles on GetStarted page clickable * Added change file --- .../GetStarted/GetStartedPage.module.scss | 18 +++++++++++----- .../src/pages/GetStarted/GetStartedPage.tsx | 21 ++++++++++++------- .../get-started-links_2018-04-16-19-47.json | 11 ++++++++++ 3 files changed, 37 insertions(+), 13 deletions(-) create mode 100644 common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss index ec7fb9aa58d2b8..4885114e6360f6 100644 --- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss +++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss @@ -47,11 +47,15 @@ background-color:$color-getStarted-darker; color: $ms-color-neutralLighter; - a, a:visited, + a:not(.title), a:visited, a:hover.title, .getStartedLink { border-bottom: 1px solid $ms-color-neutralLight; } + a.title { + border-bottom: 1px solid transparent; + } + a, a:hover, a:active, .getStartedLink { color: $ms-color-neutralLight; @@ -59,11 +63,15 @@ } .feature { - align-items: center; - display: flex; - flex-direction: column; margin-bottom: 32px; + .featureImage { + align-items: center; + display: flex; + flex-direction: column; + width: 100%; + } + img { height: 100%; margin-bottom: 8px; @@ -91,7 +99,7 @@ font-size: $font-size-big; font-weight: $ms-font-weight-semilight; margin-bottom: $contentMargin-vertical; - width: 100%; + display: table; } @media screen and (max-width: $uhf-screen-max-mobile) { diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx index 7841a5f4ecd702..2818756338b6d3 100644 --- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx +++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx @@ -49,26 +49,31 @@ export class GetStartedPage extends React.Component {
- Illustration of Typography and color swatches. -
Styles
+
+ Illustration of Typography and color swatches. +
+ Styles
Fabric gives you access to Segoe, Microsoft’s official typeface, along with the color palette, type ramp, icons, and responsive grid for Office 365.
- Illustration of Icons -
Icons
+
+ Illustration of Icons +
+ Icons
Fabric includes Office’s official product icons. Fabric also provides a suite of product and document symbols, so you can use the same metaphors we use.
- Illustration of Components -
Components
+
+ Illustration of Components +
+ Components
Components are the building blocks of your UI. Fabric has a variety of components, including navigation, commands, containers, and content.
- Design Toolkit + Design Toolkit The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable you to create seamless, beautiful Office experiences. - Learn more
diff --git a/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json b/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json new file mode 100644 index 00000000000000..9d49b54fe3fc0a --- /dev/null +++ b/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/fabric-website", + "comment": "GetStarted page: Give titles links to their corresponding pages.", + "type": "minor" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file From 5867a6982557d85227600af53420324734298285 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 17 Apr 2018 10:31:31 -0700 Subject: [PATCH 13/86] Disable bundlesize in Travis workflow to unblock PRs. --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 03a88d5329b50f..ab67c1b14fc8c2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,5 +6,5 @@ script: npm run checkchange; fi - npm run buildfast - - npm run bundlesize +# - npm run bundlesize - npm run vrtest From 4dc9071ade20efb98eded9b97aa9124a9232f84a Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Tue, 17 Apr 2018 11:07:26 -0700 Subject: [PATCH 14/86] Fix improper imports from index files (#4585) * Fixed improper imports from index files * Update change output --- .../fix-index-imports_2018-04-17-16-09.json | 11 +++++++++++ .../fix-index-imports_2018-04-17-16-09.json | 11 +++++++++++ .../Shimmer/ShimmerTile/ShimmerTile.base.tsx | 4 ++-- .../ActivityItem/ActivityItem.test.tsx | 16 ++++++++-------- .../src/components/Persona/Persona.types.ts | 4 ++-- .../Persona/PersonaCoin/PersonaCoin.base.tsx | 6 +++--- .../PersonaPresence/PersonaPresence.base.tsx | 2 +- .../src/components/Persona/index.ts | 2 +- 8 files changed, 39 insertions(+), 17 deletions(-) create mode 100644 common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json create mode 100644 common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json diff --git a/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json b/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json new file mode 100644 index 00000000000000..2a70516fafaade --- /dev/null +++ b/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Fix improper imports from index files", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json new file mode 100644 index 00000000000000..5f04bd3d9406fb --- /dev/null +++ b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix improper imports from index files", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx index 09eb5e2f5b8c5e..76ec1eb52a549a 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx +++ b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx @@ -8,7 +8,7 @@ import { IShimmerTileStyleProps, IShimmerTileStyles } from './ShimmerTile.types'; -import { TileLayoutSizes, TileSize } from '../../Tile'; +import { TileLayoutSizes, TileSize } from '../../../Tile'; import { ShimmerGap } from '../ShimmerGap/ShimmerGap'; import { getRenderedElements } from '../Shimmer.base'; import { ShimmerElementType as ElemType } from '../Shimmer.types'; @@ -219,4 +219,4 @@ export class ShimmerTileBase extends BaseComponent {
); } -} \ No newline at end of file +} diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx index 462414f66dd3dc..e27dcbb687ee9f 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as renderer from 'react-test-renderer'; import { ActivityItem } from './ActivityItem'; -import { Icon } from '../Icon'; +import { Icon } from '../../Icon'; import { TestImages } from '../../common/TestImages'; const defaultProps = { @@ -34,7 +34,7 @@ describe('ActivityItem', () => { it('renders with an icon correctly', () => { const component = renderer.create( } /> ); @@ -45,7 +45,7 @@ describe('ActivityItem', () => { it('renders with a single persona correctly', () => { const component = renderer.create( ); @@ -56,7 +56,7 @@ describe('ActivityItem', () => { it('renders with multiple personas correctly', () => { const component = renderer.create( ); @@ -67,7 +67,7 @@ describe('ActivityItem', () => { it('renders compact with an icon correctly', () => { const component = renderer.create( } isCompact={ true } /> @@ -79,7 +79,7 @@ describe('ActivityItem', () => { it('renders compact with a single persona correctly', () => { const component = renderer.create( @@ -91,7 +91,7 @@ describe('ActivityItem', () => { it('renders compact with multiple personas correctly', () => { const component = renderer.create( @@ -100,4 +100,4 @@ describe('ActivityItem', () => { expect(tree).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index c9baa333da78e3..e473b6d5967245 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; import { PersonaBase } from './Persona.base'; -import { PersonaCoinBase } from './PersonaCoin'; -import { PersonaPresenceBase } from './PersonaPresence'; +import { PersonaCoinBase } from './PersonaCoin/index'; +import { PersonaPresenceBase } from './PersonaPresence/index'; import { ImageLoadState } from '../../Image'; import { IStyle, ITheme } from '../../Styling'; import { IStyleFunction } from '../../Utilities'; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx index c466e9233e2776..c411c653ec4735 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx @@ -9,15 +9,15 @@ import { getRTL, } from '../../../Utilities'; import { mergeStyles } from '../../../Styling'; -import { PersonaPresence } from '../PersonaPresence'; +import { PersonaPresence } from '../PersonaPresence/index'; import { Icon -} from '../../Icon'; +} from '../../../Icon'; import { Image, ImageFit, ImageLoadState -} from '../../Image'; +} from '../../../Image'; import { IPersonaCoinProps, IPersonaCoinStyleProps, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx index 4118f8b14044ad..4c7dbe713b3f7d 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx @@ -5,7 +5,7 @@ import { customizable, } from '../../../Utilities'; import { IStyleSet } from '../../../Styling'; -import { Icon } from '../../Icon'; +import { Icon } from '../../../Icon'; import { IPersonaPresenceProps, IPersonaPresenceStyleProps, diff --git a/packages/office-ui-fabric-react/src/components/Persona/index.ts b/packages/office-ui-fabric-react/src/components/Persona/index.ts index c10c0f10b7b519..174942d4a4cd77 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/index.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts @@ -1,5 +1,5 @@ export * from './Persona'; export * from './Persona.base'; export * from './Persona.types'; -export * from './PersonaCoin'; +export * from './PersonaCoin/index'; export * from './PersonaConsts'; From 7ed1f9d2f87a4630cc8e3005a5b9d92e6cd1d5a4 Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Tue, 17 Apr 2018 11:08:01 -0700 Subject: [PATCH 15/86] Mark Panel content as scrollable (#4577) * Mark Panel content element as scrollable * Update change output --- .../panel-scroll_2018-04-17-00-29.json | 11 +++++++++++ .../src/components/Panel/Panel.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json diff --git a/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json b/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json new file mode 100644 index 00000000000000..353d90f73bba4e --- /dev/null +++ b/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Mark Panel content as scrollable", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx index 00184ce657ec4b..e7d21d5380bc01 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx @@ -286,7 +286,7 @@ export class Panel extends BaseComponent implements IP ); return ( -
+
{ props.children }
); From b6c7ac2f9a118b775296fbe18a23da80b5013868 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Tue, 17 Apr 2018 18:47:11 +0000 Subject: [PATCH 16/86] Applying package updates. --- .npm-version | 2 +- apps/fabric-website/CHANGELOG.json | 19 +++++++++++++++ apps/fabric-website/CHANGELOG.md | 9 ++++++- apps/fabric-website/package.json | 4 ++-- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- .../fix-index-imports_2018-04-17-16-09.json | 11 --------- .../get-started-links_2018-04-16-19-47.json | 11 --------- .../async-style_2018-04-16-22-29.json | 11 --------- .../fix-index-imports_2018-04-17-16-09.json | 11 --------- .../panel-scroll_2018-04-17-00-29.json | 11 --------- packages/experiments/CHANGELOG.json | 19 +++++++++++++++ packages/experiments/CHANGELOG.md | 9 ++++++- packages/experiments/package.json | 4 ++-- .../jest-serializer-merge-styles/package.json | 2 +- packages/merge-styles/CHANGELOG.json | 14 +++++++++++ packages/merge-styles/CHANGELOG.md | 9 ++++++- packages/merge-styles/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 24 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 10 +++++++- packages/office-ui-fabric-react/package.json | 4 ++-- packages/styling/package.json | 2 +- packages/utilities/package.json | 2 +- scripts/package.json | 2 +- 26 files changed, 125 insertions(+), 75 deletions(-) delete mode 100644 common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json delete mode 100644 common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json delete mode 100644 common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json delete mode 100644 common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json delete mode 100644 common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json diff --git a/.npm-version b/.npm-version index ad98597185fb24..4cc0e35cb30cfc 100644 --- a/.npm-version +++ b/.npm-version @@ -1 +1 @@ -2.x \ No newline at end of file +5.6.0 \ No newline at end of file diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json index 4c40bf1184759b..549326a38cd410 100644 --- a/apps/fabric-website/CHANGELOG.json +++ b/apps/fabric-website/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/fabric-website", "entries": [ + { + "version": "5.7.0", + "tag": "@uifabric/fabric-website_v5.7.0", + "date": "Tue, 17 Apr 2018 18:47:11 GMT", + "comments": { + "minor": [ + { + "author": "lynamemi ", + "commit": "8829b1fde1bbe2e6920b5e619727835184a15b45", + "comment": "GetStarted page: Give titles links to their corresponding pages." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.1 <6.0.0` to `>=5.82.2 <6.0.0`" + } + ] + } + }, { "version": "5.6.1", "tag": "@uifabric/fabric-website_v5.6.1", diff --git a/apps/fabric-website/CHANGELOG.md b/apps/fabric-website/CHANGELOG.md index a7b05c947402ba..2cb7da3dab9aa3 100644 --- a/apps/fabric-website/CHANGELOG.md +++ b/apps/fabric-website/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/fabric-website -This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. +This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. + +## 5.7.0 +Tue, 17 Apr 2018 18:47:11 GMT + +### Minor changes + +- GetStarted page: Give titles links to their corresponding pages. ## 5.6.1 Mon, 16 Apr 2018 10:23:26 GMT diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 28e257d16f60de..2f7ec2c418d73f 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/fabric-website", - "version": "5.6.1", + "version": "5.7.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index d749ef01d14b48..c381c82ed70697 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index a8826e7cefb922..5ff8e2ae647c06 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 0891c89b996803..f1d70ae53dcaad 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 840281f65035cd..4b6f545f9f0405 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json b/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json deleted file mode 100644 index 2a70516fafaade..00000000000000 --- a/common/changes/@uifabric/experiments/fix-index-imports_2018-04-17-16-09.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Fix improper imports from index files", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json b/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json deleted file mode 100644 index 9d49b54fe3fc0a..00000000000000 --- a/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/fabric-website", - "comment": "GetStarted page: Give titles links to their corresponding pages.", - "type": "minor" - } - ], - "packageName": "@uifabric/fabric-website", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json b/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json deleted file mode 100644 index b37b1d11d11c00..00000000000000 --- a/common/changes/@uifabric/merge-styles/async-style_2018-04-16-22-29.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/merge-styles", - "comment": "mergeStyles: rules are now registered in separate styling objects, improving performance significantly.", - "type": "patch" - } - ], - "packageName": "@uifabric/merge-styles", - "email": "dzearing@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json deleted file mode 100644 index 5f04bd3d9406fb..00000000000000 --- a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-17-16-09.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix improper imports from index files", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json b/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json deleted file mode 100644 index 353d90f73bba4e..00000000000000 --- a/common/changes/office-ui-fabric-react/panel-scroll_2018-04-17-00-29.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Mark Panel content as scrollable", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 01b85b0af744f9..6eda31e5c0d112 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.31.2", + "tag": "@uifabric/experiments_v5.31.2", + "date": "Tue, 17 Apr 2018 18:47:11 GMT", + "comments": { + "patch": [ + { + "author": "Thomas Michon ", + "commit": "4dc9071ade20efb98eded9b97aa9124a9232f84a", + "comment": "Fix improper imports from index files" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.1 <6.0.0` to `>=5.82.2 <6.0.0`" + } + ] + } + }, { "version": "5.31.1", "tag": "@uifabric/experiments_v5.31.1", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index 5e15b9fa60d94f..218dd5ee5bce8a 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/experiments -This log was last generated on Mon, 16 Apr 2018 10:23:25 GMT and should not be manually modified. +This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. + +## 5.31.2 +Tue, 17 Apr 2018 18:47:11 GMT + +### Patches + +- Fix improper imports from index files ## 5.31.1 Mon, 16 Apr 2018 10:23:25 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 08c9feb0bfd491..3d2168c614a115 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.31.1", + "version": "5.31.2", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.82.1 <6.0.0", + "office-ui-fabric-react": ">=5.82.2 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json index ed705070aade72..9455a70cda0aae 100644 --- a/packages/jest-serializer-merge-styles/package.json +++ b/packages/jest-serializer-merge-styles/package.json @@ -24,6 +24,6 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/merge-styles": ">=5.15.1 <6.0.0" + "@uifabric/merge-styles": ">=5.15.2 <6.0.0" } } \ No newline at end of file diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json index 065b99ae924d90..a92ccc99a06c9d 100644 --- a/packages/merge-styles/CHANGELOG.json +++ b/packages/merge-styles/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/merge-styles", "entries": [ + { + "version": "5.15.2", + "tag": "@uifabric/merge-styles_v5.15.2", + "date": "Tue, 17 Apr 2018 18:47:11 GMT", + "comments": { + "patch": [ + { + "author": "David Zearing ", + "commit": "68acb9b5f356c7b76ef334984ce4a9258a926061", + "comment": "mergeStyles: rules are now registered in separate styling objects, improving performance significantly." + } + ] + } + }, { "version": "5.15.1", "tag": "@uifabric/merge-styles_v5.15.1", diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md index ac67b739de0a89..942654e152fca0 100644 --- a/packages/merge-styles/CHANGELOG.md +++ b/packages/merge-styles/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/merge-styles -This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. +This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. + +## 5.15.2 +Tue, 17 Apr 2018 18:47:11 GMT + +### Patches + +- mergeStyles: rules are now registered in separate styling objects, improving performance significantly. ## 5.15.1 Mon, 16 Apr 2018 10:23:26 GMT diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json index ce4fe2b5985675..d7e946e7d33b9b 100644 --- a/packages/merge-styles/package.json +++ b/packages/merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/merge-styles", - "version": "5.15.1", + "version": "5.15.2", "description": "Office UI Fabric style loading utilities.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 934b7dab105f0d..2b13fa20ed778f 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,30 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.82.2", + "tag": "office-ui-fabric-react_v5.82.2", + "date": "Tue, 17 Apr 2018 18:47:11 GMT", + "comments": { + "patch": [ + { + "author": "Thomas Michon ", + "commit": "4dc9071ade20efb98eded9b97aa9124a9232f84a", + "comment": "Fix improper imports from index files" + }, + { + "author": "Thomas Michon ", + "commit": "7ed1f9d2f87a4630cc8e3005a5b9d92e6cd1d5a4", + "comment": "Mark Panel content as scrollable" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.1 <6.0.0` to `>=5.15.2 <6.0.0`" + } + ] + } + }, { "version": "5.82.1", "tag": "office-ui-fabric-react_v5.82.1", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 9b50f106cd5507..b56c69c2a084a6 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log - office-ui-fabric-react -This log was last generated on Mon, 16 Apr 2018 21:49:29 GMT and should not be manually modified. +This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. + +## 5.82.2 +Tue, 17 Apr 2018 18:47:11 GMT + +### Patches + +- Fix improper imports from index files +- Mark Panel content as scrollable ## 5.82.1 Mon, 16 Apr 2018 21:49:29 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index b3a323d15ae667..951a39addaeb54 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.82.1", + "version": "5.82.2", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -49,7 +49,7 @@ "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/icons": ">=5.7.1 <6.0.0", - "@uifabric/merge-styles": ">=5.15.1 <6.0.0", + "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "@uifabric/styling": ">=5.23.1 <6.0.0", "@uifabric/utilities": ">=5.24.0 <6.0.0", "prop-types": "^15.5.10", diff --git a/packages/styling/package.json b/packages/styling/package.json index 7e95b55f3274ec..efbdb5165a2f75 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -30,7 +30,7 @@ "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/utilities": ">=5.24.0 <6.0.0", - "@uifabric/merge-styles": ">=5.15.1 <6.0.0", + "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/utilities/package.json b/packages/utilities/package.json index 2e53d0aea00b1e..cb5c148286396d 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -36,7 +36,7 @@ "sinon": "^4.1.3" }, "dependencies": { - "@uifabric/merge-styles": ">=5.15.1 <6.0.0", + "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/scripts/package.json b/scripts/package.json index 8d21c4f3ea4e6b..d5af64928894c6 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -11,7 +11,7 @@ "@microsoft/api-extractor": "^4.2.6", "@microsoft/load-themed-styles": "^1.7.13", "@microsoft/loader-load-themed-styles": "^1.6.0", - "@uifabric/merge-styles": ">=5.15.1 <6.0.0", + "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "autoprefixer": "^7.1.5", "bundlesize": "^0.15.2", "chalk": "^2.1.0", From 4efff92981d7301ac16bc8a2cbd7624585f9c42b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 17 Apr 2018 11:58:37 -0700 Subject: [PATCH 17/86] Docs: Convert document Overviews and Best Practices to markdown (#4512) * Convert getting started page and status page. * First wave of MD files. * Use markdown in example page wave 1 * Wave 2 * Initial code owners * Wave 3 * changes * Fix Persona owners * Add link to Icon docs to IconButton * Use component page for Theme page * Better themes documentation. * remove commented code * clean * nit * Add opt-in for @deprecated comments for documentation. * Add section on loading themes to Overview. * Fix mutating state to get rid of console error * Switch to getTheme from loadTheme, add not for deprecated colors. * changes * remove console.logs * Fix code block line height * changes --- .github/CODEOWNERS | 57 +++- ...-convert-to-markdown_2018-04-16-23-02.json | 11 + ...-convert-to-markdown_2018-04-14-00-37.json | 11 + ...-convert-to-markdown_2018-04-16-23-02.json | 11 + ...-convert-to-markdown_2018-04-11-23-54.json | 11 + ...-convert-to-markdown_2018-04-14-00-37.json | 11 + .../templates/TypeScriptSnippet.tsx | 5 +- .../ActivityItem/ActivityItemPage.tsx | 2 +- .../components/Breadcrumb/BreadcrumbPage.tsx | 29 +- .../Breadcrumb/docs/BreadcrumbDonts.md | 1 + .../Breadcrumb/docs/BreadcrumbDos.md | 1 + .../Breadcrumb/docs/BreadcrumbOverview.md | 3 + .../src/components/Button/ButtonPage.tsx | 46 +-- .../src/components/Button/docs/ButtonDonts.md | 5 + .../src/components/Button/docs/ButtonDos.md | 11 + .../components/Button/docs/ButtonOverview.md | 7 + .../Button/examples/Button.Icon.Example.tsx | 1 + .../src/components/Calendar/CalendarPage.tsx | 39 +-- .../components/Calendar/docs/CalendarDonts.md | 4 + .../components/Calendar/docs/CalendarDos.md | 5 + .../Calendar/docs/CalendarOverview.md | 1 + .../src/components/Callout/CalloutPage.tsx | 46 +-- .../components/Callout/docs/CalloutDonts.md | 8 + .../src/components/Callout/docs/CalloutDos.md | 6 + .../Callout/docs/CalloutOverview.md | 5 + .../src/components/Checkbox/CheckboxPage.tsx | 50 +--- .../components/Checkbox/docs/CheckboxDonts.md | 3 + .../components/Checkbox/docs/CheckboxDos.md | 1 + .../Checkbox/docs/CheckboxOverview.md | 9 + .../ChoiceGroup/ChoiceGroupPage.tsx | 45 +-- .../ChoiceGroup/docs/ChoiceGroupDonts.md | 3 + .../ChoiceGroup/docs/ChoiceGroupDos.md | 6 + .../ChoiceGroup/docs/ChoiceGroupOverview.md | 5 + .../components/Coachmark/CoachmarkPage.tsx | 35 +-- .../Coachmark/docs/CoachmarkDonts.md | 2 + .../components/Coachmark/docs/CoachmarkDos.md | 3 + .../Coachmark/docs/CoachmarkOverview.md | 4 + .../ColorPicker/ColorPickerPage.tsx | 10 +- .../ColorPicker/docs/ColorPickerOverview.md | 1 + .../src/components/ComboBox/ComboBoxPage.tsx | 26 +- .../components/ComboBox/docs/ComboBoxDonts.md | 1 + .../components/ComboBox/docs/ComboBoxDos.md | 3 + .../ComboBox/docs/ComboBoxOverview.md | 1 + .../components/CommandBar/CommandBarPage.tsx | 46 +-- .../CommandBar/docs/CommandBarDonts.md | 3 + .../CommandBar/docs/CommandBarDos.md | 5 + .../CommandBar/docs/CommandBarOverview.md | 5 + .../ContextualMenu/ContextualMenuPage.tsx | 40 +-- .../docs/ContextualMenuDonts.md | 4 + .../ContextualMenu/docs/ContextualMenuDos.md | 4 + .../docs/ContextualMenuOverview.md | 5 + .../components/DatePicker/DatePickerPage.tsx | 37 +-- .../DatePicker/docs/DatePickerDonts.md | 4 + .../DatePicker/docs/DatePickerDos.md | 5 + .../DatePicker/docs/DatePickerOverview.md | 1 + .../DetailsList/DetailsListPage.tsx | 39 +-- .../DetailsList/docs/DetailsListDonts.md | 3 + .../DetailsList/docs/DetailsListDos.md | 4 + .../DetailsList/docs/DetailsListOverview.md | 5 + .../src/components/Dialog/DialogPage.tsx | 38 +-- .../src/components/Dialog/docs/DialogDonts.md | 7 + .../src/components/Dialog/docs/DialogDos.md | 5 + .../components/Dialog/docs/DialogOverview.md | 1 + .../src/components/Divider/DividerPage.tsx | 45 +-- .../Divider/docs/DividerBestPractices.md | 6 + .../components/Divider/docs/DividerDonts.md | 1 + .../src/components/Divider/docs/DividerDos.md | 3 + .../Divider/docs/DividerOverview.md | 1 + .../DocumentCard/DocumentCardPage.tsx | 29 +- .../DocumentCard/docs/DocumentCardDonts.md | 2 + .../DocumentCard/docs/DocumentCardDos.md | 3 + .../DocumentCard/docs/DocumentCardOverview.md | 1 + .../src/components/Dropdown/Dropdown.scss | 3 +- .../src/components/Dropdown/DropdownPage.tsx | 24 +- .../components/Dropdown/docs/DropdownDonts.md | 1 + .../components/Dropdown/docs/DropdownDos.md | 3 + .../Dropdown/docs/DropdownOverview.md | 1 + .../src/components/Facepile/FacepilePage.tsx | 60 +--- .../components/Facepile/docs/FacepileDonts.md | 3 + .../components/Facepile/docs/FacepileDos.md | 3 + .../Facepile/docs/FacepileOverview.md | 21 ++ .../FocusTrapZone/FocusTrapZonePage.tsx | 9 +- .../docs/FocusTrapZoneOverview.md | 1 + .../components/FocusZone/FocusZonePage.tsx | 10 +- .../FocusZone/docs/FocusZoneOverview.md | 3 + .../GroupedList/GroupedListPage.tsx | 8 +- .../GroupedList/docs/GroupedListOverview.md | 1 + .../components/HoverCard/HoverCardPage.tsx | 8 +- .../HoverCard/docs/HoverCardOverview.md | 1 + .../src/components/Icon/IconPage.tsx | 28 +- .../src/components/Icon/docs/IconDonts.md | 2 + .../src/components/Icon/docs/IconDos.md | 2 + .../src/components/Icon/docs/IconOverview.md | 3 + .../src/components/Image/ImagePage.tsx | 31 +- .../src/components/Image/docs/ImageDonts.md | 1 + .../src/components/Image/docs/ImageDos.md | 4 + .../components/Image/docs/ImageOverview.md | 1 + .../src/components/Label/LabelPage.tsx | 29 +- .../src/components/Label/docs/LabelDonts.md | 2 + .../src/components/Label/docs/LabelDos.md | 3 + .../components/Label/docs/LabelOverview.md | 1 + .../src/components/Layer/LayerPage.tsx | 35 +-- .../src/components/Layer/docs/LayerDonts.md | 1 + .../src/components/Layer/docs/LayerDos.md | 1 + .../components/Layer/docs/LayerOverview.md | 5 + .../src/components/Link/LinkPage.tsx | 35 +-- .../src/components/Link/docs/LinkDonts.md | 1 + .../src/components/Link/docs/LinkDos.md | 4 + .../src/components/Link/docs/LinkOverview.md | 3 + .../src/components/List/ListPage.tsx | 16 +- .../src/components/List/docs/ListOverview.md | 5 + .../MarqueeSelection/MarqueeSelectionPage.tsx | 21 +- .../docs/MarqueeSelectionOverview.md | 9 + .../components/MessageBar/MessageBarPage.tsx | 33 +-- .../MessageBar/docs/MessageBarDonts.md | 2 + .../MessageBar/docs/MessageBarDos.md | 4 + .../MessageBar/docs/MessageBarOverview.md | 1 + .../src/components/Modal/ModalPage.tsx | 32 +-- .../src/components/Modal/docs/ModalDonts.md | 1 + .../src/components/Modal/docs/ModalDos.md | 2 + .../components/Modal/docs/ModalOverview.md | 3 + .../src/components/Nav/NavPage.tsx | 33 +-- .../src/components/Nav/docs/NavDonts.md | 2 + .../src/components/Nav/docs/NavDos.md | 5 + .../src/components/Nav/docs/NavOverview.md | 1 + .../OverflowSet/OverflowSetPage.tsx | 13 +- .../OverflowSet/docs/OverflowSetOverview.md | 1 + .../src/components/Overlay/OverlayPage.tsx | 27 +- .../components/Overlay/docs/OverlayDonts.md | 1 + .../src/components/Overlay/docs/OverlayDos.md | 2 + .../Overlay/docs/OverlayOverview.md | 1 + .../src/components/Panel/PanelPage.tsx | 40 +-- .../src/components/Panel/docs/PanelDonts.md | 1 + .../src/components/Panel/docs/PanelDos.md | 3 + .../components/Panel/docs/PanelOverview.md | 9 + .../src/components/Persona/PersonaPage.tsx | 29 +- .../components/Persona/docs/PersonaDonts.md | 1 + .../src/components/Persona/docs/PersonaDos.md | 4 + .../Persona/docs/PersonaOverview.md | 1 + .../src/components/Pivot/PivotPage.tsx | 41 +-- .../src/components/Pivot/docs/PivotDonts.md | 3 + .../src/components/Pivot/docs/PivotDos.md | 2 + .../components/Pivot/docs/PivotOverview.md | 9 + .../ProgressIndicatorPage.tsx | 55 +--- .../docs/ProgressIndicatorDonts.md | 4 + .../docs/ProgressIndicatorDos.md | 4 + .../docs/ProgressIndicatorOverview.md | 11 + .../src/components/Rating/RatingPage.tsx | 28 +- .../src/components/Rating/docs/RatingDonts.md | 1 + .../src/components/Rating/docs/RatingDos.md | 1 + .../components/Rating/docs/RatingOverview.md | 1 + .../ResizeGroup/ResizeGroupPage.tsx | 64 +---- .../ResizeGroup/docs/ResizeGroupDonts.md | 2 + .../ResizeGroup/docs/ResizeGroupDos.md | 4 + .../ResizeGroup/docs/ResizeGroupOverview.md | 7 + .../ScrollablePane/ScrollablePanePage.tsx | 28 +- .../docs/ScrollablePaneDonts.md | 1 + .../ScrollablePane/docs/ScrollablePaneDos.md | 3 + .../docs/ScrollablePaneOverview.md | 1 + .../components/SearchBox/SearchBoxPage.tsx | 87 +----- .../SearchBox/docs/SearchBoxDonts.md | 8 + .../components/SearchBox/docs/SearchBoxDos.md | 9 + .../SearchBox/docs/SearchBoxOverview.md | 29 ++ .../src/components/Slider/SliderPage.tsx | 38 +-- .../src/components/Slider/docs/SliderDonts.md | 4 + .../src/components/Slider/docs/SliderDos.md | 5 + .../components/Slider/docs/SliderOverview.md | 3 + .../components/SpinButton/SpinButtonPage.tsx | 32 +-- .../SpinButton/docs/SpinButtonDonts.md | 3 + .../SpinButton/docs/SpinButtonDos.md | 3 + .../SpinButton/docs/SpinButtonOverview.md | 1 + .../src/components/Spinner/SpinnerPage.tsx | 33 +-- .../components/Spinner/docs/SpinnerDonts.md | 3 + .../src/components/Spinner/docs/SpinnerDos.md | 4 + .../Spinner/docs/SpinnerOverview.md | 1 + .../SwatchColorPickerPage.tsx | 32 +-- .../docs/SwatchColorPickerDonts.md | 1 + .../docs/SwatchColorPickerDos.md | 2 + .../docs/SwatchColorPickerOverview.md | 1 + .../TeachingBubble/TeachingBubblePage.tsx | 10 +- .../docs/TeachingBubbleOverview.md | 1 + .../components/TextField/TextFieldPage.tsx | 41 +-- .../TextField/docs/TextFieldDonts.md | 5 + .../components/TextField/docs/TextFieldDos.md | 12 + .../TextField/docs/TextFieldOverview.md | 1 + .../src/components/Theme/ThemePage.scss | 30 -- .../src/components/Theme/ThemePage.styles.ts | 43 +++ .../src/components/Theme/ThemePage.tsx | 266 ++++++++++-------- .../src/components/Theme/ThemePage.types.ts | 31 ++ .../src/components/Theme/defaultTheme.ts | 72 +---- .../components/Theme/docs/ThemesOverview.md | 33 +++ .../Theme/examples/ThemeCode.Example.tsx | 7 - .../src/components/Toggle/TogglePage.tsx | 40 +-- .../src/components/Toggle/docs/ToggleDonts.md | 1 + .../src/components/Toggle/docs/ToggleDos.md | 1 + .../components/Toggle/docs/ToggleOverview.md | 9 + .../src/components/Tooltip/TooltipPage.tsx | 10 +- .../Tooltip/docs/TooltipOverview.md | 4 + .../pickers/PeoplePicker/PeoplePickerPage.tsx | 38 ++- .../docs/PeoplePickerBestPractices.md | 1 + .../PeoplePicker/docs/PeoplePickerDonts.md | 3 + .../PeoplePicker/docs/PeoplePickerDos.md | 4 + .../PeoplePicker/docs/PeoplePickerOverview.md | 1 + .../src/components/pickers/PickersPage.tsx | 11 +- .../pickers/docs/PickersOverview.md | 1 + .../ComponentStatus/ComponentStatusPage.tsx | 13 +- .../docs/ComponentChecklistOverview.md | 1 + .../src/demo/GettingStartedPage.scss | 19 +- .../src/demo/GettingStartedPage.tsx | 101 ++----- .../src/demo/docs/GettingStartedOverview.md | 52 ++++ .../src/utilities/selection/SelectionPage.tsx | 36 +-- .../selection/docs/SelectionOverview.md | 15 + packages/styling/src/styles/theme.ts | 42 ++- 213 files changed, 1591 insertions(+), 1485 deletions(-) create mode 100644 common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json create mode 100644 common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json create mode 100644 common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json create mode 100644 common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json create mode 100644 common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json create mode 100644 packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md create mode 100644 packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md create mode 100644 packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md create mode 100644 packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md create mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md create mode 100644 packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md create mode 100644 packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md create mode 100644 packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md create mode 100644 packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md create mode 100644 packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md delete mode 100644 packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss create mode 100644 packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts create mode 100644 packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts create mode 100644 packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md delete mode 100644 packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx create mode 100644 packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md create mode 100644 packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md create mode 100644 packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md create mode 100644 packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md create mode 100644 packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md create mode 100644 packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md create mode 100644 packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md create mode 100644 packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md create mode 100644 packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 853c516dad6896..7b8cb59f31cd8b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -86,7 +86,7 @@ OverflowSet/ @micahgodbolt # Overlay/ # Panel/ # Persona/ -Persona/PersonaCoin.tsx @mtennoe @jakob101 +Persona/PersonaCoin/ @mtennoe @jakob101 Persona/PersonaConsts.tsx @mtennoe @jakob101 pickers/ @joschect # Pivot/ @@ -105,4 +105,59 @@ TeachingBubble/ @micahgodbolt Toggle/ @phkuo Tooltip/ @micahgodbolt +## Docs +# ActivityItem/docs/ +# Breadcrumb/docs/ +# Button/docs/ +Calendar/docs/ @lorejoh12 @sathi23 +Callout/docs/ @joschect +# Check/docs/ +# Checkbox/docs/ +ChoiceGroup/docs/ @srideshpande +# ColorPicker/docs/ +# ComboBox/docs/ +CommandBar/docs/ @micahgodbolt +ContextualMenu/docs/ @joschect +DatePicker/docs/ @lorejoh12 @sathi23 +# DetailsList/docs/ +# Dialog/docs/ +DocumentCard/docs/ @yiminwu @mikewheaton +# Dropdown/docs/ +# Fabric/docs/ +# FacePile/docs/ +# FocusTrapZone/docs/ +# FocusZone/docs/ +GroupedList/docs/ @aditima +HoverCard/docs/ @atneik @Jahnp +# Icon/docs/ +# Image/docs/ +# Label/docs/ +Layer/docs/ @ThomasMichon +# Link/docs/ +List/docs/ @cschleiden +# MarqueeSelection/docs/ +# MessageBar/docs/ +# Modal/docs/ +# Nav/docs/ +OverflowSet/docs/ @micahgodbolt +# Overlay/docs/ +# Panel/docs/ +# Persona/docs/ +pickers/docs/ @joschect +# Pivot/docs/ +# Popup/docs/ +# ProgressIndicator/docs/ +Rating/docs/ @cschleiden +ResizeGroup/docs/ @micahgodbolt +# SearchBox/docs/ +# Slider/docs/ +# SpinButton/docs/ +# Spinner/docs/ +# SwatchColorPicker/docs/ +TeachingBubble/docs/ @micahgodbolt +# TextField/docs/ +# Theme/docs/ +Toggle/docs/ @phkuo +Tooltip/docs/ @micahgodbolt + diff --git a/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json b/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json new file mode 100644 index 00000000000000..b69537a76d71bf --- /dev/null +++ b/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/example-app-base", + "comment": "Fix code block line-height", + "type": "patch" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json new file mode 100644 index 00000000000000..f5af43aba8c7cf --- /dev/null +++ b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Add opt-in @deprecated comments", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "jordanjanzen@jordanjanzen.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json new file mode 100644 index 00000000000000..6ecf9c2f370ccb --- /dev/null +++ b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Fix deprecated semantic slots returning empty strings", + "type": "patch" + } + ], + "packageName": "@uifabric/styling", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json new file mode 100644 index 00000000000000..b597aadea768ce --- /dev/null +++ b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Convert documentation to markdown for HIG.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json new file mode 100644 index 00000000000000..df2e7a1df91faf --- /dev/null +++ b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Revamp Themes documentation", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jordanjanzen@jordanjanzen.com" +} \ No newline at end of file diff --git a/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx b/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx index f1257e07fadabb..41f471ca4b88bb 100644 --- a/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx +++ b/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx @@ -13,10 +13,11 @@ registerLanguage('typescript', ts); export const rootClass = mergeStyles({ overflowY: 'auto', maxHeight: '400px', + display: 'flex', selectors: { 'code': { fontFamily: 'Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace', - lineHeight: 19 + lineHeight: '1.6' } } }); @@ -28,7 +29,7 @@ export const lineNumberStyle = { display: 'block', borderRight: '1px solid #666', paddingRight: 4, - lineHeight: '19px' + lineHeight: 'inherit', }; export class TypeScriptSnippet extends React.Component { diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx index ad31ba2318ad1f..2f6fb4a34c72cd 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx @@ -22,7 +22,7 @@ export class ActivityItemPage extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx index ae672f5f559e44..e2331ecdc8533e 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; @@ -24,6 +25,7 @@ export class BreadcrumbPage extends React.Component } overview={ -
-

Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.

-

Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md') } + } donts={ -
-
    -
  • Don't use Breadcrumbs as a primary way to navigate an app or site.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md new file mode 100644 index 00000000000000..41d6b2c92cb4ad --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md @@ -0,0 +1 @@ +- Don't use Breadcrumbs as a primary way to navigate an app or site. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md new file mode 100644 index 00000000000000..475b0636fbcd7b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md @@ -0,0 +1 @@ +- Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md new file mode 100644 index 00000000000000..78bbf512689e34 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md @@ -0,0 +1,3 @@ +Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. + +Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx index 37e2643a4a00ca..89e84a86343f3a 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ButtonStatus } from './Button.checklist'; import { ButtonDefaultExample } from './examples/Button.Default.Example'; @@ -18,7 +19,6 @@ import { ButtonSwapExample } from './examples/Button.Swap.Example'; import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.Split.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { Link } from '../../Link'; import * as exampleStylesImport from '../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; @@ -70,8 +70,9 @@ export class ButtonPage extends React.Component } overview={ -
-

Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

-

When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.

-

While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

-

Note that both iconProps and menuIconProps take IIconProps to specify name and type.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Make sure the label conveys a clear purpose of the button to the user.
    • -
  • Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.
    • -
  • Buttons should always include a noun if there is any room for interpretation about what the verb operates on.
    • -
  • Consider the affect localization will have on the button and what will happen to components around it.
    • -
  • If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.
    • -
  • Use only a single line of text in the label of the button.
    • -
  • Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.
    • -
  • Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
    • -
  • "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.
    • -
  • Default buttons should always perform safe operations. For example, a default button should never delete.
    • -
  • Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDos.md') } + } donts={ -
-
    -
  • Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."
    • -
  • Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").
    • -
  • Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
    • -
  • Don’t put too much text in a button - try to keep the length of your text to a minimum.
    • -
  • Don't put anything other than text in a button.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md new file mode 100644 index 00000000000000..28f24d35ced712 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md @@ -0,0 +1,5 @@ +- Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok." +- Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel"). +- Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used. +- Don’t put too much text in a button - try to keep the length of your text to a minimum. +- Don't put anything other than text in a button. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md new file mode 100644 index 00000000000000..e6ad43b773a408 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md @@ -0,0 +1,11 @@ +- Make sure the label conveys a clear purpose of the button to the user. +- Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word. +- Buttons should always include a noun if there is any room for interpretation about what the verb operates on. +- Consider the affect localization will have on the button and what will happen to components around it. +- If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it. +- Use only a single line of text in the label of the button. +- Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions. +- Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds. +- "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons. +- Default buttons should always perform safe operations. For example, a default button should never delete. +- Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md new file mode 100644 index 00000000000000..07e7c69b1a6868 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md @@ -0,0 +1,7 @@ +Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog. + +When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements. + +While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow. + +Note that both iconProps and menuIconProps take IIconProps to specify name and type. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx index bcd33745f2ad7e..02ec95de01f36e 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx @@ -23,6 +23,7 @@ export class ButtonIconExample extends React.Component { title='Emoji' ariaLabel='Emoji' /> +

For a list of Icons, visit our Icon documentation.

); } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx index b3609024692755..3ceb6f92b25eaf 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx @@ -3,7 +3,8 @@ import { ComponentPage, ExampleCard, IComponentDemoPageProps, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { DateRangeType, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar'; import { CalendarButtonExample } from './examples/Calendar.Button.Example'; @@ -20,8 +21,9 @@ export class CalendarPage extends React.Component const today = new Date(Date.now()); return ( @@ -167,40 +169,27 @@ export class CalendarPage extends React.Component /> } overview={ -
-

- The calendar component allows a user to browse through a calendar and pick a date value. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use the control as a single entity.
    • -
  • Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).
    • -
  • The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.
    • -
  • When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.
    • -
  • The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md') } + } donts={ -
-
    -
  • Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.
    • -
  • Don't attempt to force resize the control in any way.
    • -
  • Don't force the control to render one mode vs. the other (year or month/day)
    • -
  • The flyout selector is a light dismiss control. Don't modify this behavior in any way.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md new file mode 100644 index 00000000000000..85f2b8d6247079 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md @@ -0,0 +1,4 @@ +- Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar. +- Don't attempt to force resize the control in any way. +- Don't force the control to render one mode vs. the other (year or month/day) +- The flyout selector is a light dismiss control. Don't modify this behavior in any way. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md new file mode 100644 index 00000000000000..1ce606e7118c01 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md @@ -0,0 +1,5 @@ +- Use the control as a single entity. +- Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference). +- The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate. +- When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly. +- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md new file mode 100644 index 00000000000000..9cf4fbf40ffa9f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md @@ -0,0 +1 @@ +The calendar component allows a user to browse through a calendar and pick a date value. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx index 1ad35f6e42f521..6144c446558794 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx @@ -3,7 +3,8 @@ import { ComponentPage, ExampleCard, IComponentDemoPageProps, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { items } from '../CommandBar/examples/data'; @@ -25,8 +26,9 @@ export class CalloutPage extends React.Component { return ( @@ -54,47 +56,27 @@ export class CalloutPage extends React.Component {
} overview={ -
-

Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.

- -

Use a Callout for displaying additional contextual information about an item on the screen. Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.

- -

Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the iconClassNames.info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary.
    • -
  • Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best.
    • -
  • Do be helpful with the tip text inside of your Callout.
    • -
  • Do limit the information inside of a Callout to supplemental information that users don't have to read.
    • -
  • Callouts should be placed near the object being described, usually at the pointer's tail or head if possible.
    • -
  • When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md') } + } donts={ -
-
    -
  • Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience.
    • -
  • Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming.
    • -
  • Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout.
    • -
  • Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout.
    • -
  • Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration.
    • -
  • Don’t open Callout from within another Callout.
    • -
  • Don’t use Callout to ask the user to confirm an action, use a Dialog instead.
    • -
  • Don’t show Callouts on hidden elements.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md new file mode 100644 index 00000000000000..6520cbea8d16c0 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md @@ -0,0 +1,8 @@ +- Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience. +- Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming. +- Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout. +- Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout. +- Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration. +- Don’t open Callout from within another Callout. +- Don’t use Callout to ask the user to confirm an action, use a Dialog instead. +- Don’t show Callouts on hidden elements. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md new file mode 100644 index 00000000000000..865bc50ab5309b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md @@ -0,0 +1,6 @@ +- Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary. +- Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best. +- Do be helpful with the tip text inside of your Callout. +- Do limit the information inside of a Callout to supplemental information that users don't have to read. +- Callouts should be placed near the object being described, usually at the pointer's tail or head if possible. +- When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md new file mode 100644 index 00000000000000..87e096317a2b53 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md @@ -0,0 +1,5 @@ +Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way. + +Use a Callout for displaying additional contextual information about an item on the screen. Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content. + +Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the iconClassNames.info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx index dad989bd8097fd..e67cde07ec413f 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { CheckboxBasicExample } from './examples/Checkbox.Basic.Example'; import { CheckboxImplementationExamples } from './examples/Checkbox.ImplementationExamples'; @@ -17,8 +18,9 @@ export class CheckboxPage extends React.Component public render() { return ( /> } overview={ -
-

- A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control. -

- -

- A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected. -

- -

- Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement. -

- -

- For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection. -

- -

- Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Allow users to choose any combination of options when several Checkboxes are grouped together.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md') } + } donts={ -
-
    -
  • Don't use a Checkbox as an on/off control. Instead use a toggle switch.
    • -
  • Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead.
    • -
  • Don't put two groups of Checkboxes next to each other. Separate the two groups with labels.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md new file mode 100644 index 00000000000000..e99215b63aee3d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md @@ -0,0 +1,3 @@ +- Don't use a Checkbox as an on/off control. Instead use a toggle switch. +- Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead. +- Don't put two groups of Checkboxes next to each other. Separate the two groups with labels. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md new file mode 100644 index 00000000000000..8d33482977d339 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md @@ -0,0 +1 @@ +- Allow users to choose any combination of options when several Checkboxes are grouped together. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md new file mode 100644 index 00000000000000..74e2b405f59c81 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md @@ -0,0 +1,9 @@ +A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control. + +A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected. + +Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement. + +For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection. + +Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx index d1c26163ae1215..798775ff1eb486 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ChoiceGroupBasicExample } from './examples/ChoiceGroup.Basic.Example'; import { ChoiceGroupCustomExample } from './examples/ChoiceGroup.Custom.Example'; @@ -21,8 +22,9 @@ export class ChoiceGroupPage extends React.Component @@ -49,43 +51,22 @@ export class ChoiceGroupPage extends React.Component } overview={ -
-

- The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group. -

- -

- ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead. -

- -

- If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for "I agree" instead of ChoiceGroup buttons for "I agree" and "I don't agree." -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
    • -
  • Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
    • -
  • List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
    • -
  • If none of the options is a valid choice, add another option to reflect this choice, such as "None" or "Does not apply".
    • -
  • Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option.
    • -
  • Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md') } + } donts={ -
-
    -
  • Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead.
    • -
  • Use if there are more than 7 options, use a Dropdown instead.
    • -
  • Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md new file mode 100644 index 00000000000000..7378ea3aeab40e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md @@ -0,0 +1,3 @@ +- Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead. +- Use if there are more than 7 options, use a Dropdown instead. +- Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md new file mode 100644 index 00000000000000..1d665916a1165b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md @@ -0,0 +1,6 @@ +- Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list. +- Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable. +- List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable. +- If none of the options is a valid choice, add another option to reflect this choice, such as "None" or "Does not apply". +- Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option. +- Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md new file mode 100644 index 00000000000000..5a1e8d0e3bf9b5 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md @@ -0,0 +1,5 @@ +The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group. + +ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead. + +If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for "I agree" instead of ChoiceGroup buttons for "I agree" and "I don't agree." diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx index 458642ae39327c..7be1558913add9 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { CoachmarkBasicExample } from './examples/Coachmark.Basic.Example'; @@ -16,6 +17,7 @@ export class CoachmarkPage extends React.Component @@ -31,35 +33,22 @@ export class CoachmarkPage extends React.Component /> } overview={ -
-

Coachmarks are used to draw a persons attention to a part of the UI, and increase engagement with that element - in the product.

- -

- They should be contextual whenever possible, or related to something that will make existing user flows more efficient -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Only one coachmark + callout combo will be displayed at a time
    • -
  • Coachmarks can be stand alone or sequential. Sequential coachmarks should be used sparingly, to walk through complex - multi-step interactions. It is recommended that a sequence of coachmakrs does not exceed 3 steps.
    • -
  • Coachmarks are designed to only hold Callouts.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md') } + } donts={ -
-
    -
  • Coachmark size, color, and animation should not be altered.
    • -
  • Don't show the coachmark more than once even if the user has not completed the action.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } /> diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md new file mode 100644 index 00000000000000..8e3f583b0ce98f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md @@ -0,0 +1,2 @@ +- Coachmark size, color, and animation should not be altered. +- Don't show the coachmark more than once even if the user has not completed the action. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md new file mode 100644 index 00000000000000..e633c88b6505b0 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md @@ -0,0 +1,3 @@ +- Only one coachmark + callout combo will be displayed at a time +- Coachmarks can be stand alone or sequential. Sequential coachmarks should be used sparingly, to walk through complex multi-step interactions. It is recommended that a sequence of coachmakrs does not exceed 3 steps. +- Coachmarks are designed to only hold Callouts. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md new file mode 100644 index 00000000000000..c498d3cc459ceb --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md @@ -0,0 +1,4 @@ +Coachmarks are used to draw a persons attention to a part of the UI, and increase engagement with that element +in the product. + +They should be contextual whenever possible, or related to something that will make existing user flows more efficient diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx index f03942c79b580f..5ef55148eb49de 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ColorPickerBasicExample } from './examples/ColorPicker.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; @@ -17,6 +18,7 @@ export class ColorPickerPage extends React.Component } overview={ -
ColorPicker is used to allow a user to select a color
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md b/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md new file mode 100644 index 00000000000000..1bb98d4569d95c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md @@ -0,0 +1 @@ +ColorPicker is used to allow a user to select a color. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx index 5ef42f2043090c..4417240e41de04 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ComboBoxBasicExample } from './examples/ComboBox.Basic.Example'; import { ComboBoxCustomStyledExample } from './examples/ComboBox.CustomStyled.Example'; @@ -19,6 +20,7 @@ export class ComboBoxPage extends React.Component { @@ -38,26 +40,22 @@ export class ComboBoxPage extends React.Component { /> } overview={ -
-

- A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a ComboBox when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.
    • -
  • ComboBoxs contain shortened statements or words.
    • -
  • Use a ComboBox when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md') } + } donts={ -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md new file mode 100644 index 00000000000000..a36e5f39639a4d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md new file mode 100644 index 00000000000000..f610e8facabd7d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md @@ -0,0 +1,3 @@ +- Use a ComboBox when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained. +- ComboBoxs contain shortened statements or words. +- Use a ComboBox when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options). \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md new file mode 100644 index 00000000000000..447c617239e24f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md @@ -0,0 +1 @@ +A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx index e8ec7b2d848022..c9a6b62c966e9e 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { items, overflowItems, farItems } from './examples/data'; import { CommandBarBasicExample } from './examples/CommandBar.Basic.Example'; @@ -22,12 +23,13 @@ export class CommandBarPage extends React.Component return ( - + @@ -46,45 +48,27 @@ export class CommandBarPage extends React.Component /> } overview={ -
-

- CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions. -

-

- Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse. -

-

- All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Sort commands in order of importance from left to right or right to left depending on the culture.
    • -
  • Organize commands into logical groupings.
    • -
  • Display no more than 5-7 commands.
    • -
  • Use overflow to house less frequently-used commands.
    • -
  • In small breakpoints, only have the most recognizable commands render as icon only.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md') } + } donts={ -
-
    -
  • Fill the command bar completely from left to right.
    • -
  • Use icons only for commands in larger widths.
    • -
  • Display more than 2-3 items on the right side of the bar (or left side in left to right experiences).
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md new file mode 100644 index 00000000000000..f955732f340005 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md @@ -0,0 +1,3 @@ +- Fill the command bar completely from left to right. +- Use icons only for commands in larger widths. +- Display more than 2-3 items on the right side of the bar (or left side in left to right experiences). \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md new file mode 100644 index 00000000000000..d78a921b03f729 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md @@ -0,0 +1,5 @@ +- Sort commands in order of importance from left to right or right to left depending on the culture. +- Organize commands into logical groupings. +- Display no more than 5-7 commands. +- Use overflow to house less frequently-used commands. +- In small breakpoints, only have the most recognizable commands render as icon only. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md new file mode 100644 index 00000000000000..7ee4004822b8f8 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md @@ -0,0 +1,5 @@ +CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions. + +Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse. + +All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown. diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx index eee454bb403db5..93b82caa1e7cb7 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { ContextualMenuBasicExample } from './examples/ContextualMenu.Basic.Example'; import { ContextualMenuIconExample } from './examples/ContextualMenu.Icon.Example'; @@ -35,6 +36,7 @@ export class ContextualMenuPage extends React.Component } overview={ -
-

- ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places. -

-

- There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons. -

-

- Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use to display commands.
    • -
  • Divide groups of commands with rules.
    • -
  • Use selection checks without icons.
    • -
  • Provide submenus for sets of related commands that aren’t as critical as others.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md') } + } donts={ -
-
    -
  • Use them to display content.
    • -
  • Show commands as one large group.
    • -
  • Mix checks and icons.
    • -
  • Create submenus of submenus.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md new file mode 100644 index 00000000000000..20c116b591dcea --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md @@ -0,0 +1,4 @@ +- Use them to display content. +- Show commands as one large group. +- Mix checks and icons. +- Create submenus of submenus. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md new file mode 100644 index 00000000000000..bd79da4125bfa5 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md @@ -0,0 +1,4 @@ +- Use to display commands. +- Divide groups of commands with rules. +- Use selection checks without icons. +- Provide submenus for sets of related commands that aren’t as critical as others. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md new file mode 100644 index 00000000000000..5fe6dc43f8b9a6 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md @@ -0,0 +1,5 @@ +ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places. + +There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons. + +Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember. diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx index a0fff0cacf66a0..e04da9d32ac49e 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx @@ -3,7 +3,8 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, - PropertiesTableSet + PropertiesTableSet, + PageMarkdown, } from '@uifabric/example-app-base'; import { DatePickerBasicExample } from './examples/DatePicker.Basic.Example'; import { DatePickerWeekNumbersExample } from './examples/DatePicker.WeekNumbers.Example'; @@ -29,6 +30,7 @@ export class DatePickerPage extends React.Component @@ -59,40 +61,27 @@ export class DatePickerPage extends React.Component /> } overview={ -
-

- The DatePicker component enables a user to pick a date value. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use the control as a single entity.
    • -
  • Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).
    • -
  • The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.
    • -
  • When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.
    • -
  • The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md') } + } donts={ -
-
    -
  • Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.
    • -
  • Don't attempt to force resize the control in any way.
    • -
  • Don't force the control to render one mode vs. the other (year or month/day)
    • -
  • The flyout selector is a light dismiss control. Don't modify this behavior in any way.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md new file mode 100644 index 00000000000000..85f2b8d6247079 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md @@ -0,0 +1,4 @@ +- Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar. +- Don't attempt to force resize the control in any way. +- Don't force the control to render one mode vs. the other (year or month/day) +- The flyout selector is a light dismiss control. Don't modify this behavior in any way. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md new file mode 100644 index 00000000000000..171ad514160e0d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md @@ -0,0 +1,5 @@ +- Use the control as a single entity. +- Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference). +- The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate. +- When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly. +- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md new file mode 100644 index 00000000000000..4a3478a0cfe812 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md @@ -0,0 +1 @@ +The DatePicker component enables a user to pick a date value. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx index 2dad5a197e3a6c..0f78bf6e5b5b2b 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; @@ -45,6 +46,7 @@ export class DetailsListPage extends React.Component @@ -87,44 +89,27 @@ export class DetailsListPage extends React.Component } overview={ -
-

- DetailsList is a derivative of the List component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse. -

-

- Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison. -

-

- DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column’s data. If there are multiple lines of text in a column, consider the variable row height variant. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use them to display content.
    • -
  • Provide useful columns of metadata.
    • -
  • Display columns in order of importance left to right or right to left depending on the standards of the culture.
    • -
  • Give columns ample default width to display information.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md') } + } donts={ -
-
    -
  • Use them to display commands or settings.
    • -
  • Overload the view with too many columns that require excessive horizontal scrolling.
    • -
  • Make columns so narrow that it truncates the information in typical cases.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md new file mode 100644 index 00000000000000..ed191105f1ba01 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md @@ -0,0 +1,3 @@ +- Use them to display commands or settings. +- Overload the view with too many columns that require excessive horizontal scrolling. +- Make columns so narrow that it truncates the information in typical cases. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md new file mode 100644 index 00000000000000..6aceae28160a1f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md @@ -0,0 +1,4 @@ +- Use them to display content. +- Provide useful columns of metadata. +- Display columns in order of importance left to right or right to left depending on the standards of the culture. +- Give columns ample default width to display information. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md new file mode 100644 index 00000000000000..0cac7623ae5283 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md @@ -0,0 +1,5 @@ +DetailsList is a derivative of the List component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse. + +Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison. + +DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column’s data. If there are multiple lines of text in a column, consider the variable row height variant. diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx index a7fd2c7b80515e..fd619d2056bc10 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { DialogBasicExample } from './examples/Dialog.Basic.Example'; @@ -21,6 +22,7 @@ export class DialogPage extends React.Component { @@ -48,43 +50,27 @@ export class DialogPage extends React.Component { /> } overview={ -
-

- Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information.
    • -
  • When possible, try a non-blocking Dialog before resorting to a blocking Dialog.
    • -
  • Only include information needed to help users make a decision.
    • -
  • Button text should reflect the actions available to the user (e.g. save, delete).
    • -
  • Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md') } + } donts={ -
-
    -
  • Don’t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience.
    • -
  • Avoid "Are you sure?" or confirmation Dialogs unless the user is making an irreversible or destructive choice.
    • -
  • Do not use a blocking Dialog unless absolutely necessary because they are very disruptive.
    • -
  • Don’t have long sentences or complicated choices.
    • -
  • Avoid generic button labels like "Ok" if you can be more specific about the action a user is about to complete.
    • -
  • Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state.
    • -
  • Don't provide the user with more than 3 buttons.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md new file mode 100644 index 00000000000000..23820e70744aab --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md @@ -0,0 +1,7 @@ +- Don’t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience. +- Avoid "Are you sure?" or confirmation Dialogs unless the user is making an irreversible or destructive choice. +- Do not use a blocking Dialog unless absolutely necessary because they are very disruptive. +- Don’t have long sentences or complicated choices. +- Avoid generic button labels like "Ok" if you can be more specific about the action a user is about to complete. +- Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state. +- Don't provide the user with more than 3 buttons. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md new file mode 100644 index 00000000000000..6d594c3a4f855b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md @@ -0,0 +1,5 @@ +- Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information. +- When possible, try a non-blocking Dialog before resorting to a blocking Dialog. +- Only include information needed to help users make a decision. +- Button text should reflect the actions available to the user (e.g. save, delete). +- Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md new file mode 100644 index 00000000000000..1ab5ac6894b767 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md @@ -0,0 +1 @@ +Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx b/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx index 01f777e885cc61..f15ecf73f1a6c8 100644 --- a/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { VerticalDividerBasicExample } from './examples/VerticalDivider.Basic.Example'; @@ -20,6 +21,7 @@ export class DividerPage extends React.Component { @@ -38,47 +40,30 @@ export class DividerPage extends React.Component { /> } overview={ -
-

- A Divider is a line that is used to visually differentiate different parts of a UI. They are commonly used in headers and command bars. This divider automatically center algins itself within the parent container and can be customized to be shown in different heights and colors. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md') } + } bestPractices={ -
-

- Use a divider component to show a sectional or continuity change in the content between two blocks of information. The spacing around the divider is generally determined by the content surrounding it. -

-

- There are two recommended divider color combinations: -

    -
  1. #C8C8C8/neutralTertiaryAlt divider when used within an #F4F4F4/neutralLighter layout
    2. -
  2. #EAEAEA/neutralLight divider when used within an #FFFFFF/white layout
    3. -
-

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md') } + } dos={ -
-
    -
  • Use a divider to separate sections that may not otherwise have a clear beginning or end.
    • -
  • Use a divider to separate information blocks where the context or continuity changes between the blocks.
    • -
  • When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use role="presentation".
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerDos.md') } + } donts={ -
-
    -
  • Do not use dividers for graphic decoration.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md new file mode 100644 index 00000000000000..7adf00e231ba11 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md @@ -0,0 +1,6 @@ +Use a divider component to show a sectional or continuity change in the content between two blocks of information. The spacing around the divider is generally determined by the content surrounding it. + +There are two recommended divider color combinations: + +1. #C8C8C8/neutralTertiaryAlt divider when used within an #F4F4F4/neutralLighter layout +1. #EAEAEA/neutralLight divider when used within an #FFFFFF/white layout \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md new file mode 100644 index 00000000000000..93d2dfb5889d07 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md @@ -0,0 +1 @@ +- Do not use dividers for graphic decoration. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md new file mode 100644 index 00000000000000..a5d8dd0e7a369a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md @@ -0,0 +1,3 @@ +- Use a divider to separate sections that may not otherwise have a clear beginning or end. +- Use a divider to separate information blocks where the context or continuity changes between the blocks. +- When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use role="presentation". \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md new file mode 100644 index 00000000000000..556c7e711f1913 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md @@ -0,0 +1 @@ +A Divider is a line that is used to visually differentiate different parts of a UI. They are commonly used in headers and command bars. This divider automatically center algins itself within the parent container and can be customized to be shown in different heights and colors. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx index 11dd49b7b1862f..0fd46157f885fd 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { DocumentCardBasicExample } from './examples/DocumentCard.Basic.Example'; @@ -21,6 +22,7 @@ export class DocumentCardPage extends React.Component @@ -54,31 +56,22 @@ export class DocumentCardPage extends React.Component } overview={ -
-

- A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user’s most trending document.
    • -
  • Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document’s latest changes, or about the document’s popularity, as you see fit.
    • -
  • Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md') } + } donts={ -
-
    -
  • Don’t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata.
    • -
  • Don’t use the DocumentCard if space is at a premium or you can’t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like “Share” buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md new file mode 100644 index 00000000000000..91e89379f28c2b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md @@ -0,0 +1,2 @@ +- Don’t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata. +- Don’t use the DocumentCard if space is at a premium or you can’t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like “Share” buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md new file mode 100644 index 00000000000000..78f202920bc2be --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md @@ -0,0 +1,3 @@ +- Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user’s most trending document. +- Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document’s latest changes, or about the document’s popularity, as you see fit. +- Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md new file mode 100644 index 00000000000000..938cdc0ee0b819 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md @@ -0,0 +1 @@ +A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index 66cba6b8feecd4..71cebc5b8ca5ea 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -34,6 +34,7 @@ $DropDown-item-height: 32px; @include ms-font-m; color: $ms-color-neutralPrimary; + height: $DropDown-height; position: relative; outline: 0; user-select: none; @@ -149,7 +150,7 @@ $DropDown-item-height: 32px; border: 1px solid $ms-color-neutralTertiary; cursor: pointer; display: block; - height: $DropDown-height; + height: 100%; line-height: $DropDown-height - 2px; // height minus the border @include padding(0, $DropDown-height, 0, 12px); position: relative; diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx index f7ffc94d031b4b..7ee6ef7ef9cf83 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { DropdownBasicExample } from './examples/Dropdown.Basic.Example'; @@ -21,6 +22,7 @@ export class DropdownPage extends React.Component { { /> } overview={ -
-

- A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.
    • -
  • Dropdowns contain shortened statements or words.
    • -
  • Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md') } + } donts={ -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md new file mode 100644 index 00000000000000..b08d6752b763d2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md new file mode 100644 index 00000000000000..77e8c0749db6bb --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md @@ -0,0 +1,3 @@ +- Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained. +- Dropdowns contain shortened statements or words. +- Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options). \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md new file mode 100644 index 00000000000000..c88e66c0bce7ec --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md @@ -0,0 +1 @@ +A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx index 816ddf578e3f7f..32ac5930d7640e 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { FacepileAddFaceExample } from './examples/Facepile.AddFace.Example'; @@ -22,6 +23,7 @@ export class FacepilePage extends React.Component { @@ -43,65 +45,27 @@ export class FacepilePage extends React.Component { /> } overview={ -
-

- The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow. -

- -

Adding people

-

- The component can include an add button which can be used for quickly adding a person to the list. -

- -

Empty state

-

- The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list. -

- -

One person

-

- When there is only one person in the Facepile, consider using their name next to the face or initials. -

- -

Expanding the list when there is no overflow

- -

- When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas. -

- -

Overflow

- -

- When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas. -

- -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use if looking for a way to represent who has access to an area and need to show that as a people representation.
    • -
  • Only show the Add button if a user has access to do so.
    • -
  • Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md') } + } donts={ -
-
    -
  • Use for things other than people.
    • -
  • Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list.
    • -
  • Don’t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md new file mode 100644 index 00000000000000..3b134de7609698 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md @@ -0,0 +1,3 @@ +- Use for things other than people. +- Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list. +- Don’t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md new file mode 100644 index 00000000000000..450077a4d2a137 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md @@ -0,0 +1,3 @@ +- Use if looking for a way to represent who has access to an area and need to show that as a people representation. +- Only show the Add button if a user has access to do so. +- Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md new file mode 100644 index 00000000000000..0a6d45d803c7b4 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md @@ -0,0 +1,21 @@ +The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow. + +## Adding people + +The component can include an add button which can be used for quickly adding a person to the list. + +## Empty state + +The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list. + +## One person + +When there is only one person in the Facepile, consider using their name next to the face or initials. + +## Expanding the list when there is no overflow + +When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas. + +## Overflow + +When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx index 3eaa6ec90c340a..849002054b65db 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx @@ -6,6 +6,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import FocusTrapZoneBoxExample from './examples/FocusTrapZone.Box.Example'; @@ -26,6 +27,7 @@ export class FocusTrapZonePage extends React.Component @@ -51,10 +53,9 @@ export class FocusTrapZonePage extends React.Component } overview={ -
- FocusTrapZone - is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone. -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } /> diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md b/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md new file mode 100644 index 00000000000000..33b632403e555e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md @@ -0,0 +1 @@ +FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index 7443be6a2b82c0..76eae2de7ad3a4 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example'; @@ -21,6 +22,7 @@ export class FocusZonePage extends React.Component @@ -46,11 +48,9 @@ export class FocusZonePage extends React.Component /> } overview={ -
-

FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current "active" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element.

- -

Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } /> diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md b/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md new file mode 100644 index 00000000000000..f622f7eafcb24b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md @@ -0,0 +1,3 @@ +FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current "active" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element. + +Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx index df8228539ddb0a..7df41177b6cce7 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { GroupedListBasicExample } from './examples/GroupedList.Basic.Example'; @@ -19,6 +20,7 @@ export class GroupedListPage extends React.Component @@ -37,12 +39,14 @@ export class GroupedListPage extends React.Component } overview={ -

Allows you to render a set of items as multiple lists with various grouping properties.

+ + { require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md b/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md new file mode 100644 index 00000000000000..3fe7044a88a779 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md @@ -0,0 +1 @@ +Allows you to render a set of items as multiple lists with various grouping properties. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx index 20eff65a396328..a518cb1af47000 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { HoverCardBasicExample } from './examples/HoverCard.Basic.Example'; @@ -22,6 +23,7 @@ export class HoverCardPage extends React.Component @@ -42,9 +44,9 @@ export class HoverCardPage extends React.Component /> } overview={ -
-

HoverCards supplement content associated with a specific data element.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md') } + } componentStatus={ { @@ -48,30 +50,22 @@ export class IconPage extends React.Component { /> } overview={ -
-

- In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Adjust to proper size to highlight importance but not occupying too much space.
    • -
  • Be simple and concise.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconDos.md') } + } donts={ -
-
    -
  • Use Icons to show pictures.
    • -
  • Use photos or long sentences as icons.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md new file mode 100644 index 00000000000000..6bd5aeb9603c0f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md @@ -0,0 +1,2 @@ +- Use Icons to show pictures. +- Use photos or long sentences as icons. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md new file mode 100644 index 00000000000000..6b47d1a010ea1c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md @@ -0,0 +1,2 @@ +- Adjust to proper size to highlight importance but not occupying too much space. +- Be simple and concise. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md new file mode 100644 index 00000000000000..3b1789c9c78023 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md @@ -0,0 +1,3 @@ +In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo. + +For a list of Icons, visit our Icon documentation. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx index d09b82965ceb22..61a4c05ed5ddf3 100644 --- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import './ImagePage.scss'; @@ -28,6 +29,7 @@ export class ImagePage extends React.Component { @@ -60,33 +62,22 @@ export class ImagePage extends React.Component { /> } overview={ -
- Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame. -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • - Provide descriptive values for the alt text attribute for all images. - If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page. -
      -
    • Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well.
      • -
    • Make the description brief but accurate. Use one sentence, two at the most.
      • -
    -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageDos.md') } + } donts={ -
-
    -
  • Repeat information in your alt text that is already on the page. Don't use "image of" or "graphic of" to describe it, as that is already apparent to the reader.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md new file mode 100644 index 00000000000000..81f37145e1ee60 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md @@ -0,0 +1 @@ +- Repeat information in your alt text that is already on the page. Don't use "image of" or "graphic of" to describe it, as that is already apparent to the reader. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md new file mode 100644 index 00000000000000..0a42ddaf626b4b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md @@ -0,0 +1,4 @@ +- Provide descriptive values for the alt text attribute for all images. +If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page. + - Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well. + - Make the description brief but accurate. Use one sentence, two at the most. diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md new file mode 100644 index 00000000000000..33c14c2dd74deb --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md @@ -0,0 +1 @@ +Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx index 0a4a56da9b28e2..4c5b6b079cbcb3 100644 --- a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { LabelBasicExample } from './examples/Label.Basic.Example'; @@ -17,6 +18,7 @@ export class LabelPage extends React.Component { @@ -31,31 +33,22 @@ export class LabelPage extends React.Component { /> } overview={ -
-

- Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use sentence casing, e.g. “First name”.
    • -
  • Be short and concise.
    • -
  • When adding a Label to components, use the text as a noun or short noun phrase.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelDos.md') } + } donts={ -
-
    -
  • Use Labels as instructional text, e.g. “Click to get started”.
    • -
  • Don’t use full sentences or complex punctuation (colons, semicolons, etc.).
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md new file mode 100644 index 00000000000000..33370b8e68f5d0 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md @@ -0,0 +1,2 @@ +- Use Labels as instructional text, e.g. “Click to get started”. +- Don’t use full sentences or complex punctuation (colons, semicolons, etc.). \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md new file mode 100644 index 00000000000000..7269633705a337 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md @@ -0,0 +1,3 @@ +- Use sentence casing, e.g. “First name”. +- Be short and concise. +- When adding a Label to components, use the text as a noun or short noun phrase. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md new file mode 100644 index 00000000000000..7cbdb2ed43e853 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md @@ -0,0 +1 @@ +Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx index e36eb289ae95fd..7d9ce8a6502ad9 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { LayerBasicExample } from './examples/Layer.Basic.Example'; @@ -22,6 +23,7 @@ export class LayerPage extends React.Component { @@ -43,37 +45,22 @@ export class LayerPage extends React.Component { /> } overview={ -
-

- A Layer is a technical component that does not have specific Design guidance. -

-

- { `Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by "overflow: hidden" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else.` } -

-

{ - `There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs ( ref={ (el) => { this._root = el; } ) rather than string refs ( ref='root' ). Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.` - }

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • { - 'Use functional refs ( ref={ (el) => { this._root = el; } ).' - } -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerDos.md') } + } donts={ -
-
    -
  • { 'Don\'t use string refs ( ref=\'root\' ).' }
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md new file mode 100644 index 00000000000000..ddf4a091d5b6d4 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md @@ -0,0 +1 @@ +- Don't use string refs `ref='root'`. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md new file mode 100644 index 00000000000000..e0e00837259504 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md @@ -0,0 +1 @@ +- Use functional refs `ref={ (el) => { this._root = el; }`. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md new file mode 100644 index 00000000000000..cb8eb333474891 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md @@ -0,0 +1,5 @@ +A Layer is a technical component that does not have specific Design guidance. + +Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by "overflow: hidden" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else. + +There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs `ref={ (el) => { this._root = el; }` rather than string refs `ref='root'`. Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx index 86e45618b070be..52ddba47aae29f 100644 --- a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { LinkBasicExample } from './examples/Link.Basic.Example'; @@ -17,6 +18,7 @@ export class LinkPage extends React.Component { @@ -32,37 +34,22 @@ export class LinkPage extends React.Component { /> } overview={ -
-

- With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter. -

- -

- A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option.
    • -
  • Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links.
    • -
  • Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip.
    • -
  • Use text that suggests clicking, such as a command starting with an imperative verb like "Show", "Print", "Copy", or "Delete".
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkDos.md') } + } donts={ -
-
    -
  • - Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences. -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md new file mode 100644 index 00000000000000..8209bbe334a41e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md @@ -0,0 +1 @@ +- Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences. diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md new file mode 100644 index 00000000000000..d868102317df76 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md @@ -0,0 +1,4 @@ +- Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option. +- Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links. +- Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip. +- Use text that suggests clicking, such as a command starting with an imperative verb like "Show", "Print", "Copy", or "Delete". \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md new file mode 100644 index 00000000000000..405f318bc8740d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md @@ -0,0 +1,3 @@ +With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter. + +A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design. diff --git a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx index 8f9ba43d51e08f..321127ea84071c 100644 --- a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ListBasicExample } from './examples/List.Basic.Example'; @@ -32,6 +33,7 @@ export class ListPage extends React.Component { @@ -57,17 +59,9 @@ export class ListPage extends React.Component { /> } overview={ -
-

- List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately. -

-

- Performance is important, and DOM content is expensive. Therefore limit what you render. Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive. -

-

- Lists break down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/List/docs/ListOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md new file mode 100644 index 00000000000000..8ddcc1743928c3 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md @@ -0,0 +1,5 @@ +List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately. + +**Performance is important, and DOM content is expensive. Therefore limit what you render.** Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive. + +Lists break down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about. diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx index d1e497e7ba5cbc..69106ca199d718 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { ExampleCard, ComponentPage, + PageMarkdown, IComponentDemoPageProps } from '@uifabric/example-app-base'; @@ -15,28 +16,16 @@ export class MarqueeSelectionPage extends React.Component } overview={ -
-

- The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around - items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state. -

-

- MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges. -

-

- When a selection rectangle is dragged, we look for elements with the data-selection-index attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately. -

-

- In virtualization cases where items that were once selected are dematerialized, we will keep the item in its - previous state until we know definitively if it's on/off. (In other words, this works with List.) -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } /> diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md b/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md new file mode 100644 index 00000000000000..2a3b08b9fe6199 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md @@ -0,0 +1,9 @@ +The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around +items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state. + +MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges. + +When a selection rectangle is dragged, we look for elements with the **data-selection-index** attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately. + +In virtualization cases where items that were once selected are dematerialized, we will keep the item in its +previous state until we know definitively if it's on/off. (In other words, this works with List.) diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx index c8ad8e9461a731..9d432d240bfbf2 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { MessageBarBasicExample } from './examples/MessageBar.Basic.Example'; @@ -17,6 +18,7 @@ export class MessageBarPage extends React.Component /> } overview={ -
-

- A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location.
    • -
  • Keep the text very brief. Be succinct and your users are more likely to read everything you say.
    • -
  • Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length.
    • -
  • Use the right variant for the type and urgency of the particular message (see variants)
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md') } + } donts={ -
-
    -
  • Don’t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user’s main content too low on the view.
    • -
  • Don’t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single ”hero” action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged. -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md new file mode 100644 index 00000000000000..c6395569d1846e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md @@ -0,0 +1,2 @@ +- Don’t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user’s main content too low on the view. +- Don’t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single ”hero” action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged. diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md new file mode 100644 index 00000000000000..e81210d598b05b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md @@ -0,0 +1,4 @@ +- Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location. +- Keep the text very brief. Be succinct and your users are more likely to read everything you say. +- Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length. +- Use the right variant for the type and urgency of the particular message (see variants) \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md new file mode 100644 index 00000000000000..b7ecf68c232b5c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md @@ -0,0 +1 @@ +A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx index 2e9c33c7742fe2..c30d1cf9098486 100644 --- a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx @@ -3,6 +3,7 @@ import { ComponentPage, ExampleCard, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { Link } from 'office-ui-fabric-react/lib/Link'; @@ -18,6 +19,7 @@ export class ModalPage extends React.Component { @@ -33,37 +35,27 @@ export class ModalPage extends React.Component { /> } overview={ -
-

- Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content. -

-

- For usage requiring a quick choice from the user, Dialog may be a more appropriate control. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use Modals for actionable interactions, such as needing the user to provide information or change settings.
    • -
  • When possible, try a non-blocking Modal before resorting to a blocking Modal.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalDos.md') } + } donts={ -
-
    -
  • Don’t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md new file mode 100644 index 00000000000000..55106e03d7405f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md @@ -0,0 +1 @@ +- Don’t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md new file mode 100644 index 00000000000000..45af682a258336 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md @@ -0,0 +1,2 @@ +- Use Modals for actionable interactions, such as needing the user to provide information or change settings. +- When possible, try a non-blocking Modal before resorting to a blocking Modal. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md new file mode 100644 index 00000000000000..c83f71cbf1a210 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md @@ -0,0 +1,3 @@ +Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content. + +For usage requiring a quick choice from the user, Dialog may be a more appropriate control. diff --git a/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx b/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx index 92bd70d1a9d991..a2a434497ba6d4 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { NavBasicExample } from './examples/Nav.Basic.Example'; @@ -23,6 +24,7 @@ export class NavPage extends React.Component { @@ -47,38 +49,27 @@ export class NavPage extends React.Component { /> } overview={ -
-

- Navs (also called "left nav" or "navigation pane") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on.
    • -
  • Keep the names of the navigation items brief and clear, rather than trying to be overly specific.
    • -
  • Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. “Files”), others as adjectives (“Shared”). Use what makes sense for users, and keep it short!
    • -
  • Try to keep your app’s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them.
    • -
  • UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavDos.md') } + } donts={ -
-
    -
  • Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much.
    • -
  • Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md new file mode 100644 index 00000000000000..11c5e84cb4a8d2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md @@ -0,0 +1,2 @@ +- Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much. +- Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md new file mode 100644 index 00000000000000..f78fdfc189c63f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md @@ -0,0 +1,5 @@ +- Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on. +- Keep the names of the navigation items brief and clear, rather than trying to be overly specific. +- Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. “Files”), others as adjectives (“Shared”). Use what makes sense for users, and keep it short! +- Try to keep your app’s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them. +- UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md new file mode 100644 index 00000000000000..ff696fb9a20187 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md @@ -0,0 +1 @@ +Navs (also called "left nav" or "navigation pane") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx index c003673055fb11..79bd52081d31de 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { OverflowSetCustomExample } from './examples/OverflowSet.Custom.Example'; @@ -22,13 +23,11 @@ export class OverflowSetPage extends React.Component -

- The OverflowSet is a flexible container component that is useful for displaying a primary set of content with additional content in an overflow callout. - Note that the example below is only an example of how to render the component, not a specific use case. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md') } + } exampleCards={ @@ -52,7 +51,7 @@ export class OverflowSetPage extends React.Component } isHeaderVisible={ this.props.isHeaderVisible } diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md b/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md new file mode 100644 index 00000000000000..e1c3374a3e46b5 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md @@ -0,0 +1 @@ +The OverflowSet is a flexible container component that is useful for displaying a primary set of content with additional content in an overflow callout. Note that the example below is only an example of how to render the component, not a specific use case. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx index 56b3d0c1ffaf65..2b6f91ac1c1802 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { OverlayDarkExample } from './examples/Overlay.Dark.Example'; @@ -19,6 +20,7 @@ export class OverlayPage extends React.Component { @@ -38,29 +40,22 @@ export class OverlayPage extends React.Component { /> } overview={ -
-

- Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a dark Overlay with a first-run experience.
    • -
  • Use a white Overlay for dialogs and panels.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md') } + } donts={ -
-
    -
  • Use an Overlay when you want the user to interact with the UI that is being covered.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md new file mode 100644 index 00000000000000..ea35603f5308a8 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md @@ -0,0 +1 @@ +- Use an Overlay when you want the user to interact with the UI that is being covered. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md new file mode 100644 index 00000000000000..aa2ae083c7b7ec --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md @@ -0,0 +1,2 @@ +- Use a dark Overlay with a first-run experience. +- Use a white Overlay for dialogs and panels. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md new file mode 100644 index 00000000000000..c20c1418e663a2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md @@ -0,0 +1 @@ +Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx index 11921546e8e4d8..890cab45b5ac21 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { PanelSmallRightExample } from './examples/Panel.SmallRight.Example'; @@ -42,6 +43,7 @@ export class PanelPage extends React.Component { @@ -93,45 +95,27 @@ export class PanelPage extends React.Component { /> } overview={ -
-

- Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel. -

- -

Examples of experiences that use Panels

- -
    -
  • Member or group list creation or management
    • -
  • Document list creation or management
    • -
  • Permissions creation or management
    • -
  • Settings creation or management
    • -
  • Multi-field forms
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use for self-contained experiences where the user does not need to interact with the app view to complete the task.
    • -
  • Use for complex creation, edit or management experiences.
    • -
  • Consider how the panel and its contained contents will scale across Fabric’s responsive web breakpoints.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDos.md') } + } donts={ -
-
    -
  • Use for experiences where the user needs to interact with the app view.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md new file mode 100644 index 00000000000000..ff26f72a43a527 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md @@ -0,0 +1 @@ +- Use for experiences where the user needs to interact with the app view. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md new file mode 100644 index 00000000000000..5772bada9a91dd --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md @@ -0,0 +1,3 @@ +- Use for self-contained experiences where the user does not need to interact with the app view to complete the task. +- Use for complex creation, edit or management experiences. +- Consider how the panel and its contained contents will scale across Fabric’s responsive web breakpoints. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md new file mode 100644 index 00000000000000..b658e5f59ec849 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md @@ -0,0 +1,9 @@ +Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel. + +## Examples of experiences that use Panels + +- Member or group list creation or management +- Document list creation or management +- Permissions creation or management +- Settings creation or management +- Multi-field forms \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx index b318f55c8012ad..f1cabc00a92264 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { PersonaInitialsExample } from './examples/Persona.Initials.Example'; @@ -25,6 +26,7 @@ export class PersonaPage extends React.Component { @@ -53,31 +55,22 @@ export class PersonaPage extends React.Component { /> } overview={ -
-

- Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use Size 24 Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations.
    • -
  • Use Size 32 Persona in text fields in edit mode.
    • -
  • Use Size 32, Size 40, and Size 48 Personas in menus and list views.
    • -
  • Use Size 72 and Size 100 Personas in profile cards and views.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md') } + } donts={ -
-
    -
  • Change the values of the color swatches in high contrast mode.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md new file mode 100644 index 00000000000000..ca3763b7b1e261 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md @@ -0,0 +1 @@ +- Change the values of the color swatches in high contrast mode. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md new file mode 100644 index 00000000000000..d062adb79ed5f2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md @@ -0,0 +1,4 @@ +- Use Size 24 Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations. +- Use Size 32 Persona in text fields in edit mode. +- Use Size 32, Size 40, and Size 48 Personas in menus and list views. +- Use Size 72 and Size 100 Personas in profile cards and views. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md new file mode 100644 index 00000000000000..10ba58c6958d54 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md @@ -0,0 +1 @@ +Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx index 37c8c6a06ad37b..f19ad9ce968951 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { PivotBasicExample } from './examples/Pivot.Basic.Example'; @@ -35,6 +36,7 @@ export class PivotPage extends React.Component { @@ -79,43 +81,22 @@ export class PivotPage extends React.Component { /> } overview={ -
-

- The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content. -

- -
    -
  • Tapping on a pivot item header navigates to that header's section content.
    • -
  • Swiping left or right on a pivot item header navigates to the adjacent section.
    • -
  • Swiping left or right on section content navigates to the adjacent section.
    • -
  • Pivots are stationary when all pivot headers fit within the allowed space.
    • -
  • Pivots carousel when all pivot headers don't fit within the allowed space.
    • -
- -

- Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use on content-heavy pages that require a significant amount of scrolling to access the various sections.
    • -
  • Be concise on the navigation labels, ideally one or two words rather than a phrase.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md') } + } donts={ -
-
    -
  • Don’t use on pages which doesn’t scroll.
    • -
  • Don’t use the Pivot to link to a new page.
    • -
  • Don’t use the Pivot to link to hidden content.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md new file mode 100644 index 00000000000000..6915a809d8159c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md @@ -0,0 +1,3 @@ +- Don’t use on pages which doesn’t scroll. +- Don’t use the Pivot to link to a new page. +- Don’t use the Pivot to link to hidden content. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md new file mode 100644 index 00000000000000..759f4498948c6c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md @@ -0,0 +1,2 @@ +- Use on content-heavy pages that require a significant amount of scrolling to access the various sections. +- Be concise on the navigation labels, ideally one or two words rather than a phrase. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md new file mode 100644 index 00000000000000..71d82f61121f20 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md @@ -0,0 +1,9 @@ +The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content. + +- Tapping on a pivot item header navigates to that header's section content. +- Swiping left or right on a pivot item header navigates to the adjacent section. +- Swiping left or right on section content navigates to the adjacent section. +- Pivots are stationary when all pivot headers fit within the allowed space. +- Pivots carousel when all pivot headers don't fit within the allowed space. + +Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content. diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx index 85746ac5d3bd42..7cdce5709ba9bc 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ProgressIndicatorBasicExample } from './examples/ProgressIndicator.Basic.Example'; @@ -19,6 +20,7 @@ export class ProgressIndicatorPage extends React.Component @@ -37,60 +39,27 @@ export class ProgressIndicatorPage extends React.Component } overview={ -
-

- ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped. -

-

- ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include: -

-
    -
  • - [Object] is being [operation name], or -
    • -
  • - [Object] is being [operation name] to [destination name] or -
    • -
  • - [Object] is being [operation name] from [source name] to [destination name] -
    • -
-

- Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark. -

-

- Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service. -

- -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a ProgressIndicator when the total units to completion is known
    • -
  • Display operation description
    • -
  • Show text above and/or below the bar
    • -
  • Combine steps of a single operation into one bar
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md') } + } donts={ -
-
    -
  • Use a ProgressIndicator when the total units to completion is indeterminate
    • -
  • Use only a single word description
    • -
  • Show text to the right or left of the bar
    • -
  • Cause progress to “rewind” to show new steps
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md new file mode 100644 index 00000000000000..5138b92a4f299d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md @@ -0,0 +1,4 @@ +- Use a ProgressIndicator when the total units to completion is indeterminate +- Use only a single word description +- Show text to the right or left of the bar +- Cause progress to “rewind” to show new steps \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md new file mode 100644 index 00000000000000..4c12cb8ba1d0d6 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md @@ -0,0 +1,4 @@ +- Use a ProgressIndicator when the total units to completion is known +- Display operation description +- Show text above and/or below the bar +- Combine steps of a single operation into one bar \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md new file mode 100644 index 00000000000000..6a7148ba3d5b3a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md @@ -0,0 +1,11 @@ +ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped. + +ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include: + +- **[Object]** is being **[operation name]**, or +- **[Object]** is being **[operation name]** to **[destination name]** or +- **[Object]** is being **[operation name]** from **[source name]** to **[destination name]** + +Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark. + +Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service. diff --git a/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx b/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx index 476537b62615c5..3f31c3ad22baf5 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { RatingBasicExample } from './examples/Rating.Basic.Example'; @@ -17,6 +18,7 @@ export class RatingPage extends React.Component { @@ -30,33 +32,27 @@ export class RatingPage extends React.Component { /> } overview={ -
-

- Ratings provide insight regarding others’ opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they’ve purchased. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingDos.md') } + } donts={ -
-
    -
  • Don’t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md new file mode 100644 index 00000000000000..1e7800f804a206 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md @@ -0,0 +1 @@ +- Don’t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md new file mode 100644 index 00000000000000..a56a299d1738cc --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md @@ -0,0 +1 @@ +- Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md new file mode 100644 index 00000000000000..89e7faca684f19 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md @@ -0,0 +1 @@ +Ratings provide insight regarding others’ opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they’ve purchased. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx index b7fa1d5d97d6d3..66fbb7b927d0e5 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ResizeGroupOverflowSetExample } from './examples/ResizeGroup.OverflowSet.Example'; @@ -21,6 +22,7 @@ export class ResizeGroupPage extends React.Component @@ -40,66 +42,22 @@ export class ResizeGroupPage extends React.Component } overview={ -
- -

- ResizeGroup is a React component that can be used to help fit the right amount of content within a container. The consumer - of the ResizeGroup provides some initial data, a reduce function, and a render function. The render function is responsible - for populating the contents of a the container when given some data. The initial data should represent the data that should - be rendered when the ResizeGroup has infinite width. If the contents returned by the render function do not fit within the - ResizeGroup, the reduce function is called to get a version of the data whose rendered width should be smaller than the data - that was just rendered. -

-

- An example scenario is shown below, where controls that do not fit on screen are rendered in an overflow menu. The data in - this situation is a list of 'primary' controls that are rendered on the top level and a set of overflow controls rendered in - the overflow menu. The initial data in this case has all the controls in the primary set. The implementation of onReduceData - moves a control from the overflow well into the primary control set. -

-

- This component queries the DOM for the dimensions of elements. Too many of these dimension queries will negatively affect - the performance of the component and could cause poor interactive performance on websites. One way to reduce the number of - measurements performed by the component is to provide a cacheKey in the initial data and in the return value of - onReduceData. Two data objects with the same cacheKey are assumed to have the same width, resulting in measurements being - skipped for that data object. In the controls with an overflow example, the cacheKey is simply the concatenation of the - keys of the controls that appear in the top level. -

-

- There is a boolean context property (isMeasured) added to let child components know if they are only being used for measurement purposes. When isMeasured is true, it will signify that the component is not the instance visible to the user. This will not be needed for most scenarios. It is intended to be used to to skip unwanted side effects of mounting a child component more than once. This includes cases where the the component makes API requests, requests focus to one of its elements, expensive computations, and/or renders markup unrelated to its size. Be careful not to use this property to change the components rendered output in a way that effects it size in any way. -

- -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • - Ensure the width of the parent of this component has a fixed width that does not depend on the dimensions of it's children. - Failure to do so may result in ResizeGroup attempting to fill a width of 0px. -
    • -
  • - Ensure that result of rendering the data returned by onReduceData is actually smaller than the previous data. -
    • -
  • - Include a cacheKey in your data to improve performance. Two objects with the same cacheKey are assumed to have the same - width, so the ResizeGroup will only store one measurement per resize group. -
    • -
  • - Implement onGrowData for improved performance when the container for the resize group increases in size. -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md') } + } donts={ -
-
    -
  • Do any DOM measurements inside your onReduce function as this will degrade performance
    • -
  • Provide too many different return values for onReduce, it will degrade performance
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md new file mode 100644 index 00000000000000..4e5e957772a25f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md @@ -0,0 +1,2 @@ +- Do any DOM measurements inside your onReduce function as this will degrade performance +- Provide too many different return values for onReduce, it will degrade performance \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md new file mode 100644 index 00000000000000..12de3cc5919f1c --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md @@ -0,0 +1,4 @@ +- Ensure the width of the parent of this component has a fixed width that does not depend on the dimensions of it's children. Failure to do so may result in ResizeGroup attempting to fill a width of 0px. +- Ensure that result of rendering the data returned by onReduceData is actually smaller than the previous data. +- Include a cacheKey in your data to improve performance. Two objects with the same cacheKey are assumed to have the same width, so the ResizeGroup will only store one measurement per resize group. +- Implement onGrowData for improved performance when the container for the resize group increases in size. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md new file mode 100644 index 00000000000000..d2295068c8ae40 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md @@ -0,0 +1,7 @@ +ResizeGroup is a React component that can be used to help fit the right amount of content within a container. The consumer of the ResizeGroup provides some initial data, a reduce function, and a render function. The render function is responsible for populating the contents of a the container when given some data. The initial data should represent the data that should be rendered when the ResizeGroup has infinite width. If the contents returned by the render function do not fit within the ResizeGroup, the reduce function is called to get a version of the data whose rendered width should be smaller than the data that was just rendered. + +An example scenario is shown below, where controls that do not fit on screen are rendered in an overflow menu. The data in this situation is a list of 'primary' controls that are rendered on the top level and a set of overflow controls rendered in the overflow menu. The initial data in this case has all the controls in the primary set. The implementation of onReduceData moves a control from the overflow well into the primary control set. + +This component queries the DOM for the dimensions of elements. Too many of these dimension queries will negatively affect the performance of the component and could cause poor interactive performance on websites. One way to reduce the number of measurements performed by the component is to provide a cacheKey in the initial data and in the return value of onReduceData. Two data objects with the same cacheKey are assumed to have the same width, resulting in measurements being skipped for that data object. In the controls with an overflow example, the cacheKey is simply the concatenation of the keys of the controls that appear in the top level. + +There is a boolean context property (isMeasured) added to let child components know if they are only being used for measurement purposes. When isMeasured is true, it will signify that the component is not the instance visible to the user. This will not be needed for most scenarios. It is intended to be used to to skip unwanted side effects of mounting a child component more than once. This includes cases where the the component makes API requests, requests focus to one of its elements, expensive computations, and/or renders markup unrelated to its size. Be careful not to use this property to change the components rendered output in a way that effects it size in any way. diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx index 86abb63498a324..170577ea911936 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ScrollablePaneDefaultExample } from './examples/ScrollablePane.Default.Example'; @@ -20,6 +21,7 @@ export class ScrollablePanePage extends React.Component @@ -43,30 +45,22 @@ export class ScrollablePanePage extends React.Component } overview={ -
-

- ScrollablePane is a helper component designed to use in conjunction with a Sticky component. Sticky components will "stick" to the top or bottom of a ScrollablePane's scrollable region and remain visible. ScrollablePane requires a height or max-height set either on the component itself, or on the immediate parent element. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Ensure that a parent component has a CSS height, or max-height attribute set (and any intermediary containers have an inherit, or explicit height/max-height set).
    • -
  • Use Sticky component on block level elements
    • -
  • Sticky component are ideally section headers and/or footers
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md') } + } donts={ -
-
    -
  • Don't use Sticky on elements with margin top or bottom
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md new file mode 100644 index 00000000000000..84f8a79e0cc17a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md @@ -0,0 +1 @@ +- Don't use Sticky on elements with margin top or bottom \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md new file mode 100644 index 00000000000000..4c729aeea7ccad --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md @@ -0,0 +1,3 @@ +- Ensure that a parent component has a CSS height, or max-height attribute set (and any intermediary containers have an inherit, or explicit height/max-height set). +- Use Sticky component on block level elements +- Sticky component are ideally section headers and/or footers \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md new file mode 100644 index 00000000000000..0bcd8f171c5bbf --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md @@ -0,0 +1 @@ +ScrollablePane is a helper component designed to use in conjunction with a Sticky component. Sticky components will "stick" to the top or bottom of a ScrollablePane's scrollable region and remain visible. ScrollablePane requires a height or max-height set either on the component itself, or on the immediate parent element. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx index d8e4ff0d94ddce..1003d0eaaead2d 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { SearchBoxFullSizeExample } from './examples/SearchBox.FullSize.Example'; @@ -24,6 +25,7 @@ export class SearchBoxPage extends React.Component /> } overview={ -
-

- SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app. -

- -

Zero input state

- -

- When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for <x>", "search for a place" or "type to search in <x location>". -

- -

Autocomplete suggestions

- -

- As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse. -

- -

Full search

- -

- If a user hits "enter" after entering input, a full search is executed. Full searches often go to another "results" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content. -

- -

- As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string. -

- -

Search scopes

- -

- Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched. -

- -

- Some common search scopes include: -

- -
    -
  • Global: Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.
    • -
  • Web: Search a web index. Results include pages, entities, and answers.
    • -
  • My stuff: Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).
    • -
- -

SearchBox with no parent container

- -

- Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use placeholder text in the SearchBox to describe what users can search for.
    • -
  • Example: "Search"; "Search files"; "Search site"
    • -
  • Once the user has clicked into the SearchBox but hasn’t entered input yet, use "hint text" to communicate search scope.
    • -
  • Examples: "Try searching for a PDFs"; "Search contacts list"; "Type to find <content type>"
    • -
  • Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text.
    • -
  • Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately.
    • -
  • Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions.
    • -
  • If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for.
    • -
  • Use the Underlined SearchBox for CommandBars.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md') } + } donts={ -
-
    -
  • Don't leave the SearchBox blank because it's too ambiguous.
    • -
  • Don't have lengthy and unclear hint text. It should be used to clarify and set expectations.
    • -
  • Don't provide too many autocomplete suggestions, as that will overwhelm the user.
    • -
  • Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration.
    • -
  • Don’t provide too much information or metadata in the suggestions list; it’s intended to be lightweight.
    • -
  • Don’t use an autocomplete dropdown for something that has one choice; there must be more than one item.
    • -
  • Don't build a custom search control based on the default text box or any other control.
    • -
  • Don't use SearchBox if you cannot reliably provide accurate results.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md new file mode 100644 index 00000000000000..bb977a155edf5e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md @@ -0,0 +1,8 @@ +- Don't leave the SearchBox blank because it's too ambiguous. +- Don't have lengthy and unclear hint text. It should be used to clarify and set expectations. +- Don't provide too many autocomplete suggestions, as that will overwhelm the user. +- Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration. +- Don’t provide too much information or metadata in the suggestions list; it’s intended to be lightweight. +- Don’t use an autocomplete dropdown for something that has one choice; there must be more than one item. +- Don't build a custom search control based on the default text box or any other control. +- Don't use SearchBox if you cannot reliably provide accurate results. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md new file mode 100644 index 00000000000000..9de49cc7727a29 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md @@ -0,0 +1,9 @@ +- Use placeholder text in the SearchBox to describe what users can search for. +- Example: "Search"; "Search files"; "Search site" +- Once the user has clicked into the SearchBox but hasn’t entered input yet, use "hint text" to communicate search scope. +- Examples: "Try searching for a PDFs"; "Search contacts list"; "Type to find \" +- Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text. +- Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately. +- Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions. +- If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for. +- Use the Underlined SearchBox for CommandBars. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md new file mode 100644 index 00000000000000..a0b55e39b7aa93 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md @@ -0,0 +1,29 @@ +SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app. + +## Zero input state + +When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for \", "search for a place" or "type to search in \". + +## Autocomplete suggestions + +As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse. + +## Full search + +If a user hits "enter" after entering input, a full search is executed. Full searches often go to another "results" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content. + +As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string. + +## Search scopes + +Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched. + +Some common search scopes include: + +- **Global:** Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more. +- **Web:** Search a web index. Results include pages, entities, and answers. +- **My stuff:** Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s). + +## SearchBox with no parent container + +Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx b/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx index b14469fdf530ff..20f451739208af 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { SliderBasicExample } from './examples/Slider.Basic.Example'; @@ -17,6 +18,7 @@ export class SliderPage extends React.Component { @@ -30,43 +32,27 @@ export class SliderPage extends React.Component { /> } overview={ -
-

- A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value. -

-

- A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to two or five. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Consider a Slider when changing a value.
    • -
  • Use a slider when you want your users to be able to set defined values (such as volume or brightness).
    • -
  • Include a label indicating what value the Slider changes.
    • -
  • Use step points (or tick marks) if you don’t want the Slider to allow arbitrary values between min and max.
    • -
  • Use a Slider when the user would benefit from instant feedback on the effect of setting changes.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderDos.md') } + } donts={ -
-
    -
  • Don't use a Slider when the options are not values.
    • -
  • Don’t use a Slider for binary settings.
    • -
  • Don’t create a continuous Slider if the range of values is large.
    • -
  • Don’t use for a range of three values or less.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md new file mode 100644 index 00000000000000..3d5cbad81fc63d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md @@ -0,0 +1,4 @@ +- Don't use a Slider when the options are not values. +- Don’t use a Slider for binary settings. +- Don’t create a continuous Slider if the range of values is large. +- Don’t use for a range of three values or less. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md new file mode 100644 index 00000000000000..336a1ec3087a06 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md @@ -0,0 +1,5 @@ +- Consider a Slider when changing a value. +- Use a slider when you want your users to be able to set defined values (such as volume or brightness). +- Include a label indicating what value the Slider changes. +- Use step points (or tick marks) if you don’t want the Slider to allow arbitrary values between min and max. +- Use a Slider when the user would benefit from instant feedback on the effect of setting changes. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md new file mode 100644 index 00000000000000..0b7c0e00e7c2e1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md @@ -0,0 +1,3 @@ +A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value. + +A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to two or five. diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx index faa27929fd1e64..5f95b7b953c06e 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { SpinButtonBasicExample } from './examples/SpinButton.Basic.Example'; @@ -30,6 +31,7 @@ export class SpinButtonPage extends React.Component /> } overview={ -
-

- A SpinButton allows the user to incrementaly adjust a value in small steps. It is mainly used for numeric values, but other values are supported too. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a SpinButton when changing a value with precise control.
    • -
  • Use a SpinButton when values are tied to a unit.
    • -
  • Include a label indicating what value the SpinButton changes.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md') } + } donts={ -
-
    -
  • Don’t use a SpinButton if the range of values is large.
    • -
  • Don’t use a SpinButton for binary settings.
    • -
  • Don't use a SpinButton for a range of three values or less.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md new file mode 100644 index 00000000000000..6c04426cee37ad --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md @@ -0,0 +1,3 @@ +- Don’t use a SpinButton if the range of values is large. +- Don’t use a SpinButton for binary settings. +- Don't use a SpinButton for a range of three values or less. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md new file mode 100644 index 00000000000000..9b76bf0893ed0a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md @@ -0,0 +1,3 @@ +- Use a SpinButton when changing a value with precise control. +- Use a SpinButton when values are tied to a unit. +- Include a label indicating what value the SpinButton changes. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md new file mode 100644 index 00000000000000..8c27fca6c4652d --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md @@ -0,0 +1 @@ +A SpinButton allows the user to incrementaly adjust a value in small steps. It is mainly used for numeric values, but other values are supported too. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx b/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx index 4f5a537acafa7f..b7d0a5e63fd958 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { SpinnerBasicExample } from './examples/Spinner.Basic.Example'; @@ -17,6 +18,7 @@ export class SpinnerPage extends React.Component { { /> } overview={ -
-

- A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use a Spinner when a task is not immediate.
    • -
  • Use one Spinner at a time.
    • -
  • Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating.
    • -
  • Use a Spinner when confirming a change has been made or a task is being processed.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md') } + } donts={ -
-
    -
  • Don’t use a Spinner when performing immediate tasks.
    • -
  • Don't show multiple Spinners at the same time.
    • -
  • Don't include more than a few words when paired with a Spinner.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md new file mode 100644 index 00000000000000..d265a7d6eb922f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md @@ -0,0 +1,3 @@ +- Don’t use a Spinner when performing immediate tasks. +- Don't show multiple Spinners at the same time. +- Don't include more than a few words when paired with a Spinner. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md new file mode 100644 index 00000000000000..39e616d86e2443 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md @@ -0,0 +1,4 @@ +- Use a Spinner when a task is not immediate. +- Use one Spinner at a time. +- Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating. +- Use a Spinner when confirming a change has been made or a task is being processed. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md new file mode 100644 index 00000000000000..5e7970a9b658ea --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md @@ -0,0 +1 @@ +A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx index 0fae1ac85b1c29..f349be46b95e66 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { SwatchColorPickerBasicExample } from './examples/SwatchColorPicker.Basic.Example'; @@ -17,6 +18,7 @@ export class SwatchColorPickerPage extends React.Component @@ -30,31 +32,27 @@ export class SwatchColorPickerPage extends React.Component } overview={ -
-

- A SwatchColorPicker is a list of colors displayed as a grid as options for the user. It can be displayed by itself, with header and/or dividers, or as a button which expands to show the swatch color picker -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md') } + + } + bestPractices={ +
} dos={ -
-
    -
  • Use a SwatchColorPicker when there are multiple finite choices that can be grouped and/or collapsed under one title.
    • -
  • SwatchColorPickers contain a grid of colors.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md') } + } donts={ -
-
    -
  • Do not use a SwatchColorPicker when there are a a very large number of color choices. The best component for to that is a ColorPicker.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md new file mode 100644 index 00000000000000..6520df00b232bb --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md @@ -0,0 +1 @@ +- Do not use a SwatchColorPicker when there are a a very large number of color choices. The best component for to that is a ColorPicker. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md new file mode 100644 index 00000000000000..7c7632931d36f4 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md @@ -0,0 +1,2 @@ +- Use a SwatchColorPicker when there are multiple finite choices that can be grouped and/or collapsed under one title. +- SwatchColorPickers contain a grid of colors. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md new file mode 100644 index 00000000000000..bf7c8218c478e1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md @@ -0,0 +1 @@ +A SwatchColorPicker is a list of colors displayed as a grid as options for the user. It can be displayed by itself, with header and/or dividers, or as a button which expands to show the swatch color picker. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx index 10b1490033ca66..4e6fa55136ac1b 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { TeachingBubbleBasicExample } from './examples/TeachingBubble.Basic.Example'; @@ -26,6 +27,7 @@ export class TeachingBubblePage extends React.Component @@ -53,14 +55,14 @@ export class TeachingBubblePage extends React.Component } overview={ -
-

TeachingBubbles allow the user to display important hints on their web pages with a callout box.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md b/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md new file mode 100644 index 00000000000000..3f69fd9d5b86b1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md @@ -0,0 +1 @@ +TeachingBubbles allow the user to display important hints on their web pages with a callout box. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx index 15ebbbd00d5196..b53950817af652 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; @@ -39,6 +40,7 @@ export class TextFieldPage extends React.Component /> } overview={ -
-

- The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format. -

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • Use the TextField to accept data input on a form or page.
    • -
  • Label the TextField with a helpful name.
    • -
  • Provide concise helper text that specifies what content is expected to be entered.
    • -
  • Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error).
    • -
  • When part of a form, provide clear designations for which fields are required vs. optional.
    • -
  • Provide all appropriate methods for submitting provided data (onEnter or a dedicated ‘Submit’ button).
    • -
  • Provide all appropriate methods of clearing provided data (‘X’ or something similar).
    • -
  • Allow for selection, copy and paste of field data.
    • -
  • Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc).
    • -
  • When long entries are expected, provide a mechanism for overflow or expansion of the control itself.
    • -
  • Ensure that the TextField is functional through use of mouse/keyboard or touch when available.
    • -
  • Ensure that the TextField is accessible through screen reader and/or other accessibility tools.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md') } + } donts={ -
-
    -
  • Don’t use a TextField to render basic copy as part of a body element of a page.
    • -
  • Don’t provide an unlabeled TextField and expect that users will know what to do with it.
    • -
  • Don’t place a TextField inline with body copy.
    • -
  • Don’t be overly verbose with helper text.
    • -
  • Don’t occlude the entry or allow entry when the active content is not visible.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md new file mode 100644 index 00000000000000..0e922b792ca5d0 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md @@ -0,0 +1,5 @@ +- Don’t use a TextField to render basic copy as part of a body element of a page. +- Don’t provide an unlabeled TextField and expect that users will know what to do with it. +- Don’t place a TextField inline with body copy. +- Don’t be overly verbose with helper text. +- Don’t occlude the entry or allow entry when the active content is not visible. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md new file mode 100644 index 00000000000000..3d14cce44df2cd --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md @@ -0,0 +1,12 @@ +- Use the TextField to accept data input on a form or page. +- Label the TextField with a helpful name. +- Provide concise helper text that specifies what content is expected to be entered. +- Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error). +- When part of a form, provide clear designations for which fields are required vs. optional. +- Provide all appropriate methods for submitting provided data (onEnter or a dedicated ‘Submit’ button). +- Provide all appropriate methods of clearing provided data (‘X’ or something similar). +- Allow for selection, copy and paste of field data. +- Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc). +- When long entries are expected, provide a mechanism for overflow or expansion of the control itself. +- Ensure that the TextField is functional through use of mouse/keyboard or touch when available. +- Ensure that the TextField is accessible through screen reader and/or other accessibility tools. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md new file mode 100644 index 00000000000000..2c19bb3bb700d4 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md @@ -0,0 +1 @@ +The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss deleted file mode 100644 index 423e2396245867..00000000000000 --- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '../../common/common'; - -:global { - - .Themes { - padding: 40px; - } - - .ThemePage-colorSwatch { - @include focus-border(); - margin: -10px 0; - line-height: 36px; - white-space: nowrap; - cursor: pointer; - - &:hover { - background: rgba(0,0,0,.05); - } - } - - .ThemePage-swatch { - display: inline-block; - width: 36px; - height: 36px; - vertical-align: middle; - @include ms-margin-right(5px); - border: 1px solid rgba(127, 127, 127, .5); - } - -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts new file mode 100644 index 00000000000000..216e30099d13fa --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts @@ -0,0 +1,43 @@ +import { IThemePageStyleProps, IThemePageStyles } from './ThemePage.types'; +import { + getFocusStyle, + getTheme, +} from '../../Styling'; + +export const getStyles = ( + props: IThemePageStyleProps +): IThemePageStyles => { + const theme = getTheme(); + return ({ + colorSwatch: [ + 'ThemePage-colorSwatch', + getFocusStyle(theme), + { + margin: '-10px 0', + lineHeight: '36px', + whiteSpace: 'nowrap', + cursor: 'pointer', + + selectors: { + ':hover': { + background: 'rgba(0,0,0,.05)', + } + } + } + ], + + swatch: [ + 'ThemePage-swatch', + { + display: 'inline-block', + width: '36px', + height: '36px', + verticalAlign: 'middle', + marginRight: '5px', + border: '1px solid rgba(127, 127, 127, .5)', + } + ], + + colorValue: 'ThemePage-colorValue', + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx index fea63772c11c85..70009969c39495 100644 --- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx @@ -1,111 +1,142 @@ import * as React from 'react'; -import { loadTheme, FontClassNames, IPalette } from 'office-ui-fabric-react/lib/Styling'; -import { IComponentDemoPageProps, Highlight } from '@uifabric/example-app-base'; -import { defaultTheme } from './defaultTheme'; -import { Callout } from 'office-ui-fabric-react/lib/Callout'; -import { DetailsList, DetailsListLayoutMode as LayoutMode } from 'office-ui-fabric-react/lib/DetailsList'; -import { SelectionMode } from 'office-ui-fabric-react/lib/Selection'; -import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker'; -import './ThemePage.scss'; -const ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx'); - -export class ThemePage extends React.Component { +import { + classNamesFunction, + customizable, +} from '../../Utilities'; +import { + FontClassNames, + IPalette, + ISemanticColors, + loadTheme, +} from '../../Styling'; +import { + ComponentPage, + Highlight, + IComponentDemoPageProps, + PageMarkdown, +} from '@uifabric/example-app-base'; +import { + IThemePagePalette, + IThemePageStyleProps, + IThemePageStyles, + IThemePageState, +} from './ThemePage.types'; +import { + defaultPalette, + defaultSemanticColors, +} from './defaultTheme'; +import { getStyles } from './ThemePage.styles'; +import { Callout } from '../Callout'; +import { DetailsList, DetailsListLayoutMode } from '../../DetailsList'; +import { SelectionMode } from '../../Selection'; +import { ColorPicker } from '../ColorPicker'; + +const getClassNames = classNamesFunction(); + +export class ThemePage extends React.Component { private _list: DetailsList; - constructor(props: {}) { + constructor(props: IComponentDemoPageProps) { super(props); this._onPickerDismiss = this._onPickerDismiss.bind(this); this.state = { - colors: Object.keys(defaultTheme).map(variableName => ({ - key: variableName, - name: variableName, - value: (defaultTheme as any)[variableName], - description: '', - colorPickerProps: undefined - })) + palette: defaultPalette, + semanticColors: defaultSemanticColors, }; } public render() { - const { colors, colorPickerProps } = this.state; + // Don't mutate state to display lists + const palette = [...this.state.palette]; + const semanticColors = [...this.state.semanticColors]; + return ( + + { require('!raw-loader!office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md') } + + } + otherSections={ [ + { + title: 'Default Palette', + section: this._colorList(palette, 'palette') + }, + { + title: 'Default Semantic Colors', + section: this._colorList(semanticColors, 'semanticColors') + }, + ] } + isHeaderVisible={ this.props.isHeaderVisible } + /> + ); + } + private _colorList = (colors: any, list: 'palette' | 'semanticColors') => { + const classNames = getClassNames(getStyles); + const { colorPickerProps } = this.state; return ( -
-

Themes

-

The entire color palette of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually.

-

To override the themes, you need to call loadTheme() with the appropriate set of overrides:

- - - { ThemeCodeExample } - - -

Define a theme

-
- ( -
- - { item.value } -
- ) - }, - { - key: 'desc', - name: 'Description', - fieldName: 'description', - minWidth: 90 - } - ] } - /> - - { colorPickerProps && ( - - - - - - ) } - -
+
+ ( +
+ + { item.value } +
+ ) + }, + { + key: 'desc', + name: 'Description', + fieldName: 'description', + minWidth: 90 + } + ] } + /> + + { colorPickerProps && ( + + + + + + ) }
); @@ -115,33 +146,47 @@ export class ThemePage extends React.Component) { + private _onSwatchClicked(item: any, index: number, list: string, ev: React.MouseEvent) { this.setState({ colorPickerProps: { targetElement: (ev.currentTarget as HTMLElement).children[0] as HTMLElement, value: item.value, - index: index - } + index: index, + }, + activeList: list }); } private _onColorChanged(index: number, newColor: string) { - const { colors } = this.state; - const color = colors[index]; - const palette: Partial = {}; - - color.value = newColor; - - for (let i = 0; i < colors.length; i++) { - const themeColor = colors[i]; - - (palette as any)[themeColor.key] = themeColor.value; + const { activeList } = this.state; + const partialPalette: Partial = {}; + const partialSemanticColors: Partial = {}; + + if (activeList === 'palette') { + const palette = [...this.state.palette]; + const paletteColor = palette[index]; + paletteColor.value = newColor; + palette[index] = paletteColor; + for (let i = 0; i < palette.length; i++) { + (palette as any)[palette[i].key] = palette[i].value; + } + } else if (activeList === 'semanticColors') { + const semanticColors = [...this.state.semanticColors]; + const semanticColor = semanticColors[index]; + semanticColor.value = newColor; + semanticColors[index] = semanticColor; + for (let i = 0; i < semanticColors.length; i++) { + (semanticColors as any)[semanticColors[i].key] = semanticColors[i].value; + } + } else { + this.setState({ activeList: undefined }); + return undefined; } - loadTheme({ palette }); + this.setState({ activeList: undefined }); + const partialTheme = { ...partialPalette, ...partialSemanticColors }; - // The theme has changed values, but color state is the same. Force an update on the list. - this._list.forceUpdate(); + loadTheme({ palette: partialTheme }); } private _onPickerDismiss() { @@ -149,5 +194,4 @@ export class ThemePage extends React.Component ({ + key: variableName, + name: variableName, + value: (defaultTheme.palette as any)[variableName], + description: '', +})); + +export const defaultSemanticColors = Object.keys(defaultTheme.semanticColors).map(variableName => ({ + key: variableName, + name: variableName, + value: (defaultTheme.semanticColors as any)[variableName], + description: (defaultTheme.semanticColors as any)[variableName].indexOf('@deprecated') >= 0 ? 'Deprecated' : '', +})); diff --git a/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md b/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md new file mode 100644 index 00000000000000..b117ba5ddd0bb9 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md @@ -0,0 +1,33 @@ +The entire color palette of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually. + +## Loading Themes + +To load the theme call `getTheme()`. This returns an object with all the colors and fonts set in the current theme: + +```tsx +let myTheme = getTheme(); + +// returns: +myTheme = { + palette: {...}, // All the palette colors + semanticColors: {...}, // All the semanticColors + fonts: {...}, // All the font stacks like small, medium, large, etc + isInverted: false // Boolean of whether the theme is currently inverted +} +``` + +Using `getTheme(true)` will add comments to deprecated semanticColors. + +## Overriding Themes + +To override the themes, you need to call `loadTheme()` with the appropriate set of overrides: + +```tsx +import { loadTheme } from 'office-ui-fabric-react/lib/Styling'; + +loadTheme({ + palette: { + 'themePrimary': 'red' + } +}); +``` \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx b/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx deleted file mode 100644 index 8889c8b957c5aa..00000000000000 --- a/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { loadTheme } from 'office-ui-fabric-react/lib/Styling'; - -loadTheme({ - palette: { - 'themePrimary': 'red' - } -}); diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx index 2373ebbf3031bf..85f916823701c7 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx @@ -3,6 +3,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { ToggleBasicExample } from './examples/Toggle.Basic.Example'; @@ -20,6 +21,7 @@ export class TogglePage extends React.Component { { /> } overview={ -
-

- Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use. -

- -

Choosing between Toggle and Checkbox

- -

- For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips: -

- -
    -
  • Use a Toggle for binary settings when changes become effective immediately after the user changes them.
    • -
  • In the above example, it's clear with the Toggle that the wireless is set to "On." But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on.
    • -
  • Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "Submit", "Next", "Ok" button to apply changes, use a Checkbox.
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md') } + } bestPractices={
} dos={ -
-
    -
  • - Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images." -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md') } + } donts={ -
-
    - Don’t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding "Apply" button instead of a Toggle. -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md new file mode 100644 index 00000000000000..c23d5922234655 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md @@ -0,0 +1 @@ +- Don’t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding "Apply" button instead of a Toggle. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md new file mode 100644 index 00000000000000..50e927ea935b9b --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md @@ -0,0 +1 @@ +- Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images." \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md new file mode 100644 index 00000000000000..ff7eb45edd0698 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md @@ -0,0 +1,9 @@ +Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use. + +## Choosing between Toggle and Checkbox + +For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips: + +- Use a Toggle for binary settings when changes become effective immediately after the user changes them. +- In the above example, it's clear with the Toggle that the wireless is set to "On." But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on. +- Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "Submit", "Next", "Ok" button to apply changes, use a Checkbox. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx index d0dea1e316a5d1..3b90b2881970ca 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { TooltipCustomExample } from './examples/Tooltip.Custom.Example'; @@ -27,6 +28,7 @@ export class TooltipPage extends React.Component { @@ -56,11 +58,9 @@ export class TooltipPage extends React.Component { /> } overview={ -
-

Tooltips supplement content associated with a specific UI component. You can use two components, and each has different props:

-

Tooltip: A styled tooltip that you can display on a chosen target.

-

TooltipHost: A tooltip wrapped in a stateful parent. Tooltip will be displayed on hover or focus and removed when focus/hover removed.

-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md b/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md new file mode 100644 index 00000000000000..1b62158e8b11d2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md @@ -0,0 +1,4 @@ +Tooltips supplement content associated with a specific UI component. You can use two components, and each has different props: + +- **Tooltip:** A styled tooltip that you can display on a chosen target. +- **TooltipHost:** A tooltip wrapped in a stateful parent. Tooltip will be displayed on hover or focus and removed when focus/hover removed. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx index 1a48eb28b8d41d..ed00e5de897055 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { PeoplePickerTypesExample } from './examples/PeoplePicker.Types.Example'; @@ -18,6 +19,7 @@ export class PeoplePickerPage extends React.Component @@ -33,37 +35,29 @@ export class PeoplePickerPage extends React.Component } overview={ -
- PeoplePicker - are used to pick recipients. -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md') } + } - isHeaderVisible={ this.props.isHeaderVisible } bestPractices={ -
The PeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
+ + { require('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md') } + } dos={ -
-
    -
  • Use the PeoplePicker to quickly search for a few people
    • -
  • Use the PeoplePicker to manage a group of people
    • -
  • Use the MemberList PeoplePicker to display selections below the input box
    • -
  • Use defaultSelectedItems when some people have already been selected
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md') } + } donts={ -
-
    -
  • Use the PeoplePicker to select something other than people
    • -
  • Use the PeoplePicker to only display people
    • -
  • Use the PeoplePicker without sufficient space
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md') } + } + isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md new file mode 100644 index 00000000000000..cb03a88771a89f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md @@ -0,0 +1 @@ +The PeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md new file mode 100644 index 00000000000000..48856a3612fc87 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md @@ -0,0 +1,3 @@ +- Use the PeoplePicker to select something other than people +- Use the PeoplePicker to only display people +- Use the PeoplePicker without sufficient space \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md new file mode 100644 index 00000000000000..473ac1a8f39cc2 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md @@ -0,0 +1,4 @@ +- Use the PeoplePicker to quickly search for a few people +- Use the PeoplePicker to manage a group of people +- Use the MemberList PeoplePicker to display selections below the input box +- Use defaultSelectedItems when some people have already been selected \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md new file mode 100644 index 00000000000000..63fc62c42dbf4f --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md @@ -0,0 +1 @@ + PeoplePickers are used to pick recipients. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx b/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx index 218833888421ef..e6251d7dbb91a5 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, ComponentPage, IComponentDemoPageProps, + PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; import { PickerCustomResultExample } from './examples/Picker.CustomResult.Example'; @@ -20,6 +21,7 @@ export class PickersPage extends React.Component { @@ -38,15 +40,14 @@ export class PickersPage extends React.Component { /> } overview={ -
- Pickers - are used to pick recipients. -
+ + { require('!raw-loader!office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md b/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md new file mode 100644 index 00000000000000..6d96036aa25cbf --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md @@ -0,0 +1 @@ + Pickers are used to pick recipients. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx index f8711dae7a53ba..a9bfde92f31126 100644 --- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx +++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx @@ -1,5 +1,9 @@ import * as React from 'react'; -import { ComponentPage, IComponentPageSection } from '@uifabric/example-app-base'; +import { + ComponentPage, + IComponentPageSection, + PageMarkdown, +} from '@uifabric/example-app-base'; import { Link } from '../../Link'; import { AllComponentsStatus } from './AllComponents.checklist'; import { ComponentStatusInfoState, IComponentStatusInfoState, InformationLink } from './ComponentStatusState'; @@ -14,6 +18,7 @@ export class ComponentStatusPage extends React.Component<{}, {}> { @@ -22,9 +27,9 @@ export class ComponentStatusPage extends React.Component<{}, {}> { private _renderOverView(): JSX.Element { return ( -
- Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable. -
+ + { require('!raw-loader!office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md') } + ); } diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md b/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md new file mode 100644 index 00000000000000..b5e19a2e80c92a --- /dev/null +++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md @@ -0,0 +1 @@ +Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss index 61cd171c17c190..563450d8887281 100644 --- a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss +++ b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss @@ -24,13 +24,18 @@ margin: -20px; margin-bottom: 20px; border-bottom: 1px solid $ms-color-neutralTertiaryAlt; - - h1 { - margin-bottom: 0; - } - - h3 { - margin-top: 0; + display: flex; + align-items: center; + justify-content: space-between; + + .ms-GettingStartedPage-title { + h1 { + margin-bottom: 0; + } + + h3 { + margin-top: 0; + } } } diff --git a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx index 2aeff4d2bd5573..36685a53e5183c 100644 --- a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx +++ b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx @@ -2,88 +2,43 @@ import * as React from 'react'; import { Link } from 'office-ui-fabric-react/lib/Link'; +import { IconButton } from 'office-ui-fabric-react/lib/Button'; +import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import './GettingStartedPage.scss'; -import { Highlight } from '@uifabric/example-app-base'; +import { Highlight, PageMarkdown } from '@uifabric/example-app-base'; export class GettingStartedPage extends React.Component { public render() { return (
-
-

office-ui-fabric-react

-

A library of reusable, generic React components

-
- -

Overview

- -

{ - `Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over.` - }

- -

{ - `Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need.` - }

- -

Getting started

- -

{ `Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as ` }Webpack{ ` which can resolve NPM package imports in your code and can bundle the specific things you import.` }

- -

{ - `Within an npm project, you should install the package and save it as a dependency:` - }

- -
- npm install --save office-ui-fabric-react +
+

office-ui-fabric-react

+

A library of reusable, generic React components

+
+ { this._getEditButton() }
- -

{ - `This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.` - }

- -

{ - `The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.` - }

- -
- { - `import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; - -const MyPage = () => (I am a button.); - -ReactDOM.render(, document.body.firstChild);` - } -
- -

Notes on module vs path-based imports

-

{ - `While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this:` - }

- -
- { `import { Button } from 'office-ui-fabric-react';` } -
- -

{ `...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size:` }

- -
- { - `import { Button } from 'office-ui-fabric-react/lib/Button'; -import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; -import { List } from 'office-ui-fabric-react/lib/List';` - } -
- -

Using an AMD bundler like r.js

- -

{ ` - If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location. - ` }

- + + { require('!raw-loader!office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md') } +
); } + private _getEditButton() { + return ( + + + + ); + } } diff --git a/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md new file mode 100644 index 00000000000000..b6f017e271d9a3 --- /dev/null +++ b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md @@ -0,0 +1,52 @@ +## Overview + +Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over. + +Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need. + +## Getting Started + +Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as Webpack which can resolve NPM package imports in your code and can bundle the specific things you import. + +Within an npm project, you should install the package and save it as a dependency: + +```bash +npm install --save office-ui-fabric-react +``` + +This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react. + +The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features. + +```tsx +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; + +const MyPage = () => (I am a button.); + +ReactDOM.render(, document.body.firstChild); +``` + +## Notes on module vs path-based imports + +While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this: + +```tsx +import { Button } from 'office-ui-fabric-react'; +``` + +...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size: + +```tsx +import { Button } from 'office-ui-fabric-react/lib/Button'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; +import { List } from 'office-ui-fabric-react/lib/List'; +``` + +## Using an AMD bundler like r.js + +If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location. + +
\ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx index 7eae905e116b1a..2c5ccb1fe90645 100644 --- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx +++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { ExampleCard, ComponentPage, + PageMarkdown, IComponentDemoPageProps } from '@uifabric/example-app-base'; @@ -15,43 +16,16 @@ export class SelectionPage extends React.Component } overview={ -
-

- Selection is a store that maintains the selection state of items in an efficient way. - It exposes methods for accessing the selection state given an item index. - If the items change, it can resolve the selection if items move in the array. -

- -

SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is.

- -

SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute. -

- -

Available attributes:

-
    -
  • - data-selection-index: the index of the item being represented.This would go on the root of the tile/row. -
    • -
  • - data-selection-invoke: this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item. -
    • -
  • - data-selection-toggle: this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div. -
    • -
  • - data-selection-toggle-all: this boolean flag indicates that clicking it should toggle all selection. -
    • -
  • - data-selection-disabled: allows a branch of the DOM to be marked to ignore input events that alter selections. -
    • -
-
+ + { require('!raw-loader!office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md') } + } isHeaderVisible={ this.props.isHeaderVisible } /> diff --git a/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md b/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md new file mode 100644 index 00000000000000..fe073967737dbf --- /dev/null +++ b/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md @@ -0,0 +1,15 @@ +Selection is a store that maintains the selection state of items in an efficient way. +It exposes methods for accessing the selection state given an item index. +If the items change, it can resolve the selection if items move in the array. + +SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is. + +SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute. + +Available attributes: + +- **data-selection-index:** the index of the item being represented.This would go on the root of the tile/row. +- **data-selection-invoke:** this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item. +- **data-selection-toggle:** this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div. +- **data-selection-toggle-all:** this boolean flag indicates that clicking it should toggle all selection. +- **data-selection-disabled:** allows a branch of the DOM to be marked to ignore input events that alter selections. diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts index 2611df309824f9..ab52c951ba3df2 100644 --- a/packages/styling/src/styles/theme.ts +++ b/packages/styling/src/styles/theme.ts @@ -15,7 +15,7 @@ import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles'; let _theme: ITheme = { palette: DefaultPalette, - semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false), + semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false), fonts: DefaultFontStyles, isInverted: false }; @@ -37,9 +37,13 @@ if (!Customizations.getSettings([ThemeSettingName]).theme) { } /** - * Gets the theme object. + * Gets the theme object + * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots. */ -export function getTheme(): ITheme { +export function getTheme(depComments: boolean = false): ITheme { + if (depComments === true) { + _theme = createTheme({}, depComments); + } return _theme; } @@ -69,9 +73,11 @@ export function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): /** * Applies the theme, while filling in missing slots. + * @param {object} theme - Partial theme object. + * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots. */ -export function loadTheme(theme: IPartialTheme): ITheme { - _theme = createTheme(theme); +export function loadTheme(theme: IPartialTheme, depComments: boolean = false): ITheme { + _theme = createTheme(theme, depComments); // Invoke the legacy method of theming the page as well. legacyLoadTheme({ ..._theme.palette, ..._theme.semanticColors }); @@ -91,8 +97,10 @@ export function loadTheme(theme: IPartialTheme): ITheme { /** * Creates a custom theme definition which can be used with the Customizer. + * @param {object} theme - Partial theme object. + * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots. */ -export function createTheme(theme: IPartialTheme): ITheme { +export function createTheme(theme: IPartialTheme, depComments: boolean = false): ITheme { let newPalette = { ...DefaultPalette, ...theme.palette }; if (!theme.palette || !theme.palette.accent) { @@ -100,8 +108,7 @@ export function createTheme(theme: IPartialTheme): ITheme { } // mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots - let newSemanticColors = { ..._makeSemanticColorsFromPalette(newPalette, !!theme.isInverted), ...theme.semanticColors }; - newSemanticColors = { ..._fixDeprecatedSlots(newSemanticColors), ...theme.semanticColors }; + let newSemanticColors = { ..._makeSemanticColorsFromPalette(newPalette, !!theme.isInverted, depComments), ...theme.semanticColors }; return { palette: newPalette, @@ -117,7 +124,7 @@ export function createTheme(theme: IPartialTheme): ITheme { // Generates all the semantic slot colors based on the Fabric palette. // We'll use these as fallbacks for semantic slots that the passed in theme did not define. // This does NOT fix deprecated slots. -function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISemanticColors { +function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depComments: boolean): ISemanticColors { let toReturn: ISemanticColors = { bodyBackground: p.white, bodyText: p.neutralPrimary, @@ -175,14 +182,23 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISema linkHovered: p.themeDarker, // Deprecated slots, fixed by _fixDeprecatedSlots() + /** + * Deprecated. Use `listText` instead. + * @deprecated + */ listTextColor: '' }; - return toReturn; + return _fixDeprecatedSlots(toReturn, depComments!); } -function _fixDeprecatedSlots(s: ISemanticColors): ISemanticColors { - s.listTextColor = s.listText; +function _fixDeprecatedSlots(s: ISemanticColors, depComments: boolean): ISemanticColors { + // Add @deprecated tag as comment if enabled + let dep = ''; + if (depComments === true) { + dep = ' /* @deprecated */'; + } + s.listTextColor = s.listText + dep; return s; -} \ No newline at end of file +} From 7dabb13e55f671e3c37df88140e66dbee076e2f1 Mon Sep 17 00:00:00 2001 From: Vitalie Braga Date: Tue, 17 Apr 2018 13:36:09 -0700 Subject: [PATCH 18/86] Experiments: fix bad imports (#4580) * Fixes some imports in NavPage causing some build errors. * Rush change. --- .../v-vibr-NavImportFix_2018-04-17-05-45.json | 11 +++++++++++ packages/experiments/src/components/Nav/NavPage.tsx | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json diff --git a/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json b/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json new file mode 100644 index 00000000000000..c5cfaac983d449 --- /dev/null +++ b/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Experiments: NavPage bad imports fixed.", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "v-vibr@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/Nav/NavPage.tsx b/packages/experiments/src/components/Nav/NavPage.tsx index ebe06a1bff2e37..5d800379094b87 100644 --- a/packages/experiments/src/components/Nav/NavPage.tsx +++ b/packages/experiments/src/components/Nav/NavPage.tsx @@ -7,7 +7,7 @@ import { } from '@uifabric/example-app-base'; import { NavExample } from './examples/Nav.Example'; const NavExampleCode = - require('!raw-loader!experiments/src/components/Nav/examples/Nav.Example.tsx') as string; + require('!raw-loader!@uifabric/experiments/src/components/Nav/examples/Nav.Example.tsx') as string; export class NavPage extends React.Component { public render(): JSX.Element { @@ -25,7 +25,7 @@ export class NavPage extends React.Component { propertiesTables={ ('!raw-loader!experiments/src/components/Nav/Nav.types.ts') + require('!raw-loader!@uifabric/experiments/src/components/Nav/Nav.types.ts') ] } renderOnly={ ['INavProps', 'INavState'] } /> From 9e838b8674558c1eae4ebfea9278668ad8ad992a Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Tue, 17 Apr 2018 15:34:13 -0700 Subject: [PATCH 19/86] Invoke CommandBar's onItemClick vs item onClick when item has an href set to avoid item is undefined in handler (#4568) * Invoke CommandBar's onItemClick vs item onClick when href set * Append anchor element type to end of union type * + changelog --- ...eco-fix-href-commandbar-item_2018-04-16-18-12.json | 11 +++++++++++ .../src/components/CommandBar/CommandBar.tsx | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json diff --git a/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json b/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json new file mode 100644 index 00000000000000..1d2cce4f7cf0ed --- /dev/null +++ b/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Passes item when href set onClick for CommandBar control", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "keco@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx index 223dc0968e366e..699f8a01e5d261 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx @@ -210,7 +210,7 @@ export class CommandBar extends BaseComponent) => void { + private _onItemClick(item: IContextualMenuItem): (ev: React.MouseEvent) => void { return (ev: React.MouseEvent): void => { if (item.inactive) { return; From e176966cd06d11de79dbac5e0897a8d70317b776 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Wed, 18 Apr 2018 10:15:04 +0000 Subject: [PATCH 20/86] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...-convert-to-markdown_2018-04-16-23-02.json | 11 ------- .../v-vibr-NavImportFix_2018-04-17-05-45.json | 11 ------- ...-convert-to-markdown_2018-04-14-00-37.json | 11 ------- ...-convert-to-markdown_2018-04-16-23-02.json | 11 ------- ...-convert-to-markdown_2018-04-11-23-54.json | 11 ------- ...-convert-to-markdown_2018-04-14-00-37.json | 11 ------- ...href-commandbar-item_2018-04-16-18-12.json | 11 ------- packages/example-app-base/CHANGELOG.json | 19 +++++++++++ packages/example-app-base/CHANGELOG.md | 9 +++++- packages/example-app-base/package.json | 4 +-- packages/experiments/CHANGELOG.json | 22 +++++++++++++ packages/experiments/CHANGELOG.md | 9 +++++- packages/experiments/package.json | 6 ++-- packages/file-type-icons/package.json | 2 +- packages/icons/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 32 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 11 ++++++- packages/office-ui-fabric-react/package.json | 6 ++-- packages/styling/CHANGELOG.json | 21 ++++++++++++ packages/styling/CHANGELOG.md | 13 +++++++- packages/styling/package.json | 2 +- packages/variants/package.json | 2 +- 27 files changed, 149 insertions(+), 98 deletions(-) delete mode 100644 common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json delete mode 100644 common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json delete mode 100644 common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json delete mode 100644 common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json delete mode 100644 common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json delete mode 100644 common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json delete mode 100644 common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 2f7ec2c418d73f..9ab88f4c25a2bf 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index c381c82ed70697..949198c3a53d5d 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 5ff8e2ae647c06..6bb6e4e5d2c959 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index f1d70ae53dcaad..29df22af56affd 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 4b6f545f9f0405..dce94fecd3535b 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json b/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json deleted file mode 100644 index b69537a76d71bf..00000000000000 --- a/common/changes/@uifabric/example-app-base/docs-convert-to-markdown_2018-04-16-23-02.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/example-app-base", - "comment": "Fix code block line-height", - "type": "patch" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json b/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json deleted file mode 100644 index c5cfaac983d449..00000000000000 --- a/common/changes/@uifabric/experiments/v-vibr-NavImportFix_2018-04-17-05-45.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Experiments: NavPage bad imports fixed.", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "v-vibr@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json deleted file mode 100644 index f5af43aba8c7cf..00000000000000 --- a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-14-00-37.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/styling", - "comment": "Add opt-in @deprecated comments", - "type": "minor" - } - ], - "packageName": "@uifabric/styling", - "email": "jordanjanzen@jordanjanzen.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json b/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json deleted file mode 100644 index 6ecf9c2f370ccb..00000000000000 --- a/common/changes/@uifabric/styling/docs-convert-to-markdown_2018-04-16-23-02.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/styling", - "comment": "Fix deprecated semantic slots returning empty strings", - "type": "patch" - } - ], - "packageName": "@uifabric/styling", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json deleted file mode 100644 index b597aadea768ce..00000000000000 --- a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-11-23-54.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Convert documentation to markdown for HIG.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "v-jojanz@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json b/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json deleted file mode 100644 index df2e7a1df91faf..00000000000000 --- a/common/changes/office-ui-fabric-react/docs-convert-to-markdown_2018-04-14-00-37.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Revamp Themes documentation", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "jordanjanzen@jordanjanzen.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json b/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json deleted file mode 100644 index 1d2cce4f7cf0ed..00000000000000 --- a/common/changes/office-ui-fabric-react/keco-fix-href-commandbar-item_2018-04-16-18-12.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Passes item when href set onClick for CommandBar control", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "keco@microsoft.com" -} \ No newline at end of file diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json index f77fcb056da710..275d0590abd7f1 100644 --- a/packages/example-app-base/CHANGELOG.json +++ b/packages/example-app-base/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/example-app-base", "entries": [ + { + "version": "5.10.1", + "tag": "@uifabric/example-app-base_v5.10.1", + "date": "Wed, 18 Apr 2018 10:15:04 GMT", + "comments": { + "patch": [ + { + "author": "Jordan Janzen ", + "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b", + "comment": "Fix code block line-height" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.1 <6.0.0` to `>=5.24.0 <6.0.0`" + } + ] + } + }, { "version": "5.10.0", "tag": "@uifabric/example-app-base_v5.10.0", diff --git a/packages/example-app-base/CHANGELOG.md b/packages/example-app-base/CHANGELOG.md index db246a4a736782..5baa14dd6a7075 100644 --- a/packages/example-app-base/CHANGELOG.md +++ b/packages/example-app-base/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/example-app-base -This log was last generated on Mon, 16 Apr 2018 10:23:25 GMT and should not be manually modified. +This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. + +## 5.10.1 +Wed, 18 Apr 2018 10:15:04 GMT + +### Patches + +- Fix code block line-height ## 5.10.0 Mon, 16 Apr 2018 10:23:25 GMT diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index 8e3699a9a68156..c2584da54950e3 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/example-app-base", - "version": "5.10.0", + "version": "5.10.1", "description": "Office UI Fabric example app base utilities for building example sites.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -33,7 +33,7 @@ "react-dom": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0" }, "dependencies": { - "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/styling": ">=5.24.0 <6.0.0", "@uifabric/utilities": ">=5.24.0 <6.0.0", "highlight.js": "^9.12.0", "markdown-to-jsx": "^6.6.0", diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index 6eda31e5c0d112..fbf34f3916ef31 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,28 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.31.3", + "tag": "@uifabric/experiments_v5.31.3", + "date": "Wed, 18 Apr 2018 10:15:04 GMT", + "comments": { + "patch": [ + { + "author": "Vitalie Braga ", + "commit": "7dabb13e55f671e3c37df88140e66dbee076e2f1", + "comment": "Experiments: NavPage bad imports fixed." + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.2 <6.0.0` to `>=5.82.3 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`" + } + ] + } + }, { "version": "5.31.2", "tag": "@uifabric/experiments_v5.31.2", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index 218dd5ee5bce8a..add532a0a9490b 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/experiments -This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. +This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. + +## 5.31.3 +Wed, 18 Apr 2018 10:15:04 GMT + +### Patches + +- Experiments: NavPage bad imports fixed. ## 5.31.2 Tue, 17 Apr 2018 18:47:11 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 3d2168c614a115..94c149366df959 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.31.2", + "version": "5.31.3", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,7 +30,7 @@ "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", "@types/webpack-env": "1.13.0", - "@uifabric/example-app-base": ">=5.10.0 <6.0.0", + "@uifabric/example-app-base": ">=5.10.1 <6.0.0", "@uifabric/file-type-icons": ">=0.6.1 <1.0.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", "es6-weak-map": "^2.0.2", @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.82.2 <6.0.0", + "office-ui-fabric-react": ">=5.82.3 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/file-type-icons/package.json b/packages/file-type-icons/package.json index f083c3dc3dfe66..ca95a33b8e5c35 100644 --- a/packages/file-type-icons/package.json +++ b/packages/file-type-icons/package.json @@ -27,7 +27,7 @@ "react-dom": "^16.3.1" }, "dependencies": { - "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/styling": ">=5.24.0 <6.0.0", "tslib": "^1.7.1" }, "peerDependencies": { diff --git a/packages/icons/package.json b/packages/icons/package.json index 459406d1d88d01..34eaec5aab5b44 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -23,7 +23,7 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/styling": ">=5.24.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 2b13fa20ed778f..7858824b306053 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,38 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.82.3", + "tag": "office-ui-fabric-react_v5.82.3", + "date": "Wed, 18 Apr 2018 10:15:04 GMT", + "comments": { + "patch": [ + { + "author": "Jordan Janzen ", + "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b", + "comment": "Convert documentation to markdown for HIG." + }, + { + "author": "Jordan Janzen ", + "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b", + "comment": "Revamp Themes documentation" + }, + { + "author": "Kevin Coughlin ", + "commit": "9e838b8674558c1eae4ebfea9278668ad8ad992a", + "comment": "Passes item when href set onClick for CommandBar control" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.1 <6.0.0` to `>=5.24.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`" + } + ] + } + }, { "version": "5.82.2", "tag": "office-ui-fabric-react_v5.82.2", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index b56c69c2a084a6..2b09418872125a 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,15 @@ # Change Log - office-ui-fabric-react -This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified. +This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. + +## 5.82.3 +Wed, 18 Apr 2018 10:15:04 GMT + +### Patches + +- Convert documentation to markdown for HIG. +- Revamp Themes documentation +- Passes item when href set onClick for CommandBar control ## 5.82.2 Tue, 17 Apr 2018 18:47:11 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 951a39addaeb54..80869f77ff1691 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.82.2", + "version": "5.82.3", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,7 +30,7 @@ "@types/sinon": "2.2.2", "@types/webpack-env": "1.13.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", - "@uifabric/example-app-base": ">=5.10.0 <6.0.0", + "@uifabric/example-app-base": ">=5.10.1 <6.0.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.1.0", "es6-promise": "^4.1.0", @@ -50,7 +50,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/icons": ">=5.7.1 <6.0.0", "@uifabric/merge-styles": ">=5.15.2 <6.0.0", - "@uifabric/styling": ">=5.23.1 <6.0.0", + "@uifabric/styling": ">=5.24.0 <6.0.0", "@uifabric/utilities": ">=5.24.0 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/styling/CHANGELOG.json b/packages/styling/CHANGELOG.json index 55cb89e454e274..e57b0c81cfa25f 100644 --- a/packages/styling/CHANGELOG.json +++ b/packages/styling/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@uifabric/styling", "entries": [ + { + "version": "5.24.0", + "tag": "@uifabric/styling_v5.24.0", + "date": "Wed, 18 Apr 2018 10:15:04 GMT", + "comments": { + "minor": [ + { + "author": "Jordan Janzen ", + "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b", + "comment": "Add opt-in @deprecated comments" + } + ], + "patch": [ + { + "author": "Jordan Janzen ", + "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b", + "comment": "Fix deprecated semantic slots returning empty strings" + } + ] + } + }, { "version": "5.23.1", "tag": "@uifabric/styling_v5.23.1", diff --git a/packages/styling/CHANGELOG.md b/packages/styling/CHANGELOG.md index 2d1951bf51cb06..d6000c091bbda5 100644 --- a/packages/styling/CHANGELOG.md +++ b/packages/styling/CHANGELOG.md @@ -1,6 +1,17 @@ # Change Log - @uifabric/styling -This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. +This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. + +## 5.24.0 +Wed, 18 Apr 2018 10:15:04 GMT + +### Minor changes + +- Add opt-in @deprecated comments + +### Patches + +- Fix deprecated semantic slots returning empty strings ## 5.23.1 Mon, 16 Apr 2018 10:23:26 GMT diff --git a/packages/styling/package.json b/packages/styling/package.json index efbdb5165a2f75..5a6c1ad893f728 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/styling", - "version": "5.23.1", + "version": "5.24.0", "description": "Defines the core Office UI Fabric styles through a JavaScript interface.", "repository": { "type": "git", diff --git a/packages/variants/package.json b/packages/variants/package.json index 47c49f3b07f6ea..aaec438878d000 100644 --- a/packages/variants/package.json +++ b/packages/variants/package.json @@ -26,6 +26,6 @@ }, "dependencies": { "tslib": "^1.7.1", - "@uifabric/styling": ">=5.23.1 <6.0.0" + "@uifabric/styling": ">=5.24.0 <6.0.0" } } \ No newline at end of file From 9cc47f548636e7b952aed80cb75e2adce39a2a32 Mon Sep 17 00:00:00 2001 From: jspurlin Date: Wed, 18 Apr 2018 08:56:01 -0700 Subject: [PATCH 21/86] ContextualMenu: Update mousemove behavior (#4589) * ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates * rush change * change spacing * Make sure we are clearing the enterTimerId after executing in the settimeout * fix missing line to set enterTimerId back to undefined if the item does not have a submenu --- ...lMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json | 11 +++++++++++ .../src/components/ContextualMenu/ContextualMenu.tsx | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json diff --git a/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json b/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json new file mode 100644 index 00000000000000..84b39b0f1ff817 --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jspurlin@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index 80f200115260ee..bf64647c86c86c 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -793,7 +793,9 @@ export class ContextualMenu extends BaseComponent { this._onSubMenuDismiss(ev); targetElement.focus(); + this._enterTimerId = undefined; }, timeoutDuration); } } From 1b45279a6e2726e0c57d464272cae98c2e01c35e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 18 Apr 2018 09:50:05 -0700 Subject: [PATCH 22/86] ProgressIndicator: convert to mergeStyles - part 1 (#4592) * Scaffold styles file * Split to base file. * Scaffold types file. * Export base --- .../ProgressIndicator.base.tsx | 67 +++++++++++++++ .../ProgressIndicator.styles.ts | 48 +++++++++++ .../ProgressIndicator/ProgressIndicator.tsx | 84 ++++--------------- .../ProgressIndicator.types.ts | 53 ++++++++++-- .../src/components/ProgressIndicator/index.ts | 1 + 5 files changed, 178 insertions(+), 75 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx create mode 100644 packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx new file mode 100644 index 00000000000000..586b762d11152e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { + BaseComponent, + css +} from '../../Utilities'; +import { IProgressIndicatorProps } from './ProgressIndicator.types'; +import * as stylesImport from './ProgressIndicator.scss'; +const styles: any = stylesImport; + +// if the percentComplete is near 0, don't animate it. +// This prevents animations on reset to 0 scenarios +const ZERO_THRESHOLD = 0.01; + +export class ProgressIndicatorBase extends BaseComponent { + public static defaultProps = { + label: '', + description: '', + width: 180 + }; + + constructor(props: IProgressIndicatorProps) { + super(props); + + this._warnDeprecations({ + title: 'label' + }); + + } + + public render() { + const { title, description, className, ariaValueText } = this.props; + let { label, percentComplete } = this.props; + + // Handle deprecated value. + if (title) { + label = title; + } + + if (this.props.percentComplete !== undefined) { + percentComplete = Math.min(100, Math.max(0, percentComplete! * 100)); + } + + return ( +
+
{ label }
+
+
+
ZERO_THRESHOLD && 'smoothTransition', + percentComplete === undefined && styles.indeterminate + ) } + style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } + role='progressbar' + aria-valuemin={ 0 } + aria-valuemax={ 100 } + aria-valuenow={ percentComplete } + aria-valuetext={ ariaValueText } + /> +
+
{ description }
+
+ ); + } +} diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts new file mode 100644 index 00000000000000..14ccfb155facc9 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -0,0 +1,48 @@ +import { IStyle, keyframes } from '../../Styling'; +import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; + +export const getStyles = ( + props: IProgressIndicatorStyleProps +): IProgressIndicatorStyles => { + const { + className, + theme, + indeterminate, + smoothTransition, + } = props; + + const { palette, semanticColors } = theme; + + return ({ + root: [ + 'ms-ProgressIndicator', + {}, + className + ], + + itemName: [ + 'ms-ProgressIndicator-itemName', + {} + ], + + itemDescription: [ + 'ms-ProgressIndicator-itemDescription', + {} + ], + + itemProgress: [ + 'ms-ProgressIndicator-itemProgress', + {} + ], + + progressTrack: [ + 'ms-ProgressIndicator-progressTrack', + {} + ], + + progressBar: [ + 'ms-ProgressIndicator-progressBar', + {}, + ], + }); +}; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx index 9487e06251e3b9..5f9dd23cadfbb3 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -1,70 +1,16 @@ -/* tslint:disable:no-unused-variable */ -import * as React from 'react'; -/* tslint:enable:no-unused-variable */ - +import { styled } from '../../Utilities'; import { - BaseComponent, - css -} from '../../Utilities'; -import { IProgressIndicatorProps } from './ProgressIndicator.types'; -import * as stylesImport from './ProgressIndicator.scss'; -const styles: any = stylesImport; - -// if the percentComplete is near 0, don't animate it. -// This prevents animations on reset to 0 scenarios -const ZERO_THRESHOLD = 0.01; - -export class ProgressIndicator extends BaseComponent { - public static defaultProps = { - label: '', - description: '', - width: 180 - }; - - constructor(props: IProgressIndicatorProps) { - super(props); - - this._warnDeprecations({ - title: 'label' - }); - - } - - public render() { - const { title, description, className, ariaValueText } = this.props; - let { label, percentComplete } = this.props; - - // Handle deprecated value. - if (title) { - label = title; - } - - if (this.props.percentComplete !== undefined) { - percentComplete = Math.min(100, Math.max(0, percentComplete! * 100)); - } - - return ( -
-
{ label }
-
-
-
ZERO_THRESHOLD && 'smoothTransition', - percentComplete === undefined && styles.indeterminate - ) } - style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined } - role='progressbar' - aria-valuemin={ 0 } - aria-valuemax={ 100 } - aria-valuenow={ percentComplete } - aria-valuetext={ ariaValueText } - /> -
-
{ description }
-
- ); - } -} + IProgressIndicatorProps, + IProgressIndicatorStyleProps, + IProgressIndicatorStyles +} from './ProgressIndicator.types'; +import { ProgressIndicatorBase } from './ProgressIndicator.base'; +import { getStyles } from './ProgressIndicator.styles'; + +/** +* ProgressIndicator description +*/ +export const ProgressIndicator = styled( + ProgressIndicatorBase, + getStyles +); diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts index b1bb692efdecda..547667bb8f3e69 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -1,16 +1,31 @@ -export interface IProgressIndicator { +import * as React from 'react'; +import { ProgressIndicatorBase } from './ProgressIndicator.base'; +import { IStyle, ITheme } from '../../Styling'; +import { IStyleFunction } from '../../Utilities'; +export interface IProgressIndicator { + focus: () => void; } -export interface IProgressIndicatorProps { +export interface IProgressIndicatorProps extends React.Props { + /** + * Gets the component ref. + */ + componentRef?: (component: IProgressIndicatorProps | null) => void; + /** - * Optional callback to access the IProgressIndicator interface. Use this instead of ref for accessing - * the public methods and properties of the component. + * Call to provide customized styling that will layer on top of the variant rules. */ - componentRef?: (component: IProgressIndicator | null) => void; + getStyles?: IStyleFunction; /** - * Class name to apply to the root in addition to ms-ProgressIndicator. + * Theme provided by High-Order Component. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the ProgressIndicator + * @defaultvalue undefined */ className?: string; @@ -40,3 +55,29 @@ export interface IProgressIndicatorProps { */ title?: string; } + +export interface IProgressIndicatorStyleProps { + /** + * Theme provided by High-Order Component. + */ + theme: ITheme; + + /** + * Accept custom classNames + */ + className?: string; + indeterminate?: boolean; + smoothTransition?: boolean; +} + +export interface IProgressIndicatorStyles { + /** + * Style for the root element. + */ + root: IStyle; + itemName: IStyle; + itemDescription: IStyle; + itemProgress: IStyle; + progressTrack: IStyle; + progressBar: IStyle; +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts index c03c55d7411bb8..56e3192e1179bd 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts @@ -1,2 +1,3 @@ export * from './ProgressIndicator'; +export * from './ProgressIndicator.base'; export * from './ProgressIndicator.types'; From c49c51ca8be12f70e66b5d2c93d55a885f9f21ac Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Wed, 18 Apr 2018 17:02:26 +0000 Subject: [PATCH 23/86] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...nuUpdateMouseMoveBehavior_2018-04-17-17-55.json | 11 ----------- packages/experiments/package.json | 2 +- packages/office-ui-fabric-react/CHANGELOG.json | 14 ++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 9 ++++++++- packages/office-ui-fabric-react/package.json | 2 +- 10 files changed, 29 insertions(+), 19 deletions(-) delete mode 100644 common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 9ab88f4c25a2bf..a356c1a617cdb1 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 949198c3a53d5d..b3475257ae60c6 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 6bb6e4e5d2c959..036bd48df3534b 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 29df22af56affd..8e198d162882ec 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index dce94fecd3535b..b6a1190c403ba7 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json b/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json deleted file mode 100644 index 84b39b0f1ff817..00000000000000 --- a/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuUpdateMouseMoveBehavior_2018-04-17-17-55.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "jspurlin@microsoft.com" -} \ No newline at end of file diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 94c149366df959..b776d94fdc8203 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.82.3 <6.0.0", + "office-ui-fabric-react": ">=5.82.4 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 7858824b306053..179959f47dfa51 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.82.4", + "tag": "office-ui-fabric-react_v5.82.4", + "date": "Wed, 18 Apr 2018 17:02:26 GMT", + "comments": { + "patch": [ + { + "author": "jspurlin ", + "commit": "9cc47f548636e7b952aed80cb75e2adce39a2a32", + "comment": "ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates" + } + ] + } + }, { "version": "5.82.3", "tag": "office-ui-fabric-react_v5.82.3", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index 2b09418872125a..f8e075698e93dd 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - office-ui-fabric-react -This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. +This log was last generated on Wed, 18 Apr 2018 17:02:26 GMT and should not be manually modified. + +## 5.82.4 +Wed, 18 Apr 2018 17:02:26 GMT + +### Patches + +- ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates ## 5.82.3 Wed, 18 Apr 2018 10:15:04 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 80869f77ff1691..2957b405f65051 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.82.3", + "version": "5.82.4", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", From 7c592e981fd8c16272bfa0f8451172467ae1c8ef Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 18 Apr 2018 13:07:07 -0700 Subject: [PATCH 24/86] Choicegroup: Improved states for focus, HC focus, HC hover (#4572) * High contrast focus and hover + regular focus fix * Added change file * In HC, highlighting text on hover, too --- .../choicegroup-focus_2018-04-16-21-59.json | 11 +++++++++++ .../src/components/ChoiceGroup/ChoiceGroup.scss | 17 +++++++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json diff --git a/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json b/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json new file mode 100644 index 00000000000000..4fa1858f2eab5c --- /dev/null +++ b/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss index 62bc6086d1d6ee..1c6b798ad2b569 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss @@ -121,10 +121,18 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1); &:focus { &::before { border-color: $radioButton-border-hover-color; + + @include high-contrast { + border-color: Highlight; + } } :global(.ms-Label) { color: $radioButton-text-hover-color; + + @include high-contrast { + color: Highlight; + } } } @@ -302,6 +310,11 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1); &:focus { border-color: $ms-color-neutralTertiaryAlt; + @include high-contrast { + border-color: Highlight; + color: Highlight; + } + &::before { opacity: 1; } @@ -367,10 +380,10 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1); :global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus { &.choiceFieldIsImage .choiceFieldWrapper, &.choiceFieldIsIcon .choiceFieldWrapper { - @include focus-border(1px, $ms-color-neutralPrimary, 2px, false); + @include focus-border(-2px, $ms-color-neutralSecondary, 1px, false); @include high-contrast { - @include focus-border(1px, WindowText, 2px, false); + @include focus-border(-2px, WindowText, 1px, false); } } } \ No newline at end of file From 5f6ae67eeec2283e6bc0dd890ac614ec2f73d687 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 18 Apr 2018 13:11:24 -0700 Subject: [PATCH 25/86] Searchbox: Clicking in front of input text puts cursor at the start of the text (#4587) * Clicks before text set cursor to beginning of text * Add change file * Fix chrome bug and add cursor * Updated snapshot --- .../searchbox-focus_2018-04-17-18-23.json | 11 +++++++++++ .../components/SearchBox/SearchBox.base.tsx | 18 ++++++++++++++++-- .../components/SearchBox/SearchBox.styles.tsx | 3 ++- .../__snapshots__/SearchBox.test.tsx.snap | 2 ++ 4 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json diff --git a/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json b/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json new file mode 100644 index 00000000000000..630155d1bcf41b --- /dev/null +++ b/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: Clicks on element before input field set cursor to start of input text.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index 24597119e0b0f2..9d9f72145e7043 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -82,8 +82,14 @@ export class SearchBoxBase extends BaseComponent -
- +
+
{ + const inputElement = this._inputElement.value; + if (inputElement) { + this.focus(); + inputElement.selectionStart = inputElement.selectionEnd = 0; + } + } + private _onFocusCapture = (ev: React.FocusEvent) => { this.setState({ hasFocus: true diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 17028bade5a3e1..280b9d65b7eb2f 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -84,7 +84,8 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { width: 32, textAlign: 'center', transition: `width ${AnimationVariables.durationValue1}`, - color: palette.themePrimary + color: palette.themePrimary, + cursor: 'text' }, hasFocus && { width: 4, diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index ea8c6904b138fd..dc8155cc4fdead 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -44,6 +44,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` ms-SearchBox-iconContainer { color: #0078d4; + cursor: text; display: flex; flex-direction: column; flex-shrink: 0; @@ -53,6 +54,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` transition: width 0.167s; width: 32px; } + onClick={[Function]} > Date: Wed, 18 Apr 2018 13:19:27 -0700 Subject: [PATCH 26/86] ActivityItem: add pulsing beacon animation (#4553) * Pulsing beacon straight from Coachmark, just smaller, needs perf impr * timing like coachmark * Only render the beacon if necessary * More consistent classname * More descriptive prop * More aligned icon positioning, ready for animation to come from styling * Added animation from styling package * Removed comma * Added change file * Updated snaphots * Added test for animation * Double pulse and single pulse * Animation polish + content fade and slide * Updated snapshot and removed unused import * Added styling change file * Add missing semicolon * Lower zIndex and fix HC mode alignment * Updated snapshot * Switch default beacon colors to theme colors * Setting default beacon colors from the theme in styling instead of default props --- ...ivity-item-animation_2018-04-13-22-07.json | 11 + ...ivity-item-animation_2018-04-05-17-04.json | 11 + .../ActivityItem/ActivityItem.classNames.ts | 6 + .../ActivityItem/ActivityItem.styles.ts | 84 +++++- .../ActivityItem/ActivityItem.test.tsx | 13 + .../components/ActivityItem/ActivityItem.tsx | 12 +- .../ActivityItem/ActivityItem.types.ts | 22 ++ .../__snapshots__/ActivityItem.test.tsx.snap | 260 ++++++++++++++++++ .../components/Coachmark/Coachmark.styles.ts | 13 +- .../src/components/Coachmark/Coachmark.tsx | 10 +- .../styles/PulsingBeaconAnimationStyles.ts | 25 +- 11 files changed, 439 insertions(+), 28 deletions(-) create mode 100644 common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json create mode 100644 common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json diff --git a/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json b/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json new file mode 100644 index 00000000000000..e0300b30da2fcb --- /dev/null +++ b/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "PulsingBeaconAnimationStyles: Distinguish between single and double pulse.", + "packageName": "@uifabric/styling", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json b/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json new file mode 100644 index 00000000000000..a1e142e39515a9 --- /dev/null +++ b/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ActivityItem: Added the pulsing beacon animation for the compact size.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts index 4bc5f7842f2c65..71344018de9b67 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts @@ -16,6 +16,7 @@ export interface IActivityItemClassNames { activityTypeIcon?: string; commentText?: string; timeStamp?: string; + pulsingBeacon?: string; } export const getClassNames = memoizeFunction(( @@ -32,6 +33,11 @@ export const getClassNames = memoizeFunction(( isCompact && styles.isCompactRoot ), + pulsingBeacon: mergeStyles( + 'ms-ActivityItem-pulsingBeacon', + styles.pulsingBeacon + ), + personaContainer: mergeStyles( 'ms-ActivityItem-personaContainer', styles.personaContainer, diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts index 4833241cd5c222..e6fe80298c0e98 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts @@ -2,22 +2,66 @@ import { concatStyleSets, ITheme, getTheme, - HighContrastSelector + HighContrastSelector, + keyframes, + PulsingBeaconAnimationStyles } from '../../Styling'; import { memoizeFunction } from '../../Utilities'; -import { IActivityItemStyles } from './ActivityItem.types'; +import { IActivityItemStyles, IActivityItemProps } from './ActivityItem.types'; const DEFAULT_PERSONA_SIZE = '32px'; const COMPACT_PERSONA_SIZE = '16px'; const DEFAULT_ICON_SIZE = '16px'; const COMPACT_ICON_SIZE = '13px'; +const ANIMATION_INNER_DIMENSION = '4px'; +const ANIMATION_OUTER_DIMENSION = '28px'; +const ANIMATION_BORDER_WIDTH = '4px'; export const getStyles = memoizeFunction(( + props: IActivityItemProps, theme: ITheme = getTheme(), customStyles?: IActivityItemStyles ): IActivityItemStyles => { + + const continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle( + props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary, + props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary, + ANIMATION_INNER_DIMENSION, + ANIMATION_OUTER_DIMENSION, + ANIMATION_BORDER_WIDTH + ); + + const fadeIn: string = keyframes({ + from: { opacity: 0, }, + to: { opacity: 1, } + }); + + const slideIn: string = keyframes({ + from: { transform: 'translateX(-10px)' }, + to: { transform: 'translateX(0)' } + }); + + const continuousPulseAnimation = { + animationName: continuousPulse, + animationIterationCount: '1', + animationDuration: '.8s', + zIndex: 1 + }; + + const slideInAnimation = { + animationName: slideIn, + animationIterationCount: '1', + animationDuration: '.5s', + }; + + const fadeInAnimation = { + animationName: fadeIn, + animationIterationCount: '1', + animationDuration: '.5s', + }; + const ActivityItemStyles: IActivityItemStyles = { root: [ @@ -29,7 +73,23 @@ export const getStyles = memoizeFunction(( lineHeight: '17px', boxSizing: 'border-box', color: theme.palette.neutralSecondary - } + }, + (props.isCompact && props.animateBeaconSignal) && fadeInAnimation + ], + + pulsingBeacon: [ + { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '0px', + height: '0px', + borderRadius: '225px', + borderStyle: 'solid', + opacity: 0 + }, + (props.isCompact && props.animateBeaconSignal) && continuousPulseAnimation ], isCompactRoot: { @@ -63,19 +123,24 @@ export const getStyles = memoizeFunction(( isCompactIcon: { height: COMPACT_PERSONA_SIZE, + minWidth: COMPACT_PERSONA_SIZE, fontSize: COMPACT_ICON_SIZE, lineHeight: COMPACT_ICON_SIZE, color: theme.palette.themePrimary, marginTop: '1px', + position: 'relative', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', selectors: { '.ms-Persona-imageArea': { - marginTop: '-2px', + margin: '-2px 0 0 -2px', border: '2px solid' + theme.palette.white, borderRadius: '50%', selectors: { [HighContrastSelector]: { border: 'none', - marginTop: '0' + margin: '0' } } } @@ -101,9 +166,12 @@ export const getStyles = memoizeFunction(( overflow: 'visible' }, - activityContent: { - padding: '0 8px' - }, + activityContent: [ + { + padding: '0 8px' + }, + (props.isCompact && props.animateBeaconSignal) && slideInAnimation + ], activityText: { display: 'inline' diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx index e27dcbb687ee9f..56359571948d50 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx @@ -100,4 +100,17 @@ describe('ActivityItem', () => { expect(tree).toMatchSnapshot(); }); + it('renders compact with animation correctly', () => { + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + }); 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 978f0f9f80461e..6c7281ebe9814b 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx @@ -1,7 +1,7 @@ /* tslint:disable */ import * as React from 'react'; /* tslint:enable */ - +import { DefaultPalette } from '../../Styling'; import { BaseComponent } from '../../Utilities'; import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types'; import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames'; @@ -9,6 +9,7 @@ import { getStyles } from './ActivityItem.styles'; import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona'; export class ActivityItem extends BaseComponent { + constructor(props: IActivityItemProps) { super(props); } @@ -19,7 +20,9 @@ export class ActivityItem extends BaseComponent { onRenderActivityDescription = this._onRenderActivityDescription, onRenderComments = this._onRenderComments, onRenderTimeStamp = this._onRenderTimeStamp, - styles: customStyles + styles: customStyles, + animateBeaconSignal, + isCompact } = this.props; const classNames = this._getClassNames(this.props); @@ -29,6 +32,9 @@ export class ActivityItem extends BaseComponent { { (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
+ { animateBeaconSignal && isCompact && +
+ } { onRenderIcon(this.props) }
} @@ -122,6 +128,6 @@ export class ActivityItem extends BaseComponent { } private _getClassNames(props: IActivityItemProps): IActivityItemClassNames { - return getClassNames(getStyles(undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!); + return getClassNames(getStyles(props, undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!); } } diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts index cb9ac03a1c5197..f869598ee9e8c0 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts @@ -76,6 +76,23 @@ export interface IActivityItemProps extends React.AllHTMLAttributes * Element shown as a timestamp on this activity. If not included, no timestamp is shown. */ timeStamp?: string | React.ReactNode[] | React.ReactNode; + + /** + * Beacon color one + */ + beaconColorOne?: string; + + /** + * Beacon color two + */ + beaconColorTwo?: string; + + /** + * Enables/Disables the beacon that radiates + * from the center of the center of the activity icon. Signals an activity has started. + * @default false + */ + animateBeaconSignal?: boolean; } export interface IActivityItemStyles { @@ -84,6 +101,11 @@ export interface IActivityItemStyles { */ root?: IStyle; + /** + * Styles applied to the root activity item container. + */ + pulsingBeacon?: IStyle; + /** * Styles applied to the main container of the activity's description. */ diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 080d69cf5cce9d..164b56b09f4073 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -23,19 +23,30 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` className= ms-ActivityItem-activityTypeIcon { + align-items: center; color: #0078d4; + display: flex; font-size: 13px; height: 16px; + justify-content: center; line-height: 13px; margin-top: 1px; + min-width: 16px; + position: relative; } & .ms-Persona-imageArea { border-radius: 50%; border: 2px solid#ffffff; + margin-bottom: 0; + margin-left: -2px; + margin-right: 0; margin-top: -2px; } @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea { border: none; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; margin-top: 0; } > @@ -214,19 +225,30 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = ` className= ms-ActivityItem-activityTypeIcon { + align-items: center; color: #0078d4; + display: flex; font-size: 13px; height: 16px; + justify-content: center; line-height: 13px; margin-top: 1px; + min-width: 16px; + position: relative; } & .ms-Persona-imageArea { border-radius: 50%; border: 2px solid#ffffff; + margin-bottom: 0; + margin-left: -2px; + margin-right: 0; margin-top: -2px; } @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea { border: none; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; margin-top: 0; } > @@ -270,6 +292,233 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
`; +exports[`ActivityItem renders compact with animation correctly 1`] = ` +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + + description text + + +
+
+`; + exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts index 08374d695f52ed..fbca8bb40fa533 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts @@ -2,7 +2,9 @@ import { IStyle, IRawStyle, keyframes, - PulsingBeaconAnimationStyles + PulsingBeaconAnimationStyles, + ITheme, + getTheme } from '../../Styling'; export interface ICoachmarkStyleProps { @@ -217,14 +219,15 @@ export const rotateOne: string = keyframes({ } }); -export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles { +export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(), +): ICoachmarkStyles { const animationInnerDimension = '35px'; const animationOuterDimension = '150px'; const animationBorderWidth = '10px'; - const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimation( - props.beaconColorOne!, - props.beaconColorTwo!, + const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimationDouble( + props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary, + props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary, animationInnerDimension, animationOuterDimension, animationBorderWidth diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx index 0500dd656c5f73..456be317cb78d4 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx @@ -71,8 +71,6 @@ export class Coachmark extends BaseComponent { delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up width: 36, height: 36, - beaconColorOne: '#00FFEC', - beaconColorTwo: '#005EDD', color: DefaultPalette.themePrimary }; @@ -108,9 +106,7 @@ export class Coachmark extends BaseComponent { target, width, height, - color, - beaconColorOne, - beaconColorTwo + color } = this.props; const classNames = getClassNames(getStyles, { @@ -121,9 +117,7 @@ export class Coachmark extends BaseComponent { entityHostWidth: this.state.entityInnerHostRect.width + 'px', width: width + 'px', height: height + 'px', - color: color, - beaconColorOne: beaconColorOne, - beaconColorTwo: beaconColorTwo + color: color }); return ( diff --git a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts index eac7e609045cf6..bc15dbadd6a600 100644 --- a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts +++ b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts @@ -45,7 +45,7 @@ function _continuousPulseStepFive(beaconColorOne: string, innerDimension: string }; } -function _continuousPulseAnimation( +function _continuousPulseAnimationDouble( beaconColorOne: string, beaconColorTwo: string, innerDimension: string, @@ -73,8 +73,24 @@ function _continuousPulseAnimation( }); } +function _continuousPulseAnimationSingle( + beaconColorOne: string, + beaconColorTwo: string, + innerDimension: string, + outerDimension: string, + borderWidth: string +): string { + return keyframes({ + '0%': _continuousPulseStepOne(beaconColorOne, innerDimension), + '14.2%': _continuousPulseStepTwo(borderWidth), + '35.7%': _continuousPulseStepThree(), + '71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension), + '100%': {} + }); +} + function _createDefaultAnimation( - animationName: string, + animationName: string ): IRawStyle { return { animationName, @@ -85,6 +101,7 @@ function _createDefaultAnimation( } export const PulsingBeaconAnimationStyles = { - continuousPulseAnimation: _continuousPulseAnimation, - createDefaultAnimation: _createDefaultAnimation + continuousPulseAnimationDouble: _continuousPulseAnimationDouble, + continuousPulseAnimationSingle: _continuousPulseAnimationSingle, + createDefaultAnimation: _createDefaultAnimation, }; \ No newline at end of file From 9686b87ca379e171f773e6765bde8c0f012d1c5e Mon Sep 17 00:00:00 2001 From: rebeccaballantyne Date: Wed, 18 Apr 2018 14:11:45 -0700 Subject: [PATCH 27/86] Fixes invalid aria-owns/ activedescendant attributes on BasePicker (#4552) * Fixing invalid aria-owns field on BasePicker * Rush change log * Removing unnecessary !! * Changing blank string to undefined * Updating snapshots to use undefined as well * Fixes issue for active descendant --- .../rebeba-aria-owns-invalid_2018-04-13-21-39.json | 11 +++++++++++ .../src/components/pickers/BasePicker.tsx | 6 +++--- .../pickers/__snapshots__/BasePicker.test.tsx.snap | 4 ++-- 3 files changed, 16 insertions(+), 5 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json diff --git a/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json b/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json new file mode 100644 index 00000000000000..d668487332ce25 --- /dev/null +++ b/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "rebeba@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index 271599cfc9c4ef..1a8956f3a3b486 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -205,7 +205,7 @@ export class BasePicker> extends BaseComponent< onInputValueChange={ this.onInputChange } suggestedDisplayValue={ suggestedDisplayValue } aria-activedescendant={ activeDescendant } - aria-owns='suggestion-list' + aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined } aria-expanded={ !!this.state.suggestionsVisible } aria-haspopup='true' autoCapitalize='off' @@ -745,8 +745,8 @@ export class BasePickerListBelow> extends BaseP onBlur={ this.onInputBlur } onInputValueChange={ this.onInputChange } suggestedDisplayValue={ suggestedDisplayValue } - aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex } - aria-owns='suggestion-list' + aria-activedescendant={ this.state.suggestionsVisible ? 'sug-' + this.suggestionStore.currentIndex : undefined } + aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined } aria-expanded={ !!this.state.suggestionsVisible } aria-haspopup='true' autoCapitalize='off' diff --git a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap index 6ed2487d4f220f..999cb7667e9d9f 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap @@ -44,7 +44,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = ` aria-controls="selected-suggestion-alert" aria-expanded={false} aria-haspopup="true" - aria-owns="suggestion-list" + aria-owns={undefined} autoCapitalize="off" autoComplete="off" className="ms-BasePicker-input" @@ -111,7 +111,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = ` aria-controls="selected-suggestion-alert" aria-expanded={false} aria-haspopup="true" - aria-owns="suggestion-list" + aria-owns={undefined} autoCapitalize="off" autoComplete="off" className="ms-BasePicker-input" From dfc9c2cd1e9e50c27e8f62768fb72e4272f5d2b7 Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Wed, 18 Apr 2018 15:26:12 -0700 Subject: [PATCH 28/86] Fix more index imports (#4604) * Fix PersonaCoin index import * Update change output --- .../fix-index-imports_2018-04-18-16-26.json | 11 +++++++++++ .../src/components/Persona/Persona.base.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json diff --git a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json new file mode 100644 index 00000000000000..52a77078e932b9 --- /dev/null +++ b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix PersonaCoin index import", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index b723aa4a152ac9..7aed9cd74e8cb7 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -8,7 +8,7 @@ import { IRenderFunction, } from '../../Utilities'; import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip'; -import { PersonaCoin } from './PersonaCoin'; +import { PersonaCoin } from './PersonaCoin/PersonaCoin'; import { IPersonaProps, IPersonaSharedProps, From 9a47213bbccb57d5ce8b9aab96fa6a4322d40b9b Mon Sep 17 00:00:00 2001 From: erichdev Date: Wed, 18 Apr 2018 15:50:43 -0700 Subject: [PATCH 29/86] Reenable bundlesize in yaml (#4590) * Update .travis.yml * Reenable bundlesize in yaml * Remove additions --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index ab67c1b14fc8c2..37768f45f95425 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,5 +6,5 @@ script: npm run checkchange; fi - npm run buildfast -# - npm run bundlesize - - npm run vrtest + - npm run bundlesize + - npm run vrtest \ No newline at end of file From 5610079080f9be4f1dc5b6de9ce59add66f473d8 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Thu, 19 Apr 2018 00:17:38 +0000 Subject: [PATCH 30/86] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...ivity-item-animation_2018-04-13-22-07.json | 11 ----- ...ivity-item-animation_2018-04-05-17-04.json | 11 ----- .../choicegroup-focus_2018-04-16-21-59.json | 11 ----- .../fix-index-imports_2018-04-18-16-26.json | 11 ----- ...ba-aria-owns-invalid_2018-04-13-21-39.json | 11 ----- .../searchbox-focus_2018-04-17-18-23.json | 11 ----- packages/example-app-base/package.json | 2 +- packages/experiments/package.json | 2 +- packages/file-type-icons/package.json | 2 +- packages/icons/package.json | 2 +- .../office-ui-fabric-react/CHANGELOG.json | 41 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 16 +++++++- packages/office-ui-fabric-react/package.json | 4 +- packages/styling/CHANGELOG.json | 14 +++++++ packages/styling/CHANGELOG.md | 9 +++- packages/styling/package.json | 2 +- packages/variants/package.json | 2 +- 22 files changed, 91 insertions(+), 81 deletions(-) delete mode 100644 common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json delete mode 100644 common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json delete mode 100644 common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json delete mode 100644 common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json delete mode 100644 common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json delete mode 100644 common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index a356c1a617cdb1..5aaca418d3c452 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index b3475257ae60c6..132a7e4f737885 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index 036bd48df3534b..fd69947fa82b9f 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 8e198d162882ec..11cdab4210adcf 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index b6a1190c403ba7..7dd59db4cfeb7d 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json b/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json deleted file mode 100644 index e0300b30da2fcb..00000000000000 --- a/common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "comment": "PulsingBeaconAnimationStyles: Distinguish between single and double pulse.", - "packageName": "@uifabric/styling", - "type": "minor" - } - ], - "packageName": "@uifabric/styling", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json b/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json deleted file mode 100644 index a1e142e39515a9..00000000000000 --- a/common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ActivityItem: Added the pulsing beacon animation for the compact size.", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json b/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json deleted file mode 100644 index 4fa1858f2eab5c..00000000000000 --- a/common/changes/office-ui-fabric-react/choicegroup-focus_2018-04-16-21-59.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json b/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json deleted file mode 100644 index 52a77078e932b9..00000000000000 --- a/common/changes/office-ui-fabric-react/fix-index-imports_2018-04-18-16-26.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix PersonaCoin index import", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "tmichon@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json b/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json deleted file mode 100644 index d668487332ce25..00000000000000 --- a/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "rebeba@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json b/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json deleted file mode 100644 index 630155d1bcf41b..00000000000000 --- a/common/changes/office-ui-fabric-react/searchbox-focus_2018-04-17-18-23.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "SearchBox: Clicks on element before input field set cursor to start of input text.", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index c2584da54950e3..1996637a32b425 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -33,7 +33,7 @@ "react-dom": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0" }, "dependencies": { - "@uifabric/styling": ">=5.24.0 <6.0.0", + "@uifabric/styling": ">=5.25.0 <6.0.0", "@uifabric/utilities": ">=5.24.0 <6.0.0", "highlight.js": "^9.12.0", "markdown-to-jsx": "^6.6.0", diff --git a/packages/experiments/package.json b/packages/experiments/package.json index b776d94fdc8203..789e174a023c15 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.82.4 <6.0.0", + "office-ui-fabric-react": ">=5.83.0 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/file-type-icons/package.json b/packages/file-type-icons/package.json index ca95a33b8e5c35..825cf8ce800604 100644 --- a/packages/file-type-icons/package.json +++ b/packages/file-type-icons/package.json @@ -27,7 +27,7 @@ "react-dom": "^16.3.1" }, "dependencies": { - "@uifabric/styling": ">=5.24.0 <6.0.0", + "@uifabric/styling": ">=5.25.0 <6.0.0", "tslib": "^1.7.1" }, "peerDependencies": { diff --git a/packages/icons/package.json b/packages/icons/package.json index 34eaec5aab5b44..b353ceb5095128 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -23,7 +23,7 @@ "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0" }, "dependencies": { - "@uifabric/styling": ">=5.24.0 <6.0.0", + "@uifabric/styling": ">=5.25.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 179959f47dfa51..43ce3d5e19ee0a 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,47 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.83.0", + "tag": "office-ui-fabric-react_v5.83.0", + "date": "Thu, 19 Apr 2018 00:17:37 GMT", + "comments": { + "minor": [ + { + "author": "lynamemi ", + "commit": "7d066299cd2f3a13014ff2a43a2b2f76a0efb0d7", + "comment": "ActivityItem: Added the pulsing beacon animation for the compact size." + }, + { + "author": "lynamemi ", + "commit": "5f6ae67eeec2283e6bc0dd890ac614ec2f73d687", + "comment": "SearchBox: Clicks on element before input field set cursor to start of input text." + } + ], + "patch": [ + { + "author": "lynamemi ", + "commit": "7c592e981fd8c16272bfa0f8451172467ae1c8ef", + "comment": "ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover." + }, + { + "author": "Thomas Michon ", + "commit": "dfc9c2cd1e9e50c27e8f62768fb72e4272f5d2b7", + "comment": "Fix PersonaCoin index import" + }, + { + "author": "rebeccaballantyne ", + "commit": "9686b87ca379e171f773e6765bde8c0f012d1c5e", + "comment": "Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/styling\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`" + } + ] + } + }, { "version": "5.82.4", "tag": "office-ui-fabric-react_v5.82.4", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index f8e075698e93dd..f462e69384a4e6 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,20 @@ # Change Log - office-ui-fabric-react -This log was last generated on Wed, 18 Apr 2018 17:02:26 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 00:17:37 GMT and should not be manually modified. + +## 5.83.0 +Thu, 19 Apr 2018 00:17:37 GMT + +### Minor changes + +- ActivityItem: Added the pulsing beacon animation for the compact size. +- SearchBox: Clicks on element before input field set cursor to start of input text. + +### Patches + +- ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover. +- Fix PersonaCoin index import +- Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered ## 5.82.4 Wed, 18 Apr 2018 17:02:26 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 2957b405f65051..3dfe4ea02174f4 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.82.4", + "version": "5.83.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -50,7 +50,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "@uifabric/icons": ">=5.7.1 <6.0.0", "@uifabric/merge-styles": ">=5.15.2 <6.0.0", - "@uifabric/styling": ">=5.24.0 <6.0.0", + "@uifabric/styling": ">=5.25.0 <6.0.0", "@uifabric/utilities": ">=5.24.0 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/styling/CHANGELOG.json b/packages/styling/CHANGELOG.json index e57b0c81cfa25f..9ee0d0bf084f57 100644 --- a/packages/styling/CHANGELOG.json +++ b/packages/styling/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/styling", "entries": [ + { + "version": "5.25.0", + "tag": "@uifabric/styling_v5.25.0", + "date": "Thu, 19 Apr 2018 00:17:37 GMT", + "comments": { + "minor": [ + { + "author": "lynamemi ", + "commit": "7d066299cd2f3a13014ff2a43a2b2f76a0efb0d7", + "comment": "PulsingBeaconAnimationStyles: Distinguish between single and double pulse." + } + ] + } + }, { "version": "5.24.0", "tag": "@uifabric/styling_v5.24.0", diff --git a/packages/styling/CHANGELOG.md b/packages/styling/CHANGELOG.md index d6000c091bbda5..063c8f6bdf65c0 100644 --- a/packages/styling/CHANGELOG.md +++ b/packages/styling/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/styling -This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 00:17:37 GMT and should not be manually modified. + +## 5.25.0 +Thu, 19 Apr 2018 00:17:37 GMT + +### Minor changes + +- PulsingBeaconAnimationStyles: Distinguish between single and double pulse. ## 5.24.0 Wed, 18 Apr 2018 10:15:04 GMT diff --git a/packages/styling/package.json b/packages/styling/package.json index 5a6c1ad893f728..cd07affe04bf28 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/styling", - "version": "5.24.0", + "version": "5.25.0", "description": "Defines the core Office UI Fabric styles through a JavaScript interface.", "repository": { "type": "git", diff --git a/packages/variants/package.json b/packages/variants/package.json index aaec438878d000..28da61f2b53882 100644 --- a/packages/variants/package.json +++ b/packages/variants/package.json @@ -26,6 +26,6 @@ }, "dependencies": { "tslib": "^1.7.1", - "@uifabric/styling": ">=5.24.0 <6.0.0" + "@uifabric/styling": ">=5.25.0 <6.0.0" } } \ No newline at end of file From 775e1f5a6a2478d6223e405e2b18082c183adf36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20Timb=C3=B3?= Date: Wed, 18 Apr 2018 17:43:18 -0700 Subject: [PATCH 31/86] Add optional overflowIndex prop to Breadcrumb (#4609) --- ...adcrumboverflowindex_2018-04-19-00-05.json | 11 + .../components/Breadcrumb/Breadcrumb.base.tsx | 104 ++++++--- .../components/Breadcrumb/Breadcrumb.test.tsx | 12 + .../components/Breadcrumb/Breadcrumb.types.ts | 6 + .../__snapshots__/Breadcrumb.test.tsx.snap | 211 ++++++++++++++++++ .../examples/Breadcrumb.Basic.Example.tsx | 12 + 6 files changed, 319 insertions(+), 37 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json diff --git a/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json b/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json new file mode 100644 index 00000000000000..588dbbacc331ef --- /dev/null +++ b/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Add the option of collapsing breadcrumb overflow items into a position other than the first one", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "samuelmtimbo@gmail.com" +} \ No newline at end of file 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 76befb4c563973..68c13c333df4b1 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 @@ -29,13 +29,16 @@ const nullFunction = (): null => null; export class Breadcrumb extends BaseComponent { public static defaultProps: IBreadcrumbProps = { items: [], - maxDisplayedItems: 999 + maxDisplayedItems: 999, + overflowIndex: 0 }; protected focusZone = createRef(); constructor(props: IBreadcrumbProps) { super(props); + + this._validateProps(props); } /** @@ -48,11 +51,13 @@ export class Breadcrumb extends BaseComponent { } public render() { - const { onReduceData = this._onReduceData, maxDisplayedItems, items } = this.props; + const { onReduceData = this._onReduceData, overflowIndex, maxDisplayedItems, items } = this.props; + const renderedItems = [...items]; + const renderedOverflowItems = renderedItems.splice(overflowIndex!, renderedItems.length - maxDisplayedItems!); const breadCrumbData: IBreadCrumbData = { props: this.props, - renderedItems: items.slice(-maxDisplayedItems!), - renderedOverflowItems: items.slice(0, -maxDisplayedItems!) + renderedItems, + renderedOverflowItems }; return ( @@ -64,10 +69,17 @@ export class Breadcrumb extends BaseComponent { ); } + public componentWillReceiveProps(nextProps: IBreadcrumbProps): void { + this._validateProps(nextProps); + } + private _onReduceData = (data: IBreadCrumbData): IBreadCrumbData | undefined => { let { renderedItems, renderedOverflowItems } = data; - const movedItem = renderedItems[0]; - renderedItems = renderedItems.slice(1); + const { overflowIndex, items } = data.props; + + const movedItem = renderedItems[overflowIndex!]; + renderedItems = [...renderedItems]; + renderedItems.splice(overflowIndex!, 1); renderedOverflowItems = [...renderedOverflowItems, movedItem]; @@ -82,7 +94,8 @@ export class Breadcrumb extends BaseComponent { ariaLabel, dividerAs: Divider = Icon, onRenderItem = this._onRenderItem, - overflowAriaLabel + overflowAriaLabel, + overflowIndex } = data.props; const { renderedOverflowItems, renderedItems } = data; @@ -99,6 +112,41 @@ export class Breadcrumb extends BaseComponent { // knows not to render on that item const lastItemIndex = renderedItems.length - 1; + const itemElements: JSX.Element[] = renderedItems.map( + (item, index) => ( +
  • + { onRenderItem(item, this._onRenderItem) } + { index !== lastItemIndex && } +
    • + )); + + if (renderedOverflowItems && renderedOverflowItems.length !== 0) { + itemElements.splice(overflowIndex!, 0, ( +
  • + + +
    • + ) + ); + } + return (
    { >
      - { renderedOverflowItems && renderedOverflowItems.length !== 0 && ( -
    1. - - -
      2. - ) } - { renderedItems.map( - (item, index) => ( -
    2. - { onRenderItem(item, this._onRenderItem) } - { index !== lastItemIndex && } -
      3. - )) } + {itemElements}
    @@ -179,4 +198,15 @@ export class Breadcrumb extends BaseComponent { item.onClick(ev, item); } } + + /** + * Validate incoming props + * @param props Props to validate + */ + private _validateProps(props: IBreadcrumbProps): void { + const { items, overflowIndex } = props; + if (overflowIndex! < 0 || overflowIndex! > items.length - 1) { + throw new Error('Breadcrumb: overflowIndex out of range'); + } + } } diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx index 0e529c524801cf..fc31314c41a7b4 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -48,6 +48,18 @@ describe('Breadcrumb', () => { tree = component.toJSON(); expect(tree).toMatchSnapshot(); + + // With overflow and overflowIndex + component = renderer.create( + + ); + + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); it('can call the callback when an item is clicked', () => { 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 05c0cb7225cd14..419097fbbc4440 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 @@ -41,6 +41,7 @@ export interface IBreadcrumbProps extends React.Props { maxDisplayedItems?: number; /** Method to call when trying to render an item. */ + onRenderItem?: IRenderFunction; /** @@ -58,6 +59,11 @@ export interface IBreadcrumbProps extends React.Props { * Optional name to use for aria label on overflow button. */ overflowAriaLabel?: string; + + /** + * Optional index where overflow items will be collapsed. Defaults to 0. + */ + overflowIndex?: number; } export interface IBreadcrumbItem { diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 52d3ff04150f14..575f97c0d67209 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -477,3 +477,214 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
    `; + +exports[`Breadcrumb renders breadcumb correctly 4`] = ` +
    +
    +
    +
    +
      +
    1. + +
      + TestText1 +
      +       + +
      2. +
    2. + + +
      3. +
    3. + +
      + TestText4 +
      +       +
      4. +
    +
    +
    +
    +
    +`; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx index 25cb0874589e02..c3fc03ce3ca123 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx @@ -58,6 +58,18 @@ export class BreadcrumbBasicExample extends React.Component { maxDisplayedItems={ 3 } ariaLabel={ 'Website breadcrumb' } /> + + +
    ); } From 5954ea49f9c4e059868a57a6b597068ef905108a Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 19 Apr 2018 03:11:47 +0200 Subject: [PATCH 32/86] Remove unused variables and enable no-unused-variable (#4608) * Remove unused variables * Add change file --- ...ove-unused-variables_2018-04-18-22-52.json | 11 +++++ .../components/ActivityItem/ActivityItem.tsx | 7 +--- .../src/components/Button/BaseButton.tsx | 3 +- .../components/Coachmark/Coachmark.styles.ts | 1 - .../PositioningContainer.tsx | 5 +-- .../src/components/ComboBox/ComboBox.tsx | 12 ++---- .../examples/ComboBox.Basic.Example.tsx | 40 +++++++++---------- .../ContextualMenu/ContextualMenuItem.tsx | 2 - .../DetailsList/DetailsHeader.test.tsx | 2 - .../DetailsList/DetailsListPage.tsx | 1 - .../DocumentCard/DocumentCardStatus.tsx | 1 - .../DocumentCard/DocumentCardTitle.test.tsx | 4 -- .../src/components/Fabric/Fabric.tsx | 4 -- .../src/components/Facepile/FacepilePage.tsx | 1 - .../FocusTrapZone/FocusTrapZonePage.tsx | 3 -- .../examples/FocusZone.Tabbable.Example.tsx | 5 +-- .../src/components/Layer/LayerPage.tsx | 2 +- .../src/components/Modal/ModalPage.tsx | 1 - .../components/OverflowSet/OverflowSet.tsx | 1 - .../src/components/Panel/PanelPage.tsx | 1 - .../src/components/Persona/Persona.types.ts | 2 - .../src/components/Persona/PersonaConsts.tsx | 1 - .../PersonaPresence/PersonaPresence.styles.ts | 6 +-- .../ProgressIndicator.styles.ts | 9 +---- .../components/SearchBox/SearchBoxPage.tsx | 1 - .../src/components/Spinner/Spinner.styles.tsx | 4 +- .../src/components/Spinner/Spinner.tsx | 3 +- .../src/components/Spinner/Spinner.types.ts | 3 +- .../src/components/Theme/ThemePage.tsx | 15 +------ .../src/components/Theme/ThemePage.types.ts | 2 +- .../src/components/Toggle/TogglePage.tsx | 1 - .../src/components/Tooltip/TooltipHost.tsx | 1 - .../src/components/Tooltip/TooltipPage.tsx | 1 - .../pickers/PeoplePicker/PeoplePickerPage.tsx | 1 - .../src/components/pickers/PickersPage.tsx | 1 - .../pickers/Suggestions/Suggestions.test.tsx | 5 --- .../src/demo/GettingStartedPage.tsx | 5 +-- packages/office-ui-fabric-react/tslint.json | 3 +- 38 files changed, 51 insertions(+), 120 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json diff --git a/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json b/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json new file mode 100644 index 00000000000000..f9fc52aa1213a0 --- /dev/null +++ b/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mark@thedutchies.com" +} \ No newline at end of file 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 6c7281ebe9814b..abbb5e18601ed2 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx @@ -1,9 +1,7 @@ -/* tslint:disable */ + import * as React from 'react'; -/* tslint:enable */ -import { DefaultPalette } from '../../Styling'; import { BaseComponent } from '../../Utilities'; -import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types'; +import { IActivityItemProps } from './ActivityItem.types'; import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames'; import { getStyles } from './ActivityItem.styles'; import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona'; @@ -20,7 +18,6 @@ export class ActivityItem extends BaseComponent { onRenderActivityDescription = this._onRenderActivityDescription, onRenderComments = this._onRenderComments, onRenderTimeStamp = this._onRenderTimeStamp, - styles: customStyles, animateBeaconSignal, isCompact } = this.props; 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 7cbdaeca15f986..a08fd6c27e53ba 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -431,7 +431,7 @@ export class BaseButton extends BaseComponent { theme, title } = this.props; - const { isOpen, selectedIndices, focused, suggestedDisplayValue } = this.state; + const { isOpen, focused, suggestedDisplayValue } = this.state; this._currentVisibleValue = this._getVisibleValue(); const divProps = getNativeProps(this.props, divProperties); @@ -643,7 +643,6 @@ export class ComboBox extends BaseComponent { currentPendingValue, currentPendingValueValidIndex, currentOptions, - selectedIndices } = this.state; if (this.props.autoComplete === 'on') { @@ -1158,7 +1157,6 @@ export class ComboBox extends BaseComponent { currentPendingValueValidIndexOnHover, currentPendingValueValidIndex, currentPendingValue, - selectedIndices } = this.state; return ( @@ -1197,7 +1195,6 @@ export class ComboBox extends BaseComponent { const { currentPendingValueValidIndex, currentPendingValue, - selectedIndices } = this.state; if (onScrollToItem) { @@ -1299,7 +1296,6 @@ export class ComboBox extends BaseComponent { */ private _resetSelectedIndex() { const { - selectedIndices, currentOptions } = this.state; if (this._autofill.value) { @@ -1367,7 +1363,6 @@ export class ComboBox extends BaseComponent { */ private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection) { const { - isOpen, currentOptions } = this.state; @@ -1458,8 +1453,7 @@ export class ComboBox extends BaseComponent { const { isOpen, currentOptions, - currentPendingValueValidIndexOnHover, - selectedIndices + currentPendingValueValidIndexOnHover } = this.state; if (disabled) { diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx index f66f68146c860e..1237feabbdf9ad 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx @@ -13,22 +13,22 @@ import { IComboBox } from '../ComboBox.types'; import { PrimaryButton } from '../../../Button'; const INITIAL_OPTIONS = -[ - { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header }, - { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' }, - { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' }, - { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' }, - { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' }, - { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider }, - { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header }, - { key: 'D', text: 'Option d' }, - { key: 'E', text: 'Option e' }, - { key: 'F', text: 'Option f' }, - { key: 'G', text: 'Option g' }, - { key: 'H', text: 'Option h' }, - { key: 'I', text: 'Option i' }, - { key: 'J', text: 'Option j' } -]; + [ + { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header }, + { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' }, + { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' }, + { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' }, + { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' }, + { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider }, + { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header }, + { key: 'D', text: 'Option d' }, + { key: 'E', text: 'Option e' }, + { key: 'F', text: 'Option f' }, + { key: 'G', text: 'Option g' }, + { key: 'H', text: 'Option h' }, + { key: 'I', text: 'Option i' }, + { key: 'J', text: 'Option j' } + ]; export class ComboBoxBasicExample extends React.Component<{}, { // For controled single select @@ -87,7 +87,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { public render() { const { options, selectedOptionKey, value } = this.state; - const { optionsMulti, selectedOptionKeys, valueMulti } = this.state; + const { optionsMulti } = this.state; return (
    @@ -129,7 +129,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { onFocus={ () => console.log('onFocus called') } onBlur={ () => console.log('onBlur called') } onMenuOpen={ () => console.log('ComboBox menu opened') } - // tslint:enable:jsx-no-lambda + // tslint:enable:jsx-no-lambda /> console.log('onFocus called') } onBlur={ () => console.log('onBlur called') } onMenuOpen={ () => console.log('ComboBox menu opened') } - // tslint:enable:jsx-no-lambda + // tslint:enable:jsx-no-lambda />
    @@ -341,7 +341,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { this.setState({ optionsMulti: INITIAL_OPTIONS, - selectedOptionKeys: [ 'C1' ], + selectedOptionKeys: ['C1'], valueMulti: undefined }); diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx index 667d14bae15407..de8867093431f8 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index'; -import { IContextualMenuItem } from './ContextualMenu.types'; -import { IMenuItemClassNames } from './ContextualMenu.classNames'; import { getRTL } from '../../Utilities'; import { Icon } from '../../Icon'; import { IContextualMenuItemProps } from './ContextualMenuItem.types'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx index 472d33546005ed..8c1d070f629bf0 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx @@ -39,7 +39,6 @@ describe('DetailsHeader', () => { ): { size: number; index: number; } => lastResize = { size, index }; const headerRef = createRef(); - const columns = []; const wrapper = mount( { /> ); - const rootElement = wrapper.getDOMNode(); const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode(); const header: any = headerRef.value; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx index 0f78bf6e5b5b2b..5a336f5651adf5 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { Link } from 'office-ui-fabric-react/lib/Link'; import { ExampleCard, IComponentDemoPageProps, diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx index 127222419f41fe..d229db9f39b09b 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import { BaseComponent, - autobind, css } from '../../Utilities'; import { IDocumentCardStatusProps } from './DocumentCard.types'; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx index 3aac5f51d60d99..8117005e9a70fd 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; import { mount } from 'enzyme'; - -import { DocumentCard } from './DocumentCard'; import { DocumentCardTitle } from './DocumentCardTitle'; -import { DocumentCardPreview } from './DocumentCardPreview'; -import { DocumentCardActivity } from './DocumentCardActivity'; const veryLongTitle = 'This is obviously a very very very very very very very very very very loooooooooooooooooooooooooooooooooooooooooooooooong title that will need to be truncated'; 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 6590c9d0054559..1998193d3c869d 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx @@ -4,12 +4,8 @@ import { customizable, getNativeProps, divProperties, - createRef, classNamesFunction } from '../../Utilities'; -import { - ITheme, -} from '../../Styling'; import { getStyles } from './Fabric.styles'; import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx index 32ac5930d7640e..92f2c7af48c1ed 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx @@ -9,7 +9,6 @@ import { import { FacepileAddFaceExample } from './examples/Facepile.AddFace.Example'; import { FacepileBasicExample } from './examples/Facepile.Basic.Example'; import { FacepileOverflowExample } from './examples/Facepile.Overflow.Example'; -import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { FacepileStatus } from './Facepile.checklist'; diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx index 849002054b65db..d0e571e4749f1c 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx @@ -1,7 +1,4 @@ import * as React from 'react'; -import { - Link -} from 'office-ui-fabric-react/lib/Link'; import { ExampleCard, IComponentDemoPageProps, diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx index 2fb2a8a02e843f..1810dc9a2b8cfb 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx @@ -1,8 +1,5 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ - -import { DefaultButton, BaseButton } from 'office-ui-fabric-react/lib/Button'; +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; import './FocusZone.Tabbable.Example.scss'; diff --git a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx index 7d9ce8a6502ad9..f6420ca3f217d5 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx @@ -32,7 +32,7 @@ export class LayerPage extends React.Component { - +
    diff --git a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx index c30d1cf9098486..dbd5357b29de0c 100644 --- a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx @@ -6,7 +6,6 @@ import { PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base'; -import { Link } from 'office-ui-fabric-react/lib/Link'; import { ModalBasicExample } from './examples/Modal.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ModalStatus } from './Modal.checklist'; 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 ea1d653ad93d8f..a934914477cd36 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -6,7 +6,6 @@ import { getNativeProps, divProperties, focusFirstChild, - getFirstFocusable, elementContains } from '../../Utilities'; import { mergeStyles } from '../../Styling'; diff --git a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx index 890cab45b5ac21..e6d948cfb3b925 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx @@ -19,7 +19,6 @@ import { PanelLightDismissExample } from './examples/Panel.LightDismiss.Example' import { PanelLightDismissCustomExample } from './examples/Panel.LightDismissCustom.Example'; import { PanelNonModalExample } from './examples/Panel.NonModal.Example'; import { PanelFooterExample } from './examples/Panel.Footer.Example'; -import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { PanelStatus } from './Panel.checklist'; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index e473b6d5967245..6d6de2f2bc90dd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -1,8 +1,6 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; import { PersonaBase } from './Persona.base'; -import { PersonaCoinBase } from './PersonaCoin/index'; -import { PersonaPresenceBase } from './PersonaPresence/index'; import { ImageLoadState } from '../../Image'; import { IStyle, ITheme } from '../../Styling'; import { IStyleFunction } from '../../Utilities'; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx index 19b2042deccb02..b8c491b9226433 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { PersonaPresence, PersonaSize, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts index 1c042712ee459f..4322c5dd53f9e0 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts @@ -17,11 +17,7 @@ import { export const getStyles = ( props: IPersonaPresenceStyleProps ): IPersonaPresenceStyles => { - const { - className, - theme, - } = props; - + const { theme } = props; const { semanticColors } = theme; const size = sizeBoolean(props.size as PersonaSize); diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 14ccfb155facc9..5a326f92ce5a60 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -4,14 +4,7 @@ import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './Progre export const getStyles = ( props: IProgressIndicatorStyleProps ): IProgressIndicatorStyles => { - const { - className, - theme, - indeterminate, - smoothTransition, - } = props; - - const { palette, semanticColors } = theme; + const { className } = props; return ({ root: [ diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx index 1003d0eaaead2d..36e69d6cbbd269 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx @@ -10,7 +10,6 @@ import { SearchBoxFullSizeExample } from './examples/SearchBox.FullSize.Example' import { SearchBoxUnderlinedExample } from './examples/SearchBox.Underlined.Example'; import { SearchBoxDisabledExample } from './examples/SearchBox.Disabled.Example'; import { SearchBoxSmallExample } from './examples/SearchBox.Small.Example'; -import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { SearchBoxStatus } from './SearchBox.checklist'; diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx index 7a3474e498d411..67338c38eec272 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx @@ -1,5 +1,5 @@ -import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize, SpinnerType } from './Spinner.types'; -import { IRawStyle, hiddenContentStyle, keyframes, HighContrastSelector } from '../../Styling'; +import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize } from './Spinner.types'; +import { hiddenContentStyle, keyframes, HighContrastSelector } from '../../Styling'; const spinAnimation: string = keyframes({ '0%': { diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx index 8061900cebccc2..965bd1f78dcfc0 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx +++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx @@ -1,7 +1,8 @@ import { styled } from '../../Utilities'; import { SpinnerBase } from './Spinner.base'; -import { ISpinnerProps } from './Spinner.types'; import { getStyles } from './Spinner.styles'; +// tslint:disable-next-line:no-unused-variable +import { ISpinnerProps } from './Spinner.types'; export const Spinner = styled( SpinnerBase, diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts index 109022603e717a..09b662b913ec18 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts +++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import { Spinner } from './Spinner'; -import { ITheme, IStyle, IRawStyle } from '../../Styling'; +import { ITheme, IStyle } from '../../Styling'; import { IStyleFunction } from '../../Utilities'; export interface ISpinner { diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx index 70009969c39495..90467005c88cf8 100644 --- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx @@ -1,22 +1,16 @@ import * as React from 'react'; +import { classNamesFunction } from '../../Utilities'; import { - classNamesFunction, - customizable, -} from '../../Utilities'; -import { - FontClassNames, IPalette, ISemanticColors, loadTheme, } from '../../Styling'; import { ComponentPage, - Highlight, IComponentDemoPageProps, PageMarkdown, } from '@uifabric/example-app-base'; import { - IThemePagePalette, IThemePageStyleProps, IThemePageStyles, IThemePageState, @@ -34,8 +28,6 @@ import { ColorPicker } from '../ColorPicker'; const getClassNames = classNamesFunction(); export class ThemePage extends React.Component { - private _list: DetailsList; - constructor(props: IComponentDemoPageProps) { super(props); @@ -82,7 +74,6 @@ export class ThemePage extends React.Component { - this._list = component; - } - private _onSwatchClicked(item: any, index: number, list: string, ev: React.MouseEvent) { this.setState({ colorPickerProps: { diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts index 34dc99bc5230ef..bae1bf0d85c9f5 100644 --- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts +++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts @@ -1,4 +1,4 @@ -import * as React from 'react'; + import { IStyle } from '../../Styling'; export type IThemePagePalette = { diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx index 85f916823701c7..b78c4407d57710 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx @@ -8,7 +8,6 @@ import { } from '@uifabric/example-app-base'; import { ToggleBasicExample } from './examples/Toggle.Basic.Example'; import { ToggleAriaLabelExample } from './examples/Toggle.AriaLabel.Example'; -import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ToggleStatus } from './Toggle.checklist'; diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx index 0f2d029f8e6f00..ed7d4466707926 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx @@ -54,7 +54,6 @@ export class TooltipHost extends BaseComponent { public render() { diff --git a/packages/office-ui-fabric-react/tslint.json b/packages/office-ui-fabric-react/tslint.json index 7d6cf89d5c8c04..9dcefdf589368e 100644 --- a/packages/office-ui-fabric-react/tslint.json +++ b/packages/office-ui-fabric-react/tslint.json @@ -8,10 +8,9 @@ false, 140 ], - "no-unused-variable": false, "no-any": false, "typedef": [ false ] } -} +} \ No newline at end of file From 6c70a9e55408212d258d41269af4daf50abffca4 Mon Sep 17 00:00:00 2001 From: Cliff Koh Date: Wed, 18 Apr 2018 18:12:11 -0700 Subject: [PATCH 33/86] Fix minor typos (#4607) * Fix typos * Fix minor typos --- .../cliffkoh-miscFix_2018-04-18-22-24.json | 11 +++++++++++ ghdocs/Contributing/BugFixes.md | 2 +- .../src/demo/docs/GettingStartedOverview.md | 2 -- 3 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json diff --git a/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json b/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json new file mode 100644 index 00000000000000..fedd9a652ce568 --- /dev/null +++ b/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix minor typos", + "type": "none" + } + ], + "packageName": "office-ui-fabric-react", + "email": "cliff.koh@microsoft.com" +} \ No newline at end of file diff --git a/ghdocs/Contributing/BugFixes.md b/ghdocs/Contributing/BugFixes.md index b657ab6ca488af..24810d4b8e0838 100644 --- a/ghdocs/Contributing/BugFixes.md +++ b/ghdocs/Contributing/BugFixes.md @@ -3,7 +3,7 @@ Please use the following steps to contribute bug fixes -* Setup your branch using instructions in [GitbranchSetup](./Setup.md) +* Setup your branch using instructions in [Git branch Setup](./Setup.md) * Code and test the bug fix. diff --git a/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md index b6f017e271d9a3..1addb39e0be728 100644 --- a/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md +++ b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md @@ -48,5 +48,3 @@ import { List } from 'office-ui-fabric-react/lib/List'; ## Using an AMD bundler like r.js If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location. - -
    \ No newline at end of file From 88c0a7c0491915f1ac07748a77c857e488772242 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Wed, 18 Apr 2018 18:26:58 -0700 Subject: [PATCH 34/86] Update Breadcrumb.base.tsx --- .../src/components/Breadcrumb/Breadcrumb.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 68c13c333df4b1..0ae0f4f75c1507 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 @@ -75,7 +75,7 @@ export class Breadcrumb extends BaseComponent { private _onReduceData = (data: IBreadCrumbData): IBreadCrumbData | undefined => { let { renderedItems, renderedOverflowItems } = data; - const { overflowIndex, items } = data.props; + const { overflowIndex } = data.props; const movedItem = renderedItems[overflowIndex!]; renderedItems = [...renderedItems]; From e77a31bee560440bae3737eca6b19fce2c1ae3db Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Thu, 19 Apr 2018 03:30:02 +0200 Subject: [PATCH 35/86] Update createRef to match the new React 16.3 api (#4598) * Update createRef to match the new React api * Add changefile * Keep the .value supported through a getter. * Add test * Lint errors --- apps/todo-app/src/components/TodoForm.tsx | 2 +- ...l-fix-createRef-type_2018-04-18-16-05.json | 11 +++ ...l-fix-createRef-type_2018-04-18-16-05.json | 11 +++ ...l-fix-createRef-type_2018-04-18-16-05.json | 11 +++ ...l-fix-createRef-type_2018-04-18-16-05.json | 11 +++ ghdocs/BestPractices/ComponentDesign.md | 8 +- .../src/components/Highlight/Highlight.tsx | 4 +- .../components/CommandBar/CommandBar.base.tsx | 6 +- .../BaseExtendedPicker.tests.tsx | 22 +++--- .../ExtendedPicker/BaseExtendedPicker.tsx | 64 +++++++-------- .../ExtendedPeoplePicker.Basic.Example.tsx | 18 ++--- .../SelectedPeopleList/Items/EditingItem.tsx | 10 +-- .../Items/SelectedItemWithContextMenu.tsx | 2 +- .../VirtualizedList/VirtualizedList.tsx | 2 +- .../src/components/Autofill/Autofill.tsx | 26 +++---- .../components/Breadcrumb/Breadcrumb.base.tsx | 4 +- .../src/components/Button/BaseButton.tsx | 18 ++--- .../src/components/Calendar/Calendar.tsx | 12 +-- .../Callout/CalloutContent.base.tsx | 14 ++-- .../src/components/Checkbox/Checkbox.base.tsx | 4 +- .../components/ChoiceGroup/ChoiceGroup.tsx | 4 +- .../src/components/Coachmark/Coachmark.tsx | 20 ++--- .../PositioningContainer.tsx | 14 ++-- .../examples/Coachmark.Basic.Example.tsx | 2 +- .../components/ColorPicker/ColorRectangle.tsx | 4 +- .../components/ColorPicker/ColorSlider.tsx | 4 +- .../src/components/ComboBox/ComboBox.tsx | 54 ++++++------- .../ComboBox/VirtualizedComboBox.tsx | 10 +-- .../src/components/CommandBar/CommandBar.tsx | 14 ++-- .../src/components/DatePicker/DatePicker.tsx | 14 ++-- .../DetailsList/DetailsHeader.test.tsx | 2 +- .../components/DetailsList/DetailsHeader.tsx | 4 +- .../components/DetailsList/DetailsList.tsx | 26 +++---- .../src/components/DetailsList/DetailsRow.tsx | 6 +- .../examples/DetailsList.Grouped.Example.tsx | 4 +- .../DocumentCard/DocumentCardTitle.tsx | 8 +- .../src/components/Dropdown/Dropdown.tsx | 36 ++++----- .../examples/Dropdown.Basic.Example.tsx | 4 +- .../FocusTrapZone/FocusTrapZone.tsx | 18 ++--- .../src/components/FocusZone/FocusZone.tsx | 60 +++++++------- .../components/GroupedList/GroupedList.tsx | 10 +-- .../GroupedList/GroupedListSection.tsx | 14 ++-- .../components/HoverCard/ExpandingCard.tsx | 4 +- .../src/components/HoverCard/HoverCard.tsx | 2 +- .../src/components/Image/Image.base.tsx | 12 +-- .../src/components/Layer/Layer.base.tsx | 4 +- .../src/components/Link/Link.base.tsx | 4 +- .../src/components/List/List.tsx | 12 +-- .../MarqueeSelection/MarqueeSelection.tsx | 20 ++--- .../src/components/Modal/Modal.tsx | 4 +- .../components/OverflowSet/OverflowSet.tsx | 14 ++-- .../src/components/Panel/Panel.tsx | 2 +- .../src/components/Pivot/Pivot.tsx | 4 +- .../src/components/Popup/Popup.tsx | 14 ++-- .../ResizeGroup/ResizeGroup.base.tsx | 10 +-- .../ScrollablePane/ScrollablePane.base.tsx | 44 +++++------ .../components/SearchBox/SearchBox.base.tsx | 8 +- .../src/components/Slider/Slider.tsx | 8 +- .../src/components/SpinButton/SpinButton.tsx | 8 +- .../src/components/Sticky/Sticky.tsx | 16 ++-- .../src/components/TextField/TextField.tsx | 28 +++---- .../src/components/Toggle/Toggle.tsx | 4 +- .../src/components/Tooltip/TooltipHost.tsx | 8 +- .../src/components/pickers/BasePicker.tsx | 78 +++++++++---------- .../SelectedItemWithMenu.tsx | 2 +- .../pickers/Suggestions/Suggestions.tsx | 36 ++++----- .../src/utilities/decorators/withViewport.tsx | 2 +- .../src/utilities/selection/SelectionZone.tsx | 24 +++--- packages/utilities/src/createRef.test.ts | 43 ++++++++-- packages/utilities/src/createRef.ts | 24 +++++- 70 files changed, 564 insertions(+), 467 deletions(-) create mode 100644 common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json create mode 100644 common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json create mode 100644 common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json create mode 100644 common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx index c381a5fd8980a8..57a5d51148bab7 100644 --- a/apps/todo-app/src/components/TodoForm.tsx +++ b/apps/todo-app/src/components/TodoForm.tsx @@ -81,7 +81,7 @@ export default class TodoForm extends BaseComponent): void => { event.preventDefault(); - const { value: textField } = this._textField; + const { current: textField } = this._textField; if (!textField) { return; } diff --git a/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..68607fc07cb606 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/example-app-base", + "comment": "Update createRef to match React.createRef api", + "type": "patch" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "mark@thedutchies.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..e0e1fbc4a68846 --- /dev/null +++ b/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Update createRef to match React.createRef api", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "mark@thedutchies.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..cd553107bd9383 --- /dev/null +++ b/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/utilities", + "comment": "Update createRef to match React.createRef api", + "type": "minor" + } + ], + "packageName": "@uifabric/utilities", + "email": "mark@thedutchies.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..bd845f47dc3fa0 --- /dev/null +++ b/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Update createRef to match React.createRef api", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "mark@thedutchies.com" +} \ No newline at end of file diff --git a/ghdocs/BestPractices/ComponentDesign.md b/ghdocs/BestPractices/ComponentDesign.md index 840a2759ffaa26..d5874979e68448 100644 --- a/ghdocs/BestPractices/ComponentDesign.md +++ b/ghdocs/BestPractices/ComponentDesign.md @@ -189,9 +189,9 @@ public render() { Best, use createRef: -The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://github.com/facebook/react/pull/11555). (When Fabric switches over to React 16, we'll use React.createRef instead) +The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). (When Fabric switches over to React 16, we'll use React.createRef instead) -`createRef` creates a reference object that has the following type `{ value: T | null }`, where T is the element to reference (either a dom node or a react component). You set the reference by passing the reference object as the `ref` prop. You can then subsequently access the reference through the `.value` property on the reference object elsewhere in your code. +`createRef` creates a reference object that has the following type `{ current: T | null }`, where T is the element to reference (either a dom node or a react component). You set the reference by passing the reference object as the `ref` prop. You can then subsequently access the reference through the `.current` property on the reference object elsewhere in your code. ```typescript import { createRef } from 'office-ui-fabric-react/lib/Utilities'; @@ -206,8 +206,8 @@ class Foo extends BaseComponent<...> { } private _onClick() { - // Access the reference through the .value property on the reference object - this._root.value.focus(); + // Access the reference through the .current property on the reference object + this._root.current.focus(); } } ``` diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx index c11c2a5993fd48..51482f0bc96218 100644 --- a/packages/example-app-base/src/components/Highlight/Highlight.tsx +++ b/packages/example-app-base/src/components/Highlight/Highlight.tsx @@ -31,8 +31,8 @@ export class Highlight extends BaseComponent { } public componentDidMount(): void { - if (this._codeElement.value) { - highlightBlock(this._codeElement.value); + if (this._codeElement.current) { + highlightBlock(this._codeElement.current); } } } diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx index ed460e5a82c226..515c246b51753d 100644 --- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx +++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx @@ -56,7 +56,7 @@ export class CommandBarBase extends BaseComponent implemen private _overflowSet = createRef(); private _resizeGroup = createRef(); - private _classNames: {[key in keyof ICommandBarStyles]: string }; + private _classNames: { [key in keyof ICommandBarStyles]: string }; public render(): JSX.Element { const { @@ -134,13 +134,13 @@ export class CommandBarBase extends BaseComponent implemen } public focus(): void { - const { value: overflowSet } = this._overflowSet; + const { current: overflowSet } = this._overflowSet; overflowSet && overflowSet.focus(); } public remeasure(): void { - this._resizeGroup.value && this._resizeGroup.value.remeasure(); + this._resizeGroup.current && this._resizeGroup.current.remeasure(); } private _computeCacheKey(primaryItems: ICommandBarItemProps[], farItems: ICommandBarItemProps[], overflow: boolean): string { diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx index 9e1679a693996c..7880c3a408e920 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx @@ -106,11 +106,11 @@ describe('Pickers', () => { picker.inputElement.value = 'bl'; } - expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions.length).toBe(2); - expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions[0].name).toBe('black'); + expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions.length).toBe(2); + expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions[0].name).toBe('black'); // Force resolve to the first suggestions - picker.floatingPicker.value && picker.floatingPicker.value.forceResolveSuggestion(); + picker.floatingPicker.current && picker.floatingPicker.current.forceResolveSuggestion(); expect(picker.items.length).toBe(1); expect(picker.items[0].name).toBe('black'); @@ -135,11 +135,11 @@ describe('Pickers', () => { picker.inputElement.value = 'bl'; } - expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy(); - picker.floatingPicker.value && picker.floatingPicker.value.hidePicker(); - expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeFalsy(); - picker.floatingPicker.value && picker.floatingPicker.value.showPicker(); - expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy(); + expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy(); + picker.floatingPicker.current && picker.floatingPicker.current.hidePicker(); + expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeFalsy(); + picker.floatingPicker.current && picker.floatingPicker.current.showPicker(); + expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy(); ReactDOM.unmountComponentAtNode(root); }); @@ -163,9 +163,9 @@ describe('Pickers', () => { ReactTestUtils.Simulate.keyDown(picker.inputElement, { which: KeyCodes.down }); } - picker.floatingPicker.value && picker.floatingPicker.value.completeSuggestion(); - expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items.length).toBe(1); - expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items[0].name).toBe('blue'); + picker.floatingPicker.current && picker.floatingPicker.current.completeSuggestion(); + expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items.length).toBe(1); + expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items[0].name).toBe('blue'); ReactDOM.unmountComponentAtNode(root); }); diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index bd88502c5f8b6a..23befccb19daeb 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -62,7 +62,7 @@ export class BaseExtendedPicker> extend // tslint:disable-next-line:no-any public get items(): any { - return this.selectedItemsList.value ? this.selectedItemsList.value.items : []; + return this.selectedItemsList.current ? this.selectedItemsList.current.items : []; } public componentDidMount(): void { @@ -70,19 +70,19 @@ export class BaseExtendedPicker> extend } public focus(): void { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } public clearInput(): void { - if (this.input.value) { - this.input.value.clear(); + if (this.input.current) { + this.input.current.clear(); } } public get inputElement(): HTMLInputElement | null { - return this.input.value && this.input.value.inputElement; + return this.input.current && this.input.current.inputElement; } public render(): JSX.Element { @@ -152,8 +152,8 @@ export class BaseExtendedPicker> extend return (onRenderFloatingPicker({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, - inputElement: this.input.value ? this.input.value.inputElement : undefined, - selectedItems: this.selectedItemsList.value ? this.selectedItemsList.value.items : [], + inputElement: this.input.current ? this.input.current.inputElement : undefined, + selectedItems: this.selectedItemsList.current ? this.selectedItemsList.current.items : [], ...this.floatingPickerProps })); } @@ -169,35 +169,35 @@ export class BaseExtendedPicker> extend protected resetFocus(index?: number): void { const { items } = this.state; - if (items.length && index! >= 0 && this.root.value) { - const newEl: HTMLElement = this.root.value + if (items.length && index! >= 0 && this.root.current) { + const newEl: HTMLElement = this.root.current .querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement; - if (newEl && this.focusZone.value) { - this.focusZone.value.focusElement(newEl); + if (newEl && this.focusZone.current) { + this.focusZone.current.focusElement(newEl); } } else if (!this.canAddItems()) { (items[items.length - 1] as IPickerItemProps).selected = true; this.resetFocus(items.length - 1); } else { - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } } } protected onInputChange = (value: string): void => { - if (this.floatingPicker.value) { - this.floatingPicker.value.onQueryStringChanged(value); + if (this.floatingPicker.current) { + this.floatingPicker.current.onQueryStringChanged(value); } } protected onInputFocus = (ev: React.FocusEvent): void => { - if (this.selectedItemsList.value) { - this.selectedItemsList.value.unselectAll(); + if (this.selectedItemsList.current) { + this.selectedItemsList.current.unselectAll(); } - if (this.floatingPicker.value) { - this.floatingPicker.value.showPicker(true /*updateValue*/); + if (this.floatingPicker.current) { + this.floatingPicker.current.showPicker(true /*updateValue*/); } if (this.props.inputProps && this.props.inputProps.onFocus) { @@ -211,18 +211,18 @@ export class BaseExtendedPicker> extend if (ev.which !== KeyCodes.backspace) { return; } - if ((this.state.items.length && !this.input.value) || (this.input.value && !this.input.value.isValueSelected)) { - if (this.selectedItemsList.value && (this.input.value as Autofill).cursorLocation === 0) { - this.selectedItemsList.value.removeItemAt(this.items.length - 1); + if ((this.state.items.length && !this.input.current) || (this.input.current && !this.input.current.isValueSelected)) { + if (this.selectedItemsList.current && (this.input.current as Autofill).cursorLocation === 0) { + this.selectedItemsList.current.removeItemAt(this.items.length - 1); this._onSelectedItemsChanged(); } } } protected onCopy = (ev: React.ClipboardEvent): void => { - if (this.selectedItemsList.value) { + if (this.selectedItemsList.current) { // Pass it down into the selected items list - this.selectedItemsList.value.onCopy(ev); + this.selectedItemsList.current.onCopy(ev); } } @@ -236,7 +236,7 @@ export class BaseExtendedPicker> extend protected _isFocusZoneInnerKeystroke = (ev: React.KeyboardEvent): boolean => { // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone. - if (this.floatingPicker.value && this.floatingPicker.value.isSuggestionsShown) { + if (this.floatingPicker.current && this.floatingPicker.current.isSuggestionsShown) { switch (ev.which) { case KeyCodes.up: case KeyCodes.down: @@ -253,20 +253,20 @@ export class BaseExtendedPicker> extend } protected _onSuggestionSelected = (item: T): void => { - if (this.selectedItemsList.value) { - this.selectedItemsList.value.addItems([item]); + if (this.selectedItemsList.current) { + this.selectedItemsList.current.addItems([item]); } if (this.props.onItemSelected) { this.props.onItemSelected(item); } - if (this.input.value) { - this.input.value.clear(); + if (this.input.current) { + this.input.current.clear(); } - if (this.floatingPicker.value) { - this.floatingPicker.value.hidePicker(); + if (this.floatingPicker.current) { + this.floatingPicker.current.hidePicker(); } this.focus(); diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index 7112ba5e64a200..738e1504c3fc13 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx @@ -61,8 +61,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP && this._picker.inputElement.value.indexOf('@') > -1; }, onExecute: () => { - if (this._picker.floatingPicker.value !== null) { - this._picker.floatingPicker.value.forceResolveSuggestion(); + if (this._picker.floatingPicker.current !== null) { + this._picker.floatingPicker.current.forceResolveSuggestion(); } } }, @@ -84,8 +84,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP shouldShow: () => { return this._picker !== undefined && this._picker.floatingPicker !== undefined - && this._picker.floatingPicker.value !== null - && this._picker.floatingPicker.value.suggestions.length === 0; + && this._picker.floatingPicker.current !== null + && this._picker.floatingPicker.current.suggestions.length === 0; } }, { @@ -182,9 +182,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _onExpandItem = (item: IExtendedPersonaProps): void => { - if (this._picker.selectedItemsList.value) { + if (this._picker.selectedItemsList.current) { // tslint:disable-next-line:no-any - (this._picker.selectedItemsList.value as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any)); + (this._picker.selectedItemsList.current as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any)); } } @@ -239,9 +239,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP private _shouldShowForceResolve = (): boolean => { return Boolean( - this._picker.floatingPicker.value && - this._validateInput(this._picker.floatingPicker.value.inputText) && - this._picker.floatingPicker.value.suggestions.length === 0 + this._picker.floatingPicker.current && + this._validateInput(this._picker.floatingPicker.current.inputText) && + this._picker.floatingPicker.current.suggestions.length === 0 ); } diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 90175d46014b9f..3f4049867221f3 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -46,7 +46,7 @@ export class EditingItem extends BaseComponent string; const itemText = getEditingItemText(this.props.item); - this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(itemText); + this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText); this._editingInput.value = itemText; this._editingInput.focus(); } @@ -91,14 +91,14 @@ export class EditingItem extends BaseComponent { - this._editingFloatingPicker.value && this._editingFloatingPicker.value.showPicker(true /*updatevalue*/); + this._editingFloatingPicker.current && this._editingFloatingPicker.current.showPicker(true /*updatevalue*/); } private _onInputBlur = (ev: React.FocusEvent): void => { - if (this._editingFloatingPicker.value && + if (this._editingFloatingPicker.current && (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1) ) { - this._editingFloatingPicker.value.forceResolveSuggestion(); + this._editingFloatingPicker.current.forceResolveSuggestion(); } } @@ -110,7 +110,7 @@ export class EditingItem extends BaseComponent) diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx index 15817e321616cc..0251e03d5915d5 100644 --- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx +++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx @@ -212,7 +212,7 @@ export class VirtualizedList extends BaseComponent private _onFocus(ev: React.FocusEvent): void { let target = ev.target as HTMLElement; - while (target !== this._root.value) { + while (target !== this._root.current) { let indexString = target.getAttribute('data-selection-index'); if (indexString) { 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 61a9fc90f66ada..59b18c8b43b200 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx @@ -34,8 +34,8 @@ export class Autofill extends BaseComponent impl } public get cursorLocation(): number | null { - if (this._inputElement.value) { - const inputElement = this._inputElement.value; + if (this._inputElement.current) { + const inputElement = this._inputElement.current; if (inputElement.selectionDirection !== SELECTION_FORWARD) { return inputElement.selectionEnd; } else { @@ -55,15 +55,15 @@ export class Autofill extends BaseComponent impl } public get selectionStart(): number | null { - return this._inputElement.value ? this._inputElement.value.selectionStart : -1; + return this._inputElement.current ? this._inputElement.current.selectionStart : -1; } public get selectionEnd(): number | null { - return this._inputElement.value ? this._inputElement.value.selectionEnd : -1; + return this._inputElement.current ? this._inputElement.current.selectionEnd : -1; } public get inputElement(): HTMLInputElement | null { - return this._inputElement.value; + return this._inputElement.current; } public componentWillReceiveProps(nextProps: IAutofillProps) { @@ -95,14 +95,14 @@ export class Autofill extends BaseComponent impl shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate(); } - if (shouldSelectFullRange && this._inputElement.value) { - this._inputElement.value.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); + if (shouldSelectFullRange && this._inputElement.current) { + this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); } else { while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) { differenceIndex++; } - if (differenceIndex > 0 && this._inputElement.value) { - this._inputElement.value.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); + if (differenceIndex > 0 && this._inputElement.current) { + this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); } } } @@ -133,13 +133,13 @@ export class Autofill extends BaseComponent impl } public focus() { - this._inputElement.value && this._inputElement.value.focus(); + this._inputElement.current && this._inputElement.current.focus(); } public clear() { this._autoFillEnabled = true; this._updateValue(''); - this._inputElement.value && this._inputElement.value.setSelectionRange(0, 0); + this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0); } // Composition events are used when the character/text requires several keystrokes to be completed. @@ -233,8 +233,8 @@ export class Autofill extends BaseComponent impl private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) { if (!isComposing && newValue - && this._inputElement.value - && this._inputElement.value.selectionStart === newValue.length + && this._inputElement.current + && this._inputElement.current.selectionStart === newValue.length && !this._autoFillEnabled && (newValue.length > oldValue.length || isComposed)) { this._autoFillEnabled = true; 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 0ae0f4f75c1507..5c04c1d286928e 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 @@ -45,8 +45,8 @@ export class Breadcrumb extends BaseComponent { * Sets focus to the first breadcrumb link. */ public focus(): void { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } 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 a08fd6c27e53ba..0dab432606f612 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -208,10 +208,10 @@ export class BaseButton extends BaseComponent @@ -428,8 +428,8 @@ export class BaseButton extends BaseComponent { - if (this._splitButtonContainer.value) { - this._splitButtonContainer.value.focus(); + if (this._splitButtonContainer.current) { + this._splitButtonContainer.current.focus(); } const currentMenuProps = this.state.menuProps; @@ -550,8 +550,8 @@ export class BaseButton extends BaseComponent) => { if (ev.which === KeyCodes.enter) { - if (this._buttonElement.value) { - this._buttonElement.value.click(); + if (this._buttonElement.current) { + this._buttonElement.current.click(); ev.preventDefault(); ev.stopPropagation(); } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 6d999bf54e92f6..ee130d056ce7e4 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -112,10 +112,10 @@ export class Calendar extends BaseComponent impl public componentDidUpdate() { if (this._focusOnUpdate) { // if the day picker is shown, focus on it - if (this._dayPicker.value) { - this._dayPicker.value.focus(); - } else if (this._monthPicker.value) { - this._monthPicker.value.focus(); + if (this._dayPicker.current) { + this._dayPicker.current.focus(); + } else if (this._monthPicker.current) { + this._monthPicker.current.focus(); } this._focusOnUpdate = false; } @@ -204,8 +204,8 @@ export class Calendar extends BaseComponent impl } public focus() { - if (this._dayPicker.value) { - this._dayPicker.value.focus(); + if (this._dayPicker.current) { + this._dayPicker.current.focus(); } } 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 aad6f3163b7162..b9eb91f7661bda 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 @@ -254,7 +254,7 @@ export class CalloutContentBase extends BaseComponent { - if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.value) { + if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.current) { this._didSetInitialFocus = true; - this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.value!)); + this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.current!)); } } @@ -327,8 +327,8 @@ export class CalloutContentBase extends BaseComponent { - const calloutMainElem = this._calloutElement.value && this._calloutElement.value.lastChild as HTMLElement; + const calloutMainElem = this._calloutElement.current && this._calloutElement.current.lastChild as HTMLElement; if (!calloutMainElem) { return; diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx index ba1d80ad79e0bf..f0e66f2cc175f3 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx @@ -131,8 +131,8 @@ export class Checkbox extends BaseComponent impl } public focus(): void { - if (this._checkBox.value) { - this._checkBox.value.focus(); + if (this._checkBox.current) { + this._checkBox.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx index ecc83d3b3cf3e8..3fc63e618ebafa 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -137,8 +137,8 @@ export class ChoiceGroup extends BaseComponent {
    { - this._positioningContainer.value && { public componentDidMount(): void { this._async.requestAnimationFrame(((): void => { - if (this._entityInnerHostElement.value && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) { + if (this._entityInnerHostElement.current && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) { // @TODO Eventually we need to add the various directions const beakLeft = (this.props.width! / 2) - (this.props.beakWidth! / 2); @@ -182,8 +182,8 @@ export class Coachmark extends BaseComponent { this.setState({ isMeasuring: false, entityInnerHostRect: { - width: this._entityInnerHostElement.value.offsetWidth, - height: this._entityInnerHostElement.value.offsetHeight + width: this._entityInnerHostElement.current.offsetWidth, + height: this._entityInnerHostElement.current.offsetHeight }, beakLeft: beakLeft + 'px', beakTop: beakTop + 'px' @@ -208,13 +208,13 @@ export class Coachmark extends BaseComponent { collapsed: false }); - this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationstart', (): void => { + this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationstart', (): void => { if (this.props.onAnimationOpenStart) { this.props.onAnimationOpenStart(); } }); - this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationend', (): void => { + this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationend', (): void => { if (this.props.onAnimationOpenEnd) { this.props.onAnimationOpenEnd(); } @@ -237,8 +237,8 @@ export class Coachmark extends BaseComponent { // Take the initial measure out of the initial render to prevent // an unnecessary render. this._async.setTimeout(() => { - if (this._entityInnerHostElement.value) { - targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect(); + if (this._entityInnerHostElement.current) { + targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect(); } // When the window resizes we want to async @@ -252,8 +252,8 @@ export class Coachmark extends BaseComponent { }); timeoutIds.push(this._async.setTimeout((): void => { - if (this._entityInnerHostElement.value) { - targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect(); + if (this._entityInnerHostElement.current) { + targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect(); } }, 100)); }); diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx index 81ffcaa73b4e1c..9123fe2b073981 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx @@ -214,7 +214,7 @@ export class PositioningContainer protected _dismissOnLostFocus(ev: Event): void { const target = ev.target as HTMLElement; - const clickedOutsideCallout = this._positionedHost.value && !elementContains(this._positionedHost.value, target); + const clickedOutsideCallout = this._positionedHost.current && !elementContains(this._positionedHost.current, target); if ( (!this._target && clickedOutsideCallout) || @@ -227,9 +227,9 @@ export class PositioningContainer } protected _setInitialFocus = (): void => { - if (this._contentHost.value && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { + if (this._contentHost.current && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { this._didSetInitialFocus = true; - focusFirstChild(this._contentHost.value); + focusFirstChild(this._contentHost.current); } } @@ -264,8 +264,8 @@ export class PositioningContainer onPositioned } = this.props; - const hostElement = this._positionedHost.value; - const positioningContainerElement = this._contentHost.value; + const hostElement = this._positionedHost.current; + const positioningContainerElement = this._contentHost.current; if (hostElement && positioningContainerElement) { let currentProps: IPositionProps | undefined; @@ -385,11 +385,11 @@ export class PositioningContainer private _setHeightOffsetEveryFrame(): void { if (this._contentHost && this.props.finalHeight) { this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => { - if (!this._contentHost.value) { + if (!this._contentHost.current) { return; } - const positioningContainerMainElem = this._contentHost.value.lastChild as HTMLElement; + const positioningContainerMainElem = this._contentHost.current.lastChild as HTMLElement; const cardScrollHeight: number = positioningContainerMainElem.scrollHeight; const cardCurrHeight: number = positioningContainerMainElem.offsetHeight; const scrollDiff: number = cardScrollHeight - cardCurrHeight; diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx index 34cf5c556d1715..65bbb98b80f669 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx @@ -73,7 +73,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam
    { isVisible && ( ): void => { const { color, onSVChanged } = this.props; - if (!this._root.value) { + if (!this._root.current) { return; } - const rectSize = this._root.value.getBoundingClientRect(); + const rectSize = this._root.current.getBoundingClientRect(); const sPercentage = (ev.clientX - rectSize.left) / rectSize.width; const vPercentage = (ev.clientY - rectSize.top) / rectSize.height; diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx index 73b4ca591adc53..d6250e0a59b530 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx @@ -85,12 +85,12 @@ export class ColorSlider extends BaseComponent): void => { - if (!this._root.value) { + if (!this._root.current) { return; } const { onChanged, minValue, maxValue } = this.props; - const rectSize = this._root.value.getBoundingClientRect(); + const rectSize = this._root.current.getBoundingClientRect(); const currentPercentage = (ev.clientX - rectSize.left) / rectSize.width; const newValue = Math.min(maxValue!, Math.max(minValue!, currentPercentage * maxValue!)); diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 92bfe74718db10..6fff4e7c507acf 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -189,7 +189,7 @@ export class ComboBox extends BaseComponent { public componentDidMount() { // hook up resolving the options if needed on focus - this._events.on(this._comboBoxWrapper.value, 'focus', this._onResolveOptions, true); + this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true); } public componentWillReceiveProps(newProps: IComboBoxProps) { @@ -238,8 +238,8 @@ export class ComboBox extends BaseComponent { !isOpen && this._focusInputAfterClose && focused && - this._autofill.value && - document.activeElement !== this._autofill.value.inputElement)) { + this._autofill.current && + document.activeElement !== this._autofill.current.inputElement)) { this.focus(); } @@ -273,7 +273,7 @@ export class ComboBox extends BaseComponent { super.componentWillUnmount(); // remove the eventHanlder that was added in componentDidMount - this._events.off(this._comboBoxWrapper.value); + this._events.off(this._comboBoxWrapper.current); } // Primary Render @@ -405,8 +405,8 @@ export class ComboBox extends BaseComponent { * Set focus on the input */ public focus = (shouldOpenOnFocus?: boolean): void => { - if (this._autofill.value) { - this._autofill.value.focus(); + if (this._autofill.current) { + this._autofill.current.focus(); if (shouldOpenOnFocus) { this.setState({ isOpen: true @@ -431,7 +431,7 @@ export class ComboBox extends BaseComponent { * @returns {string} - the updated value to set, if needed */ private _onUpdateValueInAutofillWillReceiveProps = (): string | null => { - const comboBox = this._autofill.value; + const comboBox = this._autofill.current; if (!comboBox) { return null; @@ -811,8 +811,8 @@ export class ComboBox extends BaseComponent { * and set the focused state */ private _select = (): void => { - if (this._autofill.value && this._autofill.value.inputElement) { - this._autofill.value.inputElement.select(); + if (this._autofill.current && this._autofill.current.inputElement) { + this._autofill.current.inputElement.select(); } if (!this.state.focused) { @@ -863,8 +863,8 @@ export class ComboBox extends BaseComponent { // inside the comboBox root or the comboBox menu since // it we are not really bluring from the whole comboBox if (event.relatedTarget && - (this._root.value && this._root.value.contains(event.relatedTarget as HTMLElement) || - this._comboBoxMenu.value && this._comboBoxMenu.value.contains(event.relatedTarget as HTMLElement))) { + (this._root.current && this._root.current.contains(event.relatedTarget as HTMLElement) || + this._comboBoxMenu.current && this._comboBoxMenu.current.contains(event.relatedTarget as HTMLElement))) { event.preventDefault(); event.stopPropagation(); return; @@ -909,9 +909,9 @@ export class ComboBox extends BaseComponent { // the live value in the underlying input matches the pending option; update the state if (currentPendingValue.toLocaleLowerCase() === pendingOptionText || (autoComplete && pendingOptionText.indexOf(currentPendingValue.toLocaleLowerCase()) === 0 && - (this._autofill.value && this._autofill.value.isValueSelected && - currentPendingValue.length + (this._autofill.value.selectionEnd! - this._autofill.value.selectionStart!) === pendingOptionText.length) || - (this._autofill.value && this._autofill.value.inputElement && this._autofill.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) + (this._autofill.current && this._autofill.current.isValueSelected && + currentPendingValue.length + (this._autofill.current.selectionEnd! - this._autofill.current.selectionStart!) === pendingOptionText.length) || + (this._autofill.current && this._autofill.current.inputElement && this._autofill.current.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { this._setSelectedIndex(currentPendingValueValidIndex); this._clearPendingInfo(); @@ -968,13 +968,13 @@ export class ComboBox extends BaseComponent { directionalHintFixed={ true } { ...calloutProps } className={ css(this._classNames.callout, calloutProps ? calloutProps.className : undefined) } - target={ this._comboBoxWrapper.value } + target={ this._comboBoxWrapper.current } onDismiss={ this._onDismiss } onScroll={ this._onScroll } setInitialFocus={ false } calloutWidth={ - useComboBoxAsMenuWidth && this._comboBoxWrapper.value ? - this._comboBoxWrapper.value.clientWidth + 2 + useComboBoxAsMenuWidth && this._comboBoxWrapper.current ? + this._comboBoxWrapper.current.clientWidth + 2 : dropdownWidth } >
    @@ -1200,16 +1200,16 @@ export class ComboBox extends BaseComponent { if (onScrollToItem) { // Use the custom scroll handler onScrollToItem((currentPendingValueValidIndex >= 0 || currentPendingValue !== '') ? currentPendingValueValidIndex : this._getFirstSelectedIndex()); - } else if (this._selectedElement.value && this._selectedElement.value.offsetParent) { + } else if (this._selectedElement.current && this._selectedElement.current.offsetParent) { // We are using refs, scroll the ref into view if (scrollSelectedToTop) { - this._selectedElement.value.offsetParent.scrollIntoView(true); + this._selectedElement.current.offsetParent.scrollIntoView(true); } else { let alignToTop = true; - if (this._comboBoxMenu.value && this._comboBoxMenu.value.offsetParent) { - const scrollableParentRect = this._comboBoxMenu.value.offsetParent.getBoundingClientRect(); - const selectedElementRect = this._selectedElement.value.offsetParent.getBoundingClientRect(); + if (this._comboBoxMenu.current && this._comboBoxMenu.current.offsetParent) { + const scrollableParentRect = this._comboBoxMenu.current.offsetParent.getBoundingClientRect(); + const selectedElementRect = this._selectedElement.current.offsetParent.getBoundingClientRect(); // If we are completely in view then we do not need to scroll if (scrollableParentRect.top <= selectedElementRect.top && @@ -1223,7 +1223,7 @@ export class ComboBox extends BaseComponent { } } - this._selectedElement.value.offsetParent.scrollIntoView(alignToTop); + this._selectedElement.current.offsetParent.scrollIntoView(alignToTop); } } } @@ -1262,8 +1262,8 @@ export class ComboBox extends BaseComponent { // close the menu and focus the input this.setState({ isOpen: false }); - if (this._autofill.value && this._focusInputAfterClose) { - this._autofill.value.focus(); + if (this._autofill.current && this._focusInputAfterClose) { + this._autofill.current.focus(); } } @@ -1298,8 +1298,8 @@ export class ComboBox extends BaseComponent { const { currentOptions } = this.state; - if (this._autofill.value) { - this._autofill.value.clear(); + if (this._autofill.current) { + this._autofill.current.clear(); } this._clearPendingInfo(); diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx index fc855b7ed0bde2..cd78735bf8aed4 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx @@ -12,14 +12,14 @@ export class VirtualizedComboBox extends BaseComponent imple private _list = createRef(); public dismissMenu(): void { - if (this._comboBox.value) { - return this._comboBox.value.dismissMenu(); + if (this._comboBox.current) { + return this._comboBox.current.dismissMenu(); } } public focus() { - if (this._comboBox.value) { - this._comboBox.value.focus(); + if (this._comboBox.current) { + this._comboBox.current.focus(); return true; } @@ -55,6 +55,6 @@ export class VirtualizedComboBox extends BaseComponent imple protected _onScrollToItem = (itemIndex: number): void => { // We are using the List component, call scrollToIndex - this._list.value && this._list.value.scrollToIndex(itemIndex); + this._list.current && this._list.current.scrollToIndex(itemIndex); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx index 699f8a01e5d261..acd298cda6af33 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx @@ -169,7 +169,7 @@ export class CommandBar extends BaseComponent { - const { value: commandSurface } = this._commandSurface; + const { current: commandSurface } = this._commandSurface; if (!ev || !ev.relatedTarget || commandSurface && !commandSurface.contains(ev.relatedTarget as HTMLElement)) { const { contextualMenuProps } = this.state; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx index ea2d0cde4d7aca..32e29248112f4b 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx @@ -245,7 +245,7 @@ export class DatePicker extends BaseComponent { - if (this._calendar.value) { - this._calendar.value.focus(); + if (this._calendar.current) { + this._calendar.current.focus(); } } @@ -408,8 +408,8 @@ export class DatePicker extends BaseComponent { ); const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode(); - const header: any = headerRef.value; + const header: any = headerRef.current; // Trigger a mousedown, which validates that the ref to focuszone is hooking up events. EventGroup.raise( diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx index d1ce5425fac5fc..5d35cf465b4ece 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx @@ -102,7 +102,7 @@ export class DetailsHeader extends BaseComponent number): void { - this._list.value && this._list.value.scrollToIndex(index, measureItem); - this._groupedList.value && this._groupedList.value.scrollToIndex(index, measureItem); + this._list.current && this._list.current.scrollToIndex(index, measureItem); + this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem); } public focusIndex( @@ -174,7 +174,7 @@ export class DetailsList extends BaseComponent 0 && this.state.focusedItemIndex !== -1 && - !elementContains(this._root.value, document.activeElement as HTMLElement, false) + !elementContains(this._root.current, document.activeElement as HTMLElement, false) ) { // Item set has changed and previously-focused item is gone. // Set focus to item at index of previously-focused item if it is in range, @@ -512,7 +512,7 @@ export class DetailsList extends BaseComponent) { if (ev.which === KeyCodes.down) { - if (this._focusZone.value && this._focusZone.value.focus()) { + if (this._focusZone.current && this._focusZone.current.focus()) { ev.preventDefault(); ev.stopPropagation(); } @@ -521,7 +521,7 @@ export class DetailsList extends BaseComponent) { if (ev.which === KeyCodes.up && !ev.altKey) { - if (this._header.value && this._header.value.focus()) { + if (this._header.current && this._header.current.focus()) { ev.preventDefault(); ev.stopPropagation(); } @@ -563,8 +563,8 @@ export class DetailsList extends BaseComponent { row.focus(forceIntoFirstElement); @@ -587,19 +587,19 @@ export class DetailsList extends BaseComponent= 0 && this._cellMeasurer.value) { - const newWidth = this._cellMeasurer.value.getBoundingClientRect().width; + if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) { + const newWidth = this._cellMeasurer.current.getBoundingClientRect().width; columnMeasureInfo.onMeasureDone(newWidth); @@ -329,7 +329,7 @@ export class DetailsRow extends BaseComponent { - if (this._root.value) { - this._root.value.focusIndex(items.length, true); + if (this._root.current) { + this._root.current.focusIndex(items.length, true); } }); } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 1db79e315b5b3a..9b03ef17def543 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -119,8 +119,8 @@ export class DocumentCardTitle extends BaseComponent { onRenderList(props, this._onRenderList) } @@ -549,10 +549,10 @@ export class Dropdown extends BaseComponent { - if (this._focusZone.value) { + if (this._focusZone.current) { // Focusing an element can trigger a reflow. Making this wait until there is an animation // frame can improve perf significantly. - this._async.requestAnimationFrame(() => this._focusZone.value!.focus()); + this._async.requestAnimationFrame(() => this._focusZone.current!.focus()); } } @@ -614,11 +614,11 @@ export class Dropdown extends BaseComponent { this.setState({ isOpen: false }); - if (this._dropDown.value) { - this._dropDown.value.focus(); + if (this._dropDown.current) { + this._dropDown.current.focus(); } } @@ -802,8 +802,8 @@ export class Dropdown extends BaseComponent { - if (this._basicDropdown.value) { - this._basicDropdown.value.focus(true); + if (this._basicDropdown.current) { + this._basicDropdown.current.focus(true); } } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx index 3319557f02d336..ac0b2b307bd4db 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -39,7 +39,7 @@ export class FocusTrapZone extends BaseComponent implem const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props; this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement; - if (!elementContains(this._root.value, this._previouslyFocusedElement) && !disableFirstFocus) { + if (!elementContains(this._root.current, this._previouslyFocusedElement) && !disableFirstFocus) { this.focus(); } @@ -108,11 +108,11 @@ export class FocusTrapZone extends BaseComponent implem let _firstFocusableChild; - if (this._root.value) { + if (this._root.current) { if (focusSelector) { - _firstFocusableChild = this._root.value.querySelector('.' + focusSelector); + _firstFocusableChild = this._root.current.querySelector('.' + focusSelector); } else { - _firstFocusableChild = getNextElement(this._root.value, this._root.value.firstChild as HTMLElement, true, false, false, true); + _firstFocusableChild = getNextElement(this._root.current, this._root.current.firstChild as HTMLElement, true, false, false, true); } } if (_firstFocusableChild) { @@ -134,12 +134,12 @@ export class FocusTrapZone extends BaseComponent implem return; } - if (!this._root.value) { + if (!this._root.current) { return; } - const _firstFocusableChild = getFirstFocusable(this._root.value, this._root.value.firstChild as HTMLElement, true); - const _lastFocusableChild = getLastTabbable(this._root.value, this._root.value.lastChild as HTMLElement, true); + const _firstFocusableChild = getFirstFocusable(this._root.current, this._root.current.firstChild as HTMLElement, true); + const _lastFocusableChild = getLastTabbable(this._root.current, this._root.current.lastChild as HTMLElement, true); if (ev.shiftKey && _firstFocusableChild === ev.target) { focusAsync(_lastFocusableChild); @@ -156,7 +156,7 @@ export class FocusTrapZone extends BaseComponent implem if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) { const focusedElement = document.activeElement as HTMLElement; - if (!elementContains(this._root.value, focusedElement)) { + if (!elementContains(this._root.current, focusedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); @@ -168,7 +168,7 @@ export class FocusTrapZone extends BaseComponent implem if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) { const clickedElement = ev.target as HTMLElement; - if (clickedElement && !elementContains(this._root.value, clickedElement)) { + if (clickedElement && !elementContains(this._root.current, clickedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 37c220e477b261..de89ab2aecb7fd 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -86,10 +86,10 @@ export class FocusZone extends BaseComponent implements IFo public componentDidMount() { _allInstances[this._id] = this; - if (this._root.value) { - const windowElement = this._root.value.ownerDocument.defaultView; + if (this._root.current) { + const windowElement = this._root.current.ownerDocument.defaultView; - let parentElement = getParent(this._root.value, ALLOW_VIRTUAL_ELEMENTS); + let parentElement = getParent(this._root.current, ALLOW_VIRTUAL_ELEMENTS); while ( parentElement && @@ -159,25 +159,25 @@ export class FocusZone extends BaseComponent implements IFo * @returns True if focus could be set to an active element, false if no operation was taken. */ public focus(forceIntoFirstElement: boolean = false): boolean { - if (this._root.value) { - if (!forceIntoFirstElement && this._root.value.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) { - const ownerZoneElement = this._getOwnerZone(this._root.value) as HTMLElement; + if (this._root.current) { + if (!forceIntoFirstElement && this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) { + const ownerZoneElement = this._getOwnerZone(this._root.current) as HTMLElement; - if (ownerZoneElement !== this._root.value) { + if (ownerZoneElement !== this._root.current) { const ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]; - return !!ownerZone && ownerZone.focusElement(this._root.value); + return !!ownerZone && ownerZone.focusElement(this._root.current); } return false; - } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.value, this._activeElement) + } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.current, this._activeElement) && isElementTabbable(this._activeElement)) { this._activeElement.focus(); return true; } else { - const firstChild = this._root.value.firstChild as HTMLElement; + const firstChild = this._root.current.firstChild as HTMLElement; - return this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement); + return this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement); } } return false; @@ -218,7 +218,7 @@ export class FocusZone extends BaseComponent implements IFo } else { let parentElement = ev.target as HTMLElement; - while (parentElement && parentElement !== this._root.value) { + while (parentElement && parentElement !== this._root.current) { if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) { this._activeElement = parentElement; break; @@ -250,7 +250,7 @@ export class FocusZone extends BaseComponent implements IFo let target = ev.target as HTMLElement; const path = []; - while (target && target !== this._root.value) { + while (target && target !== this._root.current) { path.push(target); target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; } @@ -301,7 +301,7 @@ export class FocusZone extends BaseComponent implements IFo return; } - if (document.activeElement === this._root.value && this._isInnerZone) { + if (document.activeElement === this._root.current && this._isInnerZone) { // If this element has focus, it is being controlled by a parent. // Ignore the keystroke. return; @@ -395,8 +395,8 @@ export class FocusZone extends BaseComponent implements IFo !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false)) { return false; } - const firstChild = this._root.value && this._root.value.firstChild as HTMLElement | null; - if (this._root.value && firstChild && this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement)) { + const firstChild = this._root.current && this._root.current.firstChild as HTMLElement | null; + if (this._root.current && firstChild && this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement)) { break; } return; @@ -408,8 +408,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - const lastChild = this._root.value && this._root.value.lastChild as HTMLElement | null; - if (this._root.value && this.focusElement(getPreviousElement(this._root.value, lastChild, true, true, true) as HTMLElement)) { + const lastChild = this._root.current && this._root.current.lastChild as HTMLElement | null; + if (this._root.current && this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true) as HTMLElement)) { break; } return; @@ -433,7 +433,7 @@ export class FocusZone extends BaseComponent implements IFo * Walk up the dom try to find a focusable element. */ private _tryInvokeClickForFocusable(target: HTMLElement): boolean { - if (target === this._root.value) { + if (target === this._root.current) { return false; } @@ -452,7 +452,7 @@ export class FocusZone extends BaseComponent implements IFo } target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; - } while (target !== this._root.value); + } while (target !== this._root.current); return false; } @@ -461,7 +461,7 @@ export class FocusZone extends BaseComponent implements IFo * Traverse to find first child zone. */ private _getFirstInnerZone(rootElement?: HTMLElement | null): FocusZone | null { - rootElement = rootElement || this._activeElement || this._root.value; + rootElement = rootElement || this._activeElement || this._root.current; if (!rootElement) { return null; @@ -501,7 +501,7 @@ export class FocusZone extends BaseComponent implements IFo let changedFocus = false; const isBidirectional = this.props.direction === FocusZoneDirection.bidirectional; - if (!element || !this._root.value) { + if (!element || !this._root.current) { return false; } @@ -514,7 +514,7 @@ export class FocusZone extends BaseComponent implements IFo const activeRect = isBidirectional ? element.getBoundingClientRect() : null; do { - element = (isForward ? getNextElement(this._root.value, element) : getPreviousElement(this._root.value, element)) as HTMLElement; + element = (isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element)) as HTMLElement; if (isBidirectional) { if (element) { @@ -548,9 +548,9 @@ export class FocusZone extends BaseComponent implements IFo this.focusElement(candidateElement); } else if (this.props.isCircularNavigation && useDefaultWrap) { if (isForward) { - return this.focusElement(getNextElement(this._root.value, this._root.value.firstElementChild as HTMLElement, true) as HTMLElement); + return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild as HTMLElement, true) as HTMLElement); } else { - return this.focusElement(getPreviousElement(this._root.value, this._root.value.lastElementChild as HTMLElement, true, true, true) as HTMLElement); + return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild as HTMLElement, true, true, true) as HTMLElement); } } @@ -718,13 +718,13 @@ export class FocusZone extends BaseComponent implements IFo } private _isImmediateDescendantOfZone(element?: HTMLElement): boolean { - return this._getOwnerZone(element) === this._root.value; + return this._getOwnerZone(element) === this._root.current; } private _getOwnerZone(element?: HTMLElement): HTMLElement | null { let parentElement = getParent(element as HTMLElement, ALLOW_VIRTUAL_ELEMENTS); - while (parentElement && parentElement !== this._root.value && parentElement !== document.body) { + while (parentElement && parentElement !== this._root.current && parentElement !== document.body) { if (isElementFocusZone(parentElement)) { return parentElement; } @@ -732,13 +732,13 @@ export class FocusZone extends BaseComponent implements IFo parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS); } - return this._root.value; + return this._root.current; } private _updateTabIndexes(element?: HTMLElement) { - if (!element && this._root.value) { + if (!element && this._root.current) { this._defaultFocusElement = null; - element = this._root.value; + element = this._root.current; if (this._activeElement && !elementContains(element, this._activeElement)) { this._activeElement = null; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx index b42da1572c0e1f..1c4fa2149b06a9 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx @@ -56,8 +56,8 @@ export class GroupedList extends BaseComponent number): void { - if (this._list.value) { - this._list.value.scrollToIndex(index, measureItem); + if (this._list.current) { + this._list.current.scrollToIndex(index, measureItem); } } @@ -247,11 +247,11 @@ export class GroupedList extends BaseComponent 0) { const subGroupCount = group.children.length; for (let i = 0; i < subGroupCount; i++) { - const subGroup = this._list.value.refs['subGroup_' + String(i)] as GroupedListSection; + const subGroup = this._list.current.refs['subGroup_' + String(i)] as GroupedListSection; if (subGroup) { subGroup.forceListUpdate(); diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx index 05e07d1c3bff19..b6ab47a089aa99 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx @@ -142,9 +142,9 @@ export class ExpandingCard extends BaseComponent { - if (this._expandedElem.value) { + if (this._expandedElem.current) { this._async.requestAnimationFrame(() => { - if (this._expandedElem.value && this._expandedElem.value.scrollHeight >= this.props.expandedCardHeight!) { + if (this._expandedElem.current && this._expandedElem.current.scrollHeight >= this.props.expandedCardHeight!) { this.setState({ needsScroll: true }); diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx index 7e04bc43247259..b401cc8f4c0135 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx @@ -138,7 +138,7 @@ export class HoverCard extends BaseComponent { return target as HTMLElement; default: - return this._hoverCard.value || undefined; + return this._hoverCard.current || undefined; } } diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx index 5d13ac2caf02a3..966228a12045e5 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx @@ -151,8 +151,8 @@ export class ImageBase extends BaseComponent { // .complete, because .complete will also be set to true if the image breaks. However, // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back // to checking .complete for these images. - const isLoaded: boolean = this._imageElement.value ? src && (this._imageElement.value.naturalWidth > 0 && this._imageElement.value.naturalHeight > 0) || - (this._imageElement.value.complete && ImageBase._svgRegex.test(src!)) : false; + const isLoaded: boolean = this._imageElement.current ? src && (this._imageElement.current.naturalWidth > 0 && this._imageElement.current.naturalHeight > 0) || + (this._imageElement.current.complete && ImageBase._svgRegex.test(src!)) : false; if (isLoaded) { this._computeCoverStyle(this.props); @@ -169,19 +169,19 @@ export class ImageBase extends BaseComponent { // Do not compute cover style if it was already specified in props if ((imageFit === ImageFit.cover || imageFit === ImageFit.contain) && this.props.coverStyle === undefined && - this._imageElement.value && - this._frameElement.value) { + this._imageElement.current && + this._frameElement.current) { // Determine the desired ratio using the width and height props. // If those props aren't available, measure measure the frame. let desiredRatio; if (!!width && !!height) { desiredRatio = (width as number) / (height as number); } else { - desiredRatio = this._frameElement.value.clientWidth / this._frameElement.value.clientHeight; + desiredRatio = this._frameElement.current.clientWidth / this._frameElement.current.clientHeight; } // Examine the source image to determine its original ratio. - const naturalRatio = this._imageElement.value.naturalWidth / this._imageElement.value.naturalHeight; + const naturalRatio = this._imageElement.current.naturalWidth / this._imageElement.current.naturalHeight; // Should we crop from the top or the sides? if (naturalRatio > desiredRatio) { diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index b20038037b429d..01181d5f2d7a27 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -108,7 +108,7 @@ export class LayerBase extends BaseComponent { this._host = host; if (!this._layerElement) { - const rootElement = this._rootElement.value; + const rootElement = this._rootElement.current; const doc = getDocument(rootElement); if (!doc || !rootElement) { @@ -171,7 +171,7 @@ export class LayerBase extends BaseComponent { private _getHost(): Node | undefined { const { hostId } = this.props; - const doc = getDocument(this._rootElement.value); + const doc = getDocument(this._rootElement.current); if (!doc) { return undefined; diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx index 255adf0716bb47..884801350150db 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx @@ -60,8 +60,8 @@ export class LinkBase extends BaseComponent implements ILink { } public focus() { - if (this._link.value) { - this._link.value.focus(); + if (this._link.current) { + this._link.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx index 9e8a2749e7cab9..7ec5f780540c26 100644 --- a/packages/office-ui-fabric-react/src/components/List/List.tsx +++ b/packages/office-ui-fabric-react/src/components/List/List.tsx @@ -261,11 +261,11 @@ export class List extends BaseComponent implements IList this._updatePages(); this._measureVersion++; - this._scrollElement = findScrollableParent(this._root.value) as HTMLElement; + this._scrollElement = findScrollableParent(this._root.current) as HTMLElement; this._events.on(window, 'resize', this._onAsyncResize); - if (this._root.value) { - this._events.on(this._root.value, 'focus', this._onFocus, true); + if (this._root.current) { + this._events.on(this._root.current, 'focus', this._onFocus, true); } if (this._scrollElement) { this._events.on(this._scrollElement, 'scroll', this._onScroll); @@ -476,7 +476,7 @@ export class List extends BaseComponent implements IList private _onFocus(ev: any) { let target = ev.target as HTMLElement; - while (target !== this._surface.value) { + while (target !== this._surface.current) { const indexString = target.getAttribute('data-list-index'); if (indexString) { @@ -927,7 +927,7 @@ export class List extends BaseComponent implements IList // This needs to be called to recalculate when new pages should be loaded. // We check to see how far we've scrolled and if it's further than a third of a page we run it again. if ( - this._surface.value && + this._surface.current && (forceUpdate || !pages || !this._surfaceRect || @@ -935,7 +935,7 @@ export class List extends BaseComponent implements IList scrollHeight !== this._scrollHeight || Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3) ) { - surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.value); + surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.current); this._scrollTop = scrollTop; } diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx index 1a5abcb5578c12..4f8e6385eee7ec 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx @@ -60,11 +60,11 @@ export class MarqueeSelection extends BaseComponent implements I } public focus() { - if (this._focusTrapZone.value) { - this._focusTrapZone.value.focus(); + if (this._focusTrapZone.current) { + this._focusTrapZone.current.focus(); } } 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 a934914477cd36..19a279d272eb94 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -86,11 +86,11 @@ export class OverflowSet extends BaseComponent implements let focusSucceeded = false; if (this.props.doNotContainWithinFocusZone) { - if (this._divContainer.value) { - focusSucceeded = focusFirstChild(this._divContainer.value); + if (this._divContainer.current) { + focusSucceeded = focusFirstChild(this._divContainer.current); } - } else if (this._focusZone.value) { - focusSucceeded = this._focusZone.value.focus(forceIntoFirstElement); + } else if (this._focusZone.current) { + focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement); } return focusSucceeded; @@ -109,12 +109,12 @@ export class OverflowSet extends BaseComponent implements } if (this.props.doNotContainWithinFocusZone) { - if (this._divContainer.value && elementContains(this._divContainer.value, childElement)) { + if (this._divContainer.current && elementContains(this._divContainer.current, childElement)) { childElement.focus(); focusSucceeded = document.activeElement === childElement; } - } else if (this._focusZone.value) { - focusSucceeded = this._focusZone.value.focusElement(childElement); + } else if (this._focusZone.current) { + focusSucceeded = this._focusZone.current.focusElement(childElement); } return focusSucceeded; diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx index e7d21d5380bc01..8aae33f9273c8a 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx @@ -308,7 +308,7 @@ export class Panel extends BaseComponent implements IP } private _updateFooterPosition(): void { - const _content = this._content.value; + const _content = this._content.current; if (_content) { const height = _content.clientHeight; const innerHeight = _content.scrollHeight; diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx index 0d48ff850ad039..f3ec8ce5527bfd 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx @@ -95,8 +95,8 @@ export class Pivot extends BaseComponent { * Sets focus to the first pivot tab. */ public focus(): void { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx index 7834e89b4a948d..a10db7d82c1be6 100644 --- a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx +++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx @@ -38,14 +38,14 @@ export class Popup extends BaseComponent { } public componentDidMount(): void { - if (!this._root.value) { + if (!this._root.current) { return; } - this._events.on(this._root.value, 'focus', this._onFocus, true); - this._events.on(this._root.value, 'blur', this._onBlur, true); + this._events.on(this._root.current, 'focus', this._onFocus, true); + this._events.on(this._root.current, 'blur', this._onBlur, true); - if (doesElementContainFocus(this._root.value)) { + if (doesElementContainFocus(this._root.current)) { this._containsFocus = true; } @@ -114,7 +114,7 @@ export class Popup extends BaseComponent { private _getScrollBar() { let needsVerticalScrollBar = false; - if (this._root && this._root.value && this._root.value.firstElementChild) { + if (this._root && this._root.current && this._root.current.firstElementChild) { // ClientHeight returns the client height of an element rounded to an // integer. On some browsers at different zoom levels this rounding // can generate different results for the root container and child even @@ -124,8 +124,8 @@ export class Popup extends BaseComponent { // Therefore instead we will calculate the difference between heights and // allow for a 1px difference to still be considered ok and not show the // scroll bar. - const rootHeight = this._root.value.clientHeight; - const firstChildHeight = this._root.value.firstElementChild.clientHeight; + const rootHeight = this._root.current.clientHeight; + const firstChildHeight = this._root.current.firstElementChild.clientHeight; if (rootHeight > 0 && firstChildHeight > rootHeight) { needsVerticalScrollBar = (firstChildHeight - rootHeight) > 1; } diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx index f0790dc988d2ef..294e0991d7902b 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx @@ -351,7 +351,7 @@ export class ResizeGroupBase extends BaseComponent { let containerWidth = undefined; - if (this.state.measureContainer && this._root.value) { - containerWidth = this._root.value.getBoundingClientRect().width; + if (this.state.measureContainer && this._root.current) { + containerWidth = this._root.current.getBoundingClientRect().width; } const nextState = this._nextResizeGroupStateProvider.getNextState(this.props, this.state, - () => this._measured.value ? this._measured.value.scrollWidth : 0, + () => this._measured.current ? this._measured.current.scrollWidth : 0, containerWidth); if (nextState) { @@ -374,7 +374,7 @@ export class ResizeGroupBase extends BaseComponent } public get root(): HTMLDivElement | null { - return this._root.value; + return this._root.current; } public get stickyAbove(): HTMLDivElement | null { - return this._stickyAboveRef.value; + return this._stickyAboveRef.current; } public get stickyBelow(): HTMLDivElement | null { - return this._stickyBelowRef.value; + return this._stickyBelowRef.current; } public getChildContext() { @@ -72,19 +72,19 @@ export class ScrollablePaneBase extends BaseComponent } public componentDidMount() { - this._events.on(this._root.value, 'scroll', this.notifySubscribers); + this._events.on(this._root.current, 'scroll', this.notifySubscribers); this._events.on(window, 'resize', this._onWindowResize); } public componentWillUnmount() { - this._events.off(this._root.value); + this._events.off(this._root.current); this._events.off(window); } public componentDidUpdate(prevProps: IScrollablePaneProps) { const initialScrollPosition = this.props.initialScrollPosition; - if (this._root.value && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) { - this._root.value.scrollTop = initialScrollPosition; + if (this._root.current && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) { + this._root.current.scrollTop = initialScrollPosition; } } @@ -126,45 +126,45 @@ export class ScrollablePaneBase extends BaseComponent public addStickyHeader = (sticky: Sticky): void => { this._addSticky(sticky, this._stickyAbove, () => { - if (this._stickyAboveRef.value) { - this._stickyAboveRef.value.appendChild(sticky.content); + if (this._stickyAboveRef.current) { + this._stickyAboveRef.current.appendChild(sticky.content); } }); } public addStickyFooter = (sticky: Sticky): void => { this._addSticky(sticky, this._stickyBelow, () => { - if (this._stickyBelowRef.value) { - this._stickyBelowRef.value.insertBefore(sticky.content, this._stickyBelowRef.value.firstChild); + if (this._stickyBelowRef.current) { + this._stickyBelowRef.current.insertBefore(sticky.content, this._stickyBelowRef.current.firstChild); } }); } public removeStickyHeader = (sticky: Sticky): void => { - this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.value); + this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.current); } public removeStickyFooter = (sticky: Sticky): void => { - this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.value); + this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.current); } public notifySubscribers = (sort?: boolean): void => { this._subscribers.forEach((handle) => { - if (this._stickyAboveRef.value && this._stickyBelowRef.value) { - handle(this._stickyAboveRef.value.getBoundingClientRect(), this._stickyBelowRef.value.getBoundingClientRect()); + if (this._stickyAboveRef.current && this._stickyBelowRef.current) { + handle(this._stickyAboveRef.current.getBoundingClientRect(), this._stickyBelowRef.current.getBoundingClientRect()); } }); if (this._stickyAbove.size > 1) { - this._sortStickies(this._stickyAbove, this._stickyAboveRef.value); + this._sortStickies(this._stickyAbove, this._stickyAboveRef.current); } if (this._stickyBelow.size > 1) { - this._sortStickies(this._stickyBelow, this._stickyBelowRef.value); + this._sortStickies(this._stickyBelow, this._stickyBelowRef.current); } } public getScrollPosition = (): number => { - if (this._root.value) { - return this._root.value.scrollTop; + if (this._root.current) { + return this._root.current.scrollTop; } return 0; @@ -218,8 +218,8 @@ export class ScrollablePaneBase extends BaseComponent let stickyArr = Array.from(stickyList); stickyArr = stickyArr.sort((a, b) => { - const aOffset = this._calculateOffsetParent(a.root.value); - const bOffset = this._calculateOffsetParent(b.root.value); + const aOffset = this._calculateOffsetParent(a.root.current); + const bOffset = this._calculateOffsetParent(b.root.current); return aOffset - bOffset; }); // Get number of elements that is already in order. @@ -243,7 +243,7 @@ export class ScrollablePaneBase extends BaseComponent private _calculateOffsetParent(ele: HTMLElement | null): number { let offset = 0; - while (ele && this._root.value && ele.offsetParent !== this._root.value.offsetParent) { + while (ele && this._root.current && ele.offsetParent !== this._root.current.offsetParent) { offset += ele.offsetTop; if (ele.parentElement) { ele = ele.parentElement; diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index 9d9f72145e7043..de4c2066ff10a4 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -121,8 +121,8 @@ export class SearchBoxBase extends BaseComponent); @@ -211,7 +211,7 @@ export class SearchBoxBase extends BaseComponent): void => { - this._events.off(this._rootElement.value, 'blur'); + this._events.off(this._rootElement.current, 'blur'); this.setState({ hasFocus: false }); diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx index 9da5f25de6ba14..3b84e566df72da 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx @@ -151,8 +151,8 @@ export class Slider extends BaseComponent implements ) as React.ReactElement<{}>; } public focus(): void { - if (this._thumb.value) { - this._thumb.value.focus(); + if (this._thumb.current) { + this._thumb.current.focus(); } } @@ -185,13 +185,13 @@ export class Slider extends BaseComponent implements } private _onMouseMoveOrTouchMove = (event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void => { - if (!this._sliderLine.value) { + if (!this._sliderLine.current) { return; } const { max, min, step } = this.props; const steps: number = (max! - min!) / step!; - const sliderPositionRect: ClientRect = this._sliderLine.value.getBoundingClientRect(); + const sliderPositionRect: ClientRect = this._sliderLine.current.getBoundingClientRect(); const sliderLength: number = !this.props.vertical ? sliderPositionRect.width : sliderPositionRect.height; const stepLength: number = sliderLength / steps; let currentSteps: number | undefined; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx index 5ca3fcdf8e4826..758cd3c8864860 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx @@ -263,14 +263,14 @@ export class SpinButton extends BaseComponent): void => { // We can't set focus on a non-existing element - if (!this._input.value) { + if (!this._input.current) { return; } @@ -278,7 +278,7 @@ export class SpinButton extends BaseComponent { this.content = document.createElement('div'); this.content.style.background = this.props.stickyBackgroundColor || this._getBackground(); ReactDOM.render(
    { this.props.children }
    , this.content); - if (this.root.value) { - this.root.value.appendChild(this.content); + if (this.root.current) { + this.root.current.appendChild(this.content); } this.context.scrollablePane.notifySubscribers(true); } @@ -135,11 +135,11 @@ export class Sticky extends BaseComponent { } private _onScrollEvent = (headerBound: ClientRect, footerBound: ClientRect): void => { - if (!this.root.value) { + if (!this.root.current) { return; } - const { top, bottom } = this.root.value.getBoundingClientRect(); + const { top, bottom } = this.root.current.getBoundingClientRect(); const { isStickyTop, isStickyBottom } = this.state; const { stickyPosition } = this.props; const canStickyHeader = stickyPosition === StickyPositionType.Both || stickyPosition === StickyPositionType.Header; @@ -159,8 +159,8 @@ export class Sticky extends BaseComponent { } private _resetSticky(callback: () => void): void { - if (this.root.value) { - this.root.value.appendChild(this.content); + if (this.root.current) { + this.root.current.appendChild(this.content); } setTimeout(() => { @@ -173,11 +173,11 @@ export class Sticky extends BaseComponent { // Gets background of nearest parent element that has a declared background-color attribute private _getBackground(): string | null { - if (!this.root.value) { + if (!this.root.current) { return null; } - let curr: HTMLElement = this.root.value; + let curr: HTMLElement = this.root.current; while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' || window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') { 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 309fd7ee2ca28a..18999147b804d9 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -214,8 +214,8 @@ export class TextField extends BaseComponent i * Sets focus on the text field */ public focus() { - if (this._textElement.value) { - this._textElement.value.focus(); + if (this._textElement.current) { + this._textElement.current.focus(); } } @@ -223,8 +223,8 @@ export class TextField extends BaseComponent i * Selects the text field */ public select() { - if (this._textElement.value) { - this._textElement.value.select(); + if (this._textElement.current) { + this._textElement.current.select(); } } @@ -232,8 +232,8 @@ export class TextField extends BaseComponent i * Sets the selection start of the text field to a specified value */ public setSelectionStart(value: number) { - if (this._textElement.value) { - this._textElement.value.selectionStart = value; + if (this._textElement.current) { + this._textElement.current.selectionStart = value; } } @@ -241,8 +241,8 @@ export class TextField extends BaseComponent i * Sets the selection end of the text field to a specified value */ public setSelectionEnd(value: number) { - if (this._textElement.value) { - this._textElement.value.selectionEnd = value; + if (this._textElement.current) { + this._textElement.current.selectionEnd = value; } } @@ -250,14 +250,14 @@ export class TextField extends BaseComponent i * Gets the selection start of the text field */ public get selectionStart(): number | null { - return this._textElement.value ? this._textElement.value.selectionStart : -1; + return this._textElement.current ? this._textElement.current.selectionStart : -1; } /** * Gets the selection end of the text field */ public get selectionEnd(): number | null { - return this._textElement.value ? this._textElement.value.selectionEnd : -1; + return this._textElement.current ? this._textElement.current.selectionEnd : -1; } /** @@ -266,8 +266,8 @@ export class TextField extends BaseComponent i * @param end Index of the end of the selection. */ public setSelectionRange(start: number, end: number) { - if (this._textElement.value) { - (this._textElement.value as HTMLInputElement).setSelectionRange(start, end); + if (this._textElement.current) { + (this._textElement.current as HTMLInputElement).setSelectionRange(start, end); } } @@ -465,8 +465,8 @@ export class TextField extends BaseComponent i } private _adjustInputHeight(): void { - if (this._textElement.value && this.props.autoAdjustHeight && this.props.multiline) { - const textField = this._textElement.value; + if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) { + const textField = this._textElement.current; textField.style.height = ''; const scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars textField.style.height = scrollHeight + 'px'; diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx index c1b30f53390983..f57a7e86d4e076 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx @@ -117,8 +117,8 @@ export class Toggle extends BaseComponent implements } public focus() { - if (this._toggleButton.value) { - this._toggleButton.value.focus(); + if (this._toggleButton.current) { + this._toggleButton.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx index ed7d4466707926..2b9bc6503b0d34 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx @@ -99,7 +99,7 @@ export class TooltipHost extends BaseComponent> extends BaseComponent< } public focus() { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } public focusInput() { - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } } @@ -148,10 +148,10 @@ export class BasePicker> extends BaseComponent< } public completeSuggestion() { - if (this.suggestionStore.hasSelectedSuggestion() && this.input.value) { + if (this.suggestionStore.hasSelectedSuggestion() && this.input.current) { this.addItem(this.suggestionStore.currentSuggestion!.item); this.updateValue(''); - this.input.value.clear(); + this.input.current.clear(); } } @@ -235,7 +235,7 @@ export class BasePicker> extends BaseComponent< > extends BaseComponent< const { items } = this.state; if (items.length && index! >= 0) { - const newEl: HTMLElement | null = this.root.value && this.root.value.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null; - if (newEl && this.focusZone.value) { - this.focusZone.value.focusElement(newEl); + const newEl: HTMLElement | null = this.root.current && this.root.current.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null; + if (newEl && this.focusZone.current) { + this.focusZone.current.focusElement(newEl); } } else if (!this.canAddItems()) { (items[items.length - 1] as IPickerItemProps).selected = true; this.resetFocus(items.length - 1); } else { - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } } } protected onSuggestionSelect() { if (this.suggestionStore.currentSuggestion) { - const currentValue: string = this.input.value ? this.input.value.value : ''; + const currentValue: string = this.input.current ? this.input.current.value : ''; const itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue); this.setState({ suggestedDisplayValue: itemValue }); } @@ -347,11 +347,11 @@ export class BasePicker> extends BaseComponent< if (updatedValue !== undefined) { this.setState({ - suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false + suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false }); } else { this.setState({ - suggestionsVisible: this.input.value ? this.input.value.inputElement === document.activeElement : false + suggestionsVisible: this.input.current ? this.input.current.inputElement === document.activeElement : false }); } @@ -387,7 +387,7 @@ export class BasePicker> extends BaseComponent< this.setState({ suggestionsLoading: false, suggestedDisplayValue: itemValue, - suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false + suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false }); } @@ -424,14 +424,14 @@ export class BasePicker> extends BaseComponent< if (!this.state.isFocused) { this.setState({ isFocused: true }); this.selection.setAllSelected(false); - if (this.input.value && this.input.value.value === '' && this.props.onEmptyInputFocus) { + if (this.input.current && this.input.current.value === '' && this.props.onEmptyInputFocus) { this.onEmptyInputFocus(); this.setState({ isMostRecentlyUsedVisible: true, moreSuggestionsAvailable: false, suggestionsVisible: true }); - } else if (this.input.value && this.input.value.value) { + } else if (this.input.current && this.input.current.value) { this.setState({ isMostRecentlyUsedVisible: false, suggestionsVisible: true @@ -445,7 +445,7 @@ export class BasePicker> extends BaseComponent< protected onInputBlur = (ev: React.FocusEvent): void => { // Only blur if an unrelated element gets focus. Otherwise treat it as though it still has focus. - if (!elementContains(this.root.value!, ev.relatedTarget as HTMLElement)) { + if (!elementContains(this.root.current!, ev.relatedTarget as HTMLElement)) { this.setState({ isFocused: false }); if (this.props.inputProps && this.props.inputProps.onBlur) { this.props.inputProps.onBlur(ev as React.FocusEvent); @@ -466,8 +466,8 @@ export class BasePicker> extends BaseComponent< case KeyCodes.tab: case KeyCodes.enter: - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedActionSelected()) { - this.suggestionElement.value.executeSelectedAction(); + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedActionSelected()) { + this.suggestionElement.current.executeSelectedAction(); } else if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) { this.completeSuggestion(); ev.preventDefault(); @@ -487,7 +487,7 @@ export class BasePicker> extends BaseComponent< case KeyCodes.del: if (!this.props.disabled) { - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { if (this.props.onRemoveSuggestion) { (this.props.onRemoveSuggestion as any)(this.suggestionStore.currentSuggestion!.item); } @@ -501,15 +501,15 @@ export class BasePicker> extends BaseComponent< break; case KeyCodes.up: - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) { - if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) { + if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { ev.preventDefault(); ev.stopPropagation(); } else { - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) { + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) { ev.preventDefault(); ev.stopPropagation(); - this.suggestionElement.value.focusAboveSuggestions(); + this.suggestionElement.current.focusAboveSuggestions(); this.suggestionStore.deselectAllSuggestions(); this.forceUpdate(); } else { @@ -524,15 +524,15 @@ export class BasePicker> extends BaseComponent< break; case KeyCodes.down: - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) { - if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) { + if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { ev.preventDefault(); ev.stopPropagation(); } else { - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) { + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) { ev.preventDefault(); ev.stopPropagation(); - this.suggestionElement.value.focusBelowSuggestions(); + this.suggestionElement.current.focusBelowSuggestions(); this.suggestionStore.deselectAllSuggestions(); this.forceUpdate(); } else { @@ -563,8 +563,8 @@ export class BasePicker> extends BaseComponent< this.setState({ isSearching: true }, () => { - if (this.props.onGetMoreResults && this.input.value) { - const suggestions: T[] | PromiseLike = (this.props.onGetMoreResults as any)(this.input.value.value, this.state.items); + if (this.props.onGetMoreResults && this.input.current) { + const suggestions: T[] | PromiseLike = (this.props.onGetMoreResults as any)(this.input.current.value, this.state.items); const suggestionsArray: T[] = suggestions as T[]; const suggestionsPromiseLike: PromiseLike = suggestions as PromiseLike; @@ -581,8 +581,8 @@ export class BasePicker> extends BaseComponent< this.setState({ isSearching: false }); } - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } this.setState({ @@ -594,8 +594,8 @@ export class BasePicker> extends BaseComponent< protected addItemByIndex = (index: number): void => { this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item); - if (this.input.value) { - this.input.value.clear(); + if (this.input.current) { + this.input.current.clear(); } this.updateValue(''); } @@ -645,7 +645,7 @@ export class BasePicker> extends BaseComponent< // This is protected because we may expect the backspace key to work differently in a different kind of picker. // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow protected onBackspace(ev: React.KeyboardEvent) { - if (this.state.items.length && !this.input.value || this.input.value && (!this.input.value.isValueSelected && this.input.value.cursorLocation === 0)) { + if (this.state.items.length && !this.input.current || this.input.current && (!this.input.current.isValueSelected && this.input.current.cursorLocation === 0)) { if (this.selection.getSelectedCount() > 0) { this.removeItems(this.selection.getSelection()); } else { @@ -700,8 +700,8 @@ export class BasePicker> extends BaseComponent< } private _onValidateInput() { - if (this.props.onValidateInput && this.input.value && (this.props.onValidateInput as any)(this.input.value.value) !== ValidationState.invalid && this.props.createGenericItem) { - const itemToConvert = this.props.createGenericItem(this.input.value.value, this.props.onValidateInput(this.input.value.value)); + if (this.props.onValidateInput && this.input.current && (this.props.onValidateInput as any)(this.input.current.value) !== ValidationState.invalid && this.props.createGenericItem) { + const itemToConvert = this.props.createGenericItem(this.input.current.value, this.props.onValidateInput(this.input.current.value)); this.suggestionStore.createGenericSuggestion(itemToConvert); this.completeSuggestion(); } diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx index 6a928a6039e632..15ee6b4c804223 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx @@ -58,7 +58,7 @@ export class SelectedItemWithMenu extends BaseComponent) diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx index 761e45cc7bafff..3747bfaa936260 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx @@ -77,15 +77,15 @@ export class Suggestions extends BaseComponent, ISuggest } public componentDidMount() { this.scrollSelected(); - this.activeSelectedElement = this._selectedElement ? this._selectedElement.value : null; + this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null; } public componentDidUpdate() { // Only scroll to selected element if the selected element has changed. Otherwise do nothing. // This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element // will trigger a focus event and not give the clicked element the click. - if (this.activeSelectedElement && this._selectedElement.value && this.activeSelectedElement !== this._selectedElement.value) { + if (this.activeSelectedElement && this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) { this.scrollSelected(); - this.activeSelectedElement = this._selectedElement.value; + this.activeSelectedElement = this._selectedElement.current; } } @@ -218,14 +218,14 @@ export class Suggestions extends BaseComponent, ISuggest if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); newSelectedActionType = SuggestionActionType.none; - } else if (this._searchForMoreButton.value) { + } else if (this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } else { newSelectedActionType = SuggestionActionType.forceResolve; } break; case SuggestionActionType.searchMore: - if (this._forceResolveButton.value) { + if (this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } else if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); @@ -235,7 +235,7 @@ export class Suggestions extends BaseComponent, ISuggest } break; case SuggestionActionType.none: - if (currentSuggestionIndex === -1 && this._forceResolveButton.value) { + if (currentSuggestionIndex === -1 && this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } break; @@ -243,7 +243,7 @@ export class Suggestions extends BaseComponent, ISuggest } else if (keyCode === KeyCodes.up) { switch (currentSelectedAction) { case SuggestionActionType.forceResolve: - if (this._searchForMoreButton.value) { + if (this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } else if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); @@ -254,12 +254,12 @@ export class Suggestions extends BaseComponent, ISuggest if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); newSelectedActionType = SuggestionActionType.none; - } else if (this._forceResolveButton.value) { + } else if (this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } break; case SuggestionActionType.none: - if (currentSuggestionIndex === -1 && this._searchForMoreButton.value) { + if (currentSuggestionIndex === -1 && this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } break; @@ -275,7 +275,7 @@ export class Suggestions extends BaseComponent, ISuggest } public hasSuggestedAction(): boolean { - return this._searchForMoreButton.value !== undefined || this._forceResolveButton.value !== undefined; + return this._searchForMoreButton.current !== undefined || this._forceResolveButton.current !== undefined; } public hasSuggestedActionSelected(): boolean { @@ -294,31 +294,31 @@ export class Suggestions extends BaseComponent, ISuggest } public focusAboveSuggestions(): void { - if (this._forceResolveButton.value) { + if (this._forceResolveButton.current) { this.setState({ selectedActionType: SuggestionActionType.forceResolve }); - } else if (this._searchForMoreButton.value) { + } else if (this._searchForMoreButton.current) { this.setState({ selectedActionType: SuggestionActionType.searchMore }); } } public focusBelowSuggestions(): void { - if (this._searchForMoreButton.value) { + if (this._searchForMoreButton.current) { this.setState({ selectedActionType: SuggestionActionType.searchMore }); - } else if (this._forceResolveButton.value) { + } else if (this._forceResolveButton.current) { this.setState({ selectedActionType: SuggestionActionType.forceResolve }); } } public focusSearchForMoreButton() { - if (this._searchForMoreButton.value) { - this._searchForMoreButton.value.focus(); + if (this._searchForMoreButton.current) { + this._searchForMoreButton.current.focus(); } } // TODO get the element to scroll into view properly regardless of direction. public scrollSelected() { - if (this._selectedElement.value && this._selectedElement.value.scrollIntoView !== undefined) { - this._selectedElement.value.scrollIntoView(false); + if (this._selectedElement.current && this._selectedElement.current.scrollIntoView !== undefined) { + this._selectedElement.current.scrollIntoView(false); } } diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx index f7c2137e4a12ca..f9ea0029dc36e7 100644 --- a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx +++ b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx @@ -88,7 +88,7 @@ export function withViewport(Co /* Note: using lambda here because decorators don't seem to work in decorators. */ private _updateViewport = (withForceUpdate?: boolean) => { const { viewport } = this.state; - const viewportElement = this._root.value; + const viewportElement = this._root.current; const scrollElement = findScrollableParent(viewportElement); const scrollRect = getRect(scrollElement); const clientRect = getRect(viewportElement); diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx index f9ff08cfc0df97..be9efb36651daa 100644 --- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx +++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx @@ -72,8 +72,8 @@ export class SelectionZone extends BaseComponent { private _isTouchTimeoutId: number | undefined; public componentDidMount() { - const win = getWindow(this._root.value); - const scrollElement = findScrollableParent(this._root.value); + const win = getWindow(this._root.current); + const scrollElement = findScrollableParent(this._root.current); // Track the latest modifier keys globally. this._events.on(win, 'keydown, keyup', this._updateModifiers, true); @@ -121,13 +121,13 @@ export class SelectionZone extends BaseComponent { return; } - if (!elementContains(ev.target, this._root.value)) { + if (!elementContains(ev.target, this._root.current)) { return; } let target = ev.target as HTMLElement; - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { this.ignoreNextFocus(); break; @@ -185,7 +185,7 @@ export class SelectionZone extends BaseComponent { return; } - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { break; } else if (itemRoot) { @@ -220,7 +220,7 @@ export class SelectionZone extends BaseComponent { return; } - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { this._onToggleAllClick(ev); break; @@ -271,7 +271,7 @@ export class SelectionZone extends BaseComponent { } private _isSelectionDisabled(target: HTMLElement): boolean { - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) { return true; } @@ -300,7 +300,7 @@ export class SelectionZone extends BaseComponent { if (itemRoot && onItemInvoked && selectionMode !== SelectionMode.none && !this._isInputElement(target)) { const index = this._getItemIndex(itemRoot); - while (target !== this._root.value) { + while (target !== this._root.current) { if ( this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) || this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { @@ -366,7 +366,7 @@ export class SelectionZone extends BaseComponent { if (itemRoot) { const index = this._getItemIndex(itemRoot); - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) { // For toggle elements, assuming they are rendered as buttons, they will generate a click event, // so we can no-op for any keydowns in this case. @@ -513,7 +513,7 @@ export class SelectionZone extends BaseComponent { private _findItemRoot(target: HTMLElement): HTMLElement | undefined { const { selection } = this.props; - while (target !== this._root.value) { + while (target !== this._root.current) { const indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME); const index = Number(indexValue); @@ -524,7 +524,7 @@ export class SelectionZone extends BaseComponent { target = getParent(target) as HTMLElement; } - if (target === this._root.value) { + if (target === this._root.current) { return undefined; } @@ -538,7 +538,7 @@ export class SelectionZone extends BaseComponent { private _hasAttribute(element: HTMLElement, attributeName: string): boolean { let isToggle = false; - while (!isToggle && element !== this._root.value) { + while (!isToggle && element !== this._root.current) { isToggle = element.getAttribute(attributeName) === 'true'; element = getParent(element) as HTMLElement; } diff --git a/packages/utilities/src/createRef.test.ts b/packages/utilities/src/createRef.test.ts index ba1c9130c8b44b..0f37ddba100b54 100644 --- a/packages/utilities/src/createRef.test.ts +++ b/packages/utilities/src/createRef.test.ts @@ -2,17 +2,26 @@ import * as React from 'react'; import { createRef } from './createRef'; describe('createRef', () => { - it('to have a value prop that is null on creation', () => { - expect(createRef().value).toEqual(null); + it('to have a current prop that is null on creation', () => { + expect(createRef().current).toEqual(null); }); - it('when called with ReactElement it sets the value to the passed component', () => { + it('when called with ReactElement it sets the current property to the passed component', () => { const component = React.createElement('span'); const refObject = createRef>(); refObject(component); - expect(refObject.value).toBe(component); + expect(refObject.current).toBe(component); + }); + + it('when called with HTMLElement it sets the current property to the passed element', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.current).toBe(component); }); it('when called with HTMLElement it sets the value to the passed element', () => { @@ -21,6 +30,30 @@ describe('createRef', () => { refObject(component); - expect(refObject.value).toBe(component); + expect(refObject.current).toBe(component); + }); + + describe('the deprecated value prop', () => { + it('is initialized to null', () => { + expect(createRef().value).toEqual(null); + }); + + it('is set to the passed element', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.value).toBe(component); + }); + + it('is the same value as current', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.value).toBe(refObject.current); + }); }); }); diff --git a/packages/utilities/src/createRef.ts b/packages/utilities/src/createRef.ts index b08cd78f3290e0..ac72b96147a0e6 100644 --- a/packages/utilities/src/createRef.ts +++ b/packages/utilities/src/createRef.ts @@ -1,13 +1,33 @@ export type RefObject = { (component: T | null): void; + current: T | null; + + /** + * @deprecated Use .current as that is consistent the official React Api. + */ value: T | null; }; +/** + * This is a polyfill for the React.createRef() api. + * For more info on React.createRef() see the official React documentation + * on creating and accessing refs. + * @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs + * @see https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs + */ export function createRef(): RefObject { const refObject = ((element: T | null): void => { - refObject.value = element; + refObject.current = element; }) as RefObject; - refObject.value = null; + + // This getter is here to support the deprecated value prop on the refObject. + Object.defineProperty(refObject, 'value', { + get(): T | null { + return refObject.current; + } + }); + + refObject.current = null; return refObject; } \ No newline at end of file From c86fc5bd6fe2385309833fd746a7a46dd3b0f8bb Mon Sep 17 00:00:00 2001 From: Christian Gonzalez Date: Thu, 19 Apr 2018 10:58:06 -0700 Subject: [PATCH 36/86] Remove usage of Number.NaN (#4615) * Number.isNaN does not exist in IE11 * Rush change --- .../IE11-NaN_2018-04-19-15-14.json | 11 +++++++++++ .../src/components/SpinButton/SpinButton.tsx | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json diff --git a/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json b/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json new file mode 100644 index 00000000000000..a456dd7fa268b3 --- /dev/null +++ b/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "christianjordangonzalez@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx index 758cd3c8864860..2740c26768a708 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx @@ -202,8 +202,8 @@ export class SpinButton extends BaseComponent Date: Thu, 19 Apr 2018 10:59:54 -0700 Subject: [PATCH 37/86] ComboBox: Add any event as additional parameter to onChanged callback for saving pending changes (#4594) * added new paramater to callback * added change file * updated the combobox type import * changed callback to include all events instead of just keycode * made events more generic so user can parse it themselves * made event optional * re-arranged function call and added more any events * removed unneeded parameter added * updated change file * fixed type * changed event to any to prevent crashes --- ...-newComboboxCallback_2018-04-18-00-34.json | 11 ++++++++ .../src/components/ComboBox/ComboBox.tsx | 27 ++++++++++--------- .../src/components/ComboBox/ComboBox.types.ts | 2 +- 3 files changed, 26 insertions(+), 14 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json diff --git a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json new file mode 100644 index 00000000000000..367179e263714a --- /dev/null +++ b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chiechan@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 6fff4e7c507acf..6e6e35825d4fa2 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -32,6 +32,7 @@ import { getClassNames, getComboBoxOptionClassNames } from './ComboBox.classNames'; +import { BaseButton, Button } from 'src/index.bundle'; export interface IComboBoxState { @@ -749,7 +750,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none) { + private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none) { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -797,7 +798,7 @@ export class ComboBox extends BaseComponent { // Did the creator give us an onChanged callback? if (onChanged) { - onChanged(option, index); + onChanged(option, index, undefined, submitPendingValueEvent); } // if we have a new selected index, @@ -873,7 +874,7 @@ export class ComboBox extends BaseComponent { if (this.state.focused) { this.setState({ focused: false }); if (!this.props.multiSelect) { - this._submitPendingValue(); + this._submitPendingValue(event); } } } @@ -881,7 +882,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue() { + private _submitPendingValue(submitPendingValueEvent: any) { const { onChanged, allowFreeform, @@ -913,14 +914,14 @@ export class ComboBox extends BaseComponent { currentPendingValue.length + (this._autofill.current.selectionEnd! - this._autofill.current.selectionStart!) === pendingOptionText.length) || (this._autofill.current && this._autofill.current.inputElement && this._autofill.current.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { - this._setSelectedIndex(currentPendingValueValidIndex); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); this._clearPendingInfo(); return; } } if (onChanged) { - onChanged(undefined, undefined, currentPendingValue); + onChanged(undefined, undefined, currentPendingValue, submitPendingValueEvent); } else { // If we are not controlled, create a new option const newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue }; @@ -939,10 +940,10 @@ export class ComboBox extends BaseComponent { } else if (currentPendingValueValidIndex >= 0) { // Since we are not allowing freeform, we must have a matching // to be able to update state - this._setSelectedIndex(currentPendingValueValidIndex); + this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent); } else if (currentPendingValueValidIndexOnHover >= 0) { // If all else failed and we were hovering over an item, select it - this._setSelectedIndex(currentPendingValueValidIndexOnHover); + this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent, ); } // Finally, clear the pending info @@ -1238,9 +1239,9 @@ export class ComboBox extends BaseComponent { * to select the item and also close the menu * @param index - the index of the item that was clicked */ - private _onItemClick(index: number | undefined): () => void { - return (): void => { - this._setSelectedIndex(index as number); + private _onItemClick(index: number | undefined): (ev: any) => void { + return (ev: any): void => { + this._setSelectedIndex(index as number, ev); if (!this.props.multiSelect) { // only close the callout when it's in single-select mode this.setState({ @@ -1465,7 +1466,7 @@ export class ComboBox extends BaseComponent { switch (ev.which) { case KeyCodes.enter: - this._submitPendingValue(); + this._submitPendingValue(ev); if (this.props.multiSelect && isOpen) { this.setState({ currentPendingValueValidIndex: index @@ -1493,7 +1494,7 @@ export class ComboBox extends BaseComponent { case KeyCodes.tab: // On enter submit the pending value if (!this.props.multiSelect) { - this._submitPendingValue(); + this._submitPendingValue(ev); } // If we are not allowing freeform diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts index 636e96c4f96fe0..af659255ea9afa 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts @@ -53,7 +53,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true * (and hence only value would be true, the other parameter would be null in this case) */ - onChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void; + onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) => void; /** * Callback issued when the user changes the pending value in ComboBox From 88a66209aa82f633e3470b71c7e661c1514e01f7 Mon Sep 17 00:00:00 2001 From: OneDrive Build Date: Thu, 19 Apr 2018 18:26:00 +0000 Subject: [PATCH 38/86] Applying package updates. --- apps/fabric-website/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/test-bundle-button/package.json | 2 +- apps/todo-app/package.json | 2 +- apps/vr-tests/package.json | 2 +- ...l-fix-createRef-type_2018-04-18-16-05.json | 11 ---- ...l-fix-createRef-type_2018-04-18-16-05.json | 11 ---- ...l-fix-createRef-type_2018-04-18-16-05.json | 11 ---- .../IE11-NaN_2018-04-19-15-14.json | 11 ---- ...adcrumboverflowindex_2018-04-19-00-05.json | 11 ---- ...-newComboboxCallback_2018-04-18-00-34.json | 11 ---- .../cliffkoh-miscFix_2018-04-18-22-24.json | 11 ---- ...l-fix-createRef-type_2018-04-18-16-05.json | 11 ---- ...ove-unused-variables_2018-04-18-22-52.json | 11 ---- packages/example-app-base/CHANGELOG.json | 19 +++++++ packages/example-app-base/CHANGELOG.md | 9 +++- packages/example-app-base/package.json | 4 +- packages/experiments/CHANGELOG.json | 22 ++++++++ packages/experiments/CHANGELOG.md | 9 +++- packages/experiments/package.json | 6 +-- .../office-ui-fabric-react/CHANGELOG.json | 51 +++++++++++++++++++ packages/office-ui-fabric-react/CHANGELOG.md | 16 +++++- packages/office-ui-fabric-react/package.json | 6 +-- packages/styling/package.json | 2 +- packages/utilities/CHANGELOG.json | 14 +++++ packages/utilities/CHANGELOG.md | 9 +++- packages/utilities/package.json | 2 +- 27 files changed, 160 insertions(+), 118 deletions(-) delete mode 100644 common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json delete mode 100644 common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json delete mode 100644 common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json delete mode 100644 common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json delete mode 100644 common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json delete mode 100644 common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json delete mode 100644 common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json delete mode 100644 common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json delete mode 100644 common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json index 5aaca418d3c452..b00658987b463d 100644 --- a/apps/fabric-website/package.json +++ b/apps/fabric-website/package.json @@ -39,7 +39,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "color-functions": "1.1.0", "json-loader": "^0.5.7", - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 132a7e4f737885..2b81102ddfb7cd 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -21,7 +21,7 @@ "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", "mocha": "^3.3.0", - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "raw-loader": "^0.5.1", "react": "^16.3.1", "react-dom": "^16.3.1", diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json index fd69947fa82b9f..1b3273d1b72e93 100644 --- a/apps/test-bundle-button/package.json +++ b/apps/test-bundle-button/package.json @@ -25,7 +25,7 @@ "dependencies": { "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0", "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0", - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 11cdab4210adcf..3cd2f79f88d7d0 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -19,7 +19,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "^2.6.4", - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 7dd59db4cfeb7d..97cbe91ef42f0e 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,7 +28,7 @@ "storybook-readme": "=3.0.6" }, "dependencies": { - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "react": "^16.3.1", "react-dom": "^16.3.1", "typescript": "2.8.1", diff --git a/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json deleted file mode 100644 index 68607fc07cb606..00000000000000 --- a/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/example-app-base", - "comment": "Update createRef to match React.createRef api", - "type": "patch" - } - ], - "packageName": "@uifabric/example-app-base", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json deleted file mode 100644 index e0e1fbc4a68846..00000000000000 --- a/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Update createRef to match React.createRef api", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json deleted file mode 100644 index cd553107bd9383..00000000000000 --- a/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/utilities", - "comment": "Update createRef to match React.createRef api", - "type": "minor" - } - ], - "packageName": "@uifabric/utilities", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json b/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json deleted file mode 100644 index a456dd7fa268b3..00000000000000 --- a/common/changes/office-ui-fabric-react/IE11-NaN_2018-04-19-15-14.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "christianjordangonzalez@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json b/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json deleted file mode 100644 index 588dbbacc331ef..00000000000000 --- a/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Add the option of collapsing breadcrumb overflow items into a position other than the first one", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "samuelmtimbo@gmail.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json b/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json deleted file mode 100644 index 367179e263714a..00000000000000 --- a/common/changes/office-ui-fabric-react/chiechan-newComboboxCallback_2018-04-18-00-34.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes", - "type": "minor" - } - ], - "packageName": "office-ui-fabric-react", - "email": "chiechan@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json b/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json deleted file mode 100644 index fedd9a652ce568..00000000000000 --- a/common/changes/office-ui-fabric-react/cliffkoh-miscFix_2018-04-18-22-24.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix minor typos", - "type": "none" - } - ], - "packageName": "office-ui-fabric-react", - "email": "cliff.koh@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json deleted file mode 100644 index bd845f47dc3fa0..00000000000000 --- a/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Update createRef to match React.createRef api", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json b/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json deleted file mode 100644 index f9fc52aa1213a0..00000000000000 --- a/common/changes/office-ui-fabric-react/mapol-remove-unused-variables_2018-04-18-22-52.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "mark@thedutchies.com" -} \ No newline at end of file diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json index 275d0590abd7f1..f1f2075ad73ec6 100644 --- a/packages/example-app-base/CHANGELOG.json +++ b/packages/example-app-base/CHANGELOG.json @@ -1,6 +1,25 @@ { "name": "@uifabric/example-app-base", "entries": [ + { + "version": "5.10.2", + "tag": "@uifabric/example-app-base_v5.10.2", + "date": "Thu, 19 Apr 2018 18:25:59 GMT", + "comments": { + "patch": [ + { + "author": "Mark Polak ", + "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db", + "comment": "Update createRef to match React.createRef api" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`" + } + ] + } + }, { "version": "5.10.1", "tag": "@uifabric/example-app-base_v5.10.1", diff --git a/packages/example-app-base/CHANGELOG.md b/packages/example-app-base/CHANGELOG.md index 5baa14dd6a7075..a6a946b9d255e2 100644 --- a/packages/example-app-base/CHANGELOG.md +++ b/packages/example-app-base/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/example-app-base -This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified. + +## 5.10.2 +Thu, 19 Apr 2018 18:25:59 GMT + +### Patches + +- Update createRef to match React.createRef api ## 5.10.1 Wed, 18 Apr 2018 10:15:04 GMT diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json index 1996637a32b425..8f671f832c1d0e 100644 --- a/packages/example-app-base/package.json +++ b/packages/example-app-base/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/example-app-base", - "version": "5.10.1", + "version": "5.10.2", "description": "Office UI Fabric example app base utilities for building example sites.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -34,7 +34,7 @@ }, "dependencies": { "@uifabric/styling": ">=5.25.0 <6.0.0", - "@uifabric/utilities": ">=5.24.0 <6.0.0", + "@uifabric/utilities": ">=5.25.0 <6.0.0", "highlight.js": "^9.12.0", "markdown-to-jsx": "^6.6.0", "office-ui-fabric-react": ">=5.1.0 <6.0.0", diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json index fbf34f3916ef31..32a7a32045878d 100644 --- a/packages/experiments/CHANGELOG.json +++ b/packages/experiments/CHANGELOG.json @@ -1,6 +1,28 @@ { "name": "@uifabric/experiments", "entries": [ + { + "version": "5.31.4", + "tag": "@uifabric/experiments_v5.31.4", + "date": "Thu, 19 Apr 2018 18:25:59 GMT", + "comments": { + "patch": [ + { + "author": "Mark Polak ", + "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db", + "comment": "Update createRef to match React.createRef api" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.83.0 <6.0.0` to `>=5.84.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`" + } + ] + } + }, { "version": "5.31.3", "tag": "@uifabric/experiments_v5.31.3", diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md index add532a0a9490b..78d079c5d2ebbc 100644 --- a/packages/experiments/CHANGELOG.md +++ b/packages/experiments/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/experiments -This log was last generated on Wed, 18 Apr 2018 10:15:04 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified. + +## 5.31.4 +Thu, 19 Apr 2018 18:25:59 GMT + +### Patches + +- Update createRef to match React.createRef api ## 5.31.3 Wed, 18 Apr 2018 10:15:04 GMT diff --git a/packages/experiments/package.json b/packages/experiments/package.json index 789e174a023c15..edc02bed0560bd 100644 --- a/packages/experiments/package.json +++ b/packages/experiments/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/experiments", - "version": "5.31.3", + "version": "5.31.4", "description": "Experimental React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,7 +30,7 @@ "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", "@types/webpack-env": "1.13.0", - "@uifabric/example-app-base": ">=5.10.1 <6.0.0", + "@uifabric/example-app-base": ">=5.10.2 <6.0.0", "@uifabric/file-type-icons": ">=0.6.1 <1.0.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", "es6-weak-map": "^2.0.2", @@ -45,7 +45,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "office-ui-fabric-react": ">=5.83.0 <6.0.0", + "office-ui-fabric-react": ">=5.84.0 <6.0.0", "@uifabric/icons": ">=5.7.1 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json index 43ce3d5e19ee0a..098d9411892d99 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.json +++ b/packages/office-ui-fabric-react/CHANGELOG.json @@ -1,6 +1,57 @@ { "name": "office-ui-fabric-react", "entries": [ + { + "version": "5.84.0", + "tag": "office-ui-fabric-react_v5.84.0", + "date": "Thu, 19 Apr 2018 18:25:59 GMT", + "comments": { + "minor": [ + { + "author": "Samuel Timbó ", + "commit": "775e1f5a6a2478d6223e405e2b18082c183adf36", + "comment": "Add the option of collapsing breadcrumb overflow items into a position other than the first one" + }, + { + "author": "Josh Chang ", + "commit": "02b098f9465226896abe323304d9ae379a947d91", + "comment": "ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes" + } + ], + "none": [ + { + "author": "Cliff Koh ", + "commit": "6c70a9e55408212d258d41269af4daf50abffca4", + "comment": "Fix minor typos" + } + ], + "patch": [ + { + "author": "Christian Gonzalez ", + "commit": "c86fc5bd6fe2385309833fd746a7a46dd3b0f8bb", + "comment": "Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11" + }, + { + "author": "Mark Polak ", + "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db", + "comment": "Update createRef to match React.createRef api" + }, + { + "author": "Mark Polak ", + "commit": "5954ea49f9c4e059868a57a6b597068ef905108a", + "comment": "Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react" + } + ], + "dependency": [ + { + "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`" + }, + { + "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`" + } + ] + } + }, { "version": "5.83.0", "tag": "office-ui-fabric-react_v5.83.0", diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md index f462e69384a4e6..bbb3f7f27e99fe 100644 --- a/packages/office-ui-fabric-react/CHANGELOG.md +++ b/packages/office-ui-fabric-react/CHANGELOG.md @@ -1,6 +1,20 @@ # Change Log - office-ui-fabric-react -This log was last generated on Thu, 19 Apr 2018 00:17:37 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified. + +## 5.84.0 +Thu, 19 Apr 2018 18:25:59 GMT + +### Minor changes + +- Add the option of collapsing breadcrumb overflow items into a position other than the first one +- ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes + +### Patches + +- Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11 +- Update createRef to match React.createRef api +- Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react ## 5.83.0 Thu, 19 Apr 2018 00:17:37 GMT diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 3dfe4ea02174f4..2e79f78f3ac22f 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "5.83.0", + "version": "5.84.0", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", @@ -30,7 +30,7 @@ "@types/sinon": "2.2.2", "@types/webpack-env": "1.13.0", "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0", - "@uifabric/example-app-base": ">=5.10.1 <6.0.0", + "@uifabric/example-app-base": ">=5.10.2 <6.0.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.1.0", "es6-promise": "^4.1.0", @@ -51,7 +51,7 @@ "@uifabric/icons": ">=5.7.1 <6.0.0", "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "@uifabric/styling": ">=5.25.0 <6.0.0", - "@uifabric/utilities": ">=5.24.0 <6.0.0", + "@uifabric/utilities": ">=5.25.0 <6.0.0", "prop-types": "^15.5.10", "tslib": "^1.7.1" }, diff --git a/packages/styling/package.json b/packages/styling/package.json index cd07affe04bf28..a0bee1db13a510 100644 --- a/packages/styling/package.json +++ b/packages/styling/package.json @@ -29,7 +29,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.7.13", - "@uifabric/utilities": ">=5.24.0 <6.0.0", + "@uifabric/utilities": ">=5.25.0 <6.0.0", "@uifabric/merge-styles": ">=5.15.2 <6.0.0", "tslib": "^1.7.1" } diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json index bc1dfc8893ed2c..6bc84558fe2871 100644 --- a/packages/utilities/CHANGELOG.json +++ b/packages/utilities/CHANGELOG.json @@ -1,6 +1,20 @@ { "name": "@uifabric/utilities", "entries": [ + { + "version": "5.25.0", + "tag": "@uifabric/utilities_v5.25.0", + "date": "Thu, 19 Apr 2018 18:25:59 GMT", + "comments": { + "minor": [ + { + "author": "Mark Polak ", + "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db", + "comment": "Update createRef to match React.createRef api" + } + ] + } + }, { "version": "5.24.0", "tag": "@uifabric/utilities_v5.24.0", diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index b95669b1de5974..c27bca3c41b4d1 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,6 +1,13 @@ # Change Log - @uifabric/utilities -This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified. +This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified. + +## 5.25.0 +Thu, 19 Apr 2018 18:25:59 GMT + +### Minor changes + +- Update createRef to match React.createRef api ## 5.24.0 Mon, 16 Apr 2018 10:23:26 GMT diff --git a/packages/utilities/package.json b/packages/utilities/package.json index cb5c148286396d..a1ef8f6c6935d2 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@uifabric/utilities", - "version": "5.24.0", + "version": "5.25.0", "description": "Office UI Fabric utilities for building React components.", "main": "lib/index.js", "typings": "lib-es2015/index.d.ts", From bd2e7b195acadb05c7a98381017df4b1bee4df09 Mon Sep 17 00:00:00 2001 From: Lambert Wang Date: Thu, 19 Apr 2018 15:36:20 -0700 Subject: [PATCH 39/86] [TextField] Implemented masking (#3783) * TextField: Implemented masking * Changed example * Change file * Moved functions to util. Added tests * Added selection deletion tests * Refactored textfield into separate components * Deleted base and default textfields * Revert additional changes * Fixed refs * Update magellan-textFieldMasking_2018-01-24-01-35.json * Added enzyme and snapshot tests for the component * Fixed typo * Added character overflow test * Undo changes to textfield * Fixed linting error * Update TextField.Basic.Example.tsx * Added comments to inputMask.ts * Removed trailing whitespace * Fix build errors for Lambert * Update jest snapshot * Fix build errors --- ...lan-textFieldMasking_2018-01-24-01-35.json | 11 + .../examples/LayoutGroup.Basic.Example.tsx | 11 +- .../MaskedTextField/MaskedTextField.test.tsx | 333 ++++++++++++++ .../MaskedTextField/MaskedTextField.tsx | 406 ++++++++++++++++++ .../MaskedTextField.test.tsx.snap | 56 +++ .../components/TextField/TextField.types.ts | 26 ++ .../examples/TextField.Basic.Example.tsx | 11 +- .../src/components/TextField/index.ts | 1 + packages/utilities/src/inputMask.test.ts | 160 +++++++ packages/utilities/src/inputMask.ts | 247 +++++++++++ 10 files changed, 1258 insertions(+), 4 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/magellan-textFieldMasking_2018-01-24-01-35.json create mode 100644 packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx create mode 100644 packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx create mode 100644 packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap create mode 100644 packages/utilities/src/inputMask.test.ts create mode 100644 packages/utilities/src/inputMask.ts diff --git a/common/changes/office-ui-fabric-react/magellan-textFieldMasking_2018-01-24-01-35.json b/common/changes/office-ui-fabric-react/magellan-textFieldMasking_2018-01-24-01-35.json new file mode 100644 index 00000000000000..7b96f54ae05dbd --- /dev/null +++ b/common/changes/office-ui-fabric-react/magellan-textFieldMasking_2018-01-24-01-35.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "TextField: Implemented input masking.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "law@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx b/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx index af2f78150fb4ff..4491a37d6b0adb 100644 --- a/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx +++ b/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx @@ -37,8 +37,15 @@ export class LayoutGroupBasicExample extends React.Component<{}, {}> { } /> - - + + diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx new file mode 100644 index 00000000000000..57569386ee6cd1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx @@ -0,0 +1,333 @@ +import * as React from 'react'; +import * as ReactTestUtils from 'react-dom/test-utils'; +import * as renderer from 'react-test-renderer'; +import { mount } from 'enzyme'; +import { + KeyCodes +} from '../../../Utilities'; + +import { MaskedTextField } from './MaskedTextField'; + +describe('MaskedTextField', () => { + function mockEvent(targetValue: string = ''): ReactTestUtils.SyntheticEventData { + const target: EventTarget = { value: targetValue } as HTMLInputElement; + const event: ReactTestUtils.SyntheticEventData = { target }; + + return event; + } + + it('renders TextField correctly', () => { + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('Moves caret on focus', () => { + const component = mount( + + ); + + const input = component.find('input'); + input.simulate('focus'); + expect((input.getDOMNode() as HTMLInputElement).selectionStart).toEqual(7); + }); + + it('can change single character', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate pressing the '1' key + input.simulate('keyDown', { keyCode: KeyCodes.one }); + inputDOM.setSelectionRange(8, 8); + input.simulate('change', mockEvent('mask: (1___) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (1__) ___ - ____'); + + // Simulate pressing the '2' key + input.simulate('keyDown', { keyCode: KeyCodes.two }); + inputDOM.setSelectionRange(9, 9); + input.simulate('change', mockEvent('mask: (12__) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (12_) ___ - ____'); + }); + + it('can replace single character', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate pressing the '1' key + input.simulate('keyDown', { keyCode: KeyCodes.one }); + inputDOM.setSelectionRange(8, 8); + input.simulate('change', mockEvent('mask: (1___) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (1__) ___ - ____'); + + // Replacing a character + input.simulate('keyDown', { keyCode: KeyCodes.two }); + inputDOM.setSelectionRange(8, 8); + input.simulate('change', mockEvent('mask: (21__) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (2__) ___ - ____'); + }); + + it('should ignore incorrect format characters', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate pressing the '1' key + input.simulate('keyDown', { keyCode: KeyCodes.one }); + inputDOM.setSelectionRange(8, 8); + input.simulate('change', mockEvent('mask: (1___) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (1__) ___ - ____'); + + // Simulate pressing the 'a' key + input.simulate('keyDown', { keyCode: KeyCodes.a }); + inputDOM.setSelectionRange(9, 9); + input.simulate('change', mockEvent('mask: (1a__) ___ - ____')); + expect(inputDOM.value).toEqual('mask: (1__) ___ - ____'); + }); + + it('should backspace', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate backspacing the '2' + inputDOM.setSelectionRange(9, 9); + input.simulate('keyDown', { keyCode: KeyCodes.backspace }); + input.simulate('change', mockEvent('mask: (13) 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (1_3) 456 - 7890'); + }); + + it('should delete', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate deleting the '3' + inputDOM.setSelectionRange(9, 9); + input.simulate('keyDown', { keyCode: KeyCodes.del }); + input.simulate('change', mockEvent('mask: (12) 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (12_) 456 - 7890'); + }); + + it('should ctrl backspace', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate backspacing the '123' + inputDOM.setSelectionRange(10, 10); + input.simulate('keyDown', { keyCode: KeyCodes.backspace, ctrlKey: true }); + inputDOM.setSelectionRange(7, 7); + input.simulate('change', mockEvent('mask: () 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (___) 456 - 7890'); + }); + + it('should ctrl delete', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate deleting the '123' + inputDOM.setSelectionRange(7, 7); + input.simulate('keyDown', { keyCode: KeyCodes.del, ctrlKey: true }); + input.simulate('change', mockEvent('mask: () 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (___) 456 - 7890'); + }); + + it('should backspace and delete selections', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Simulate selecting and backspacing the '123' + // Also select the preceding '(' + inputDOM.setSelectionRange(6, 10); + input.simulate('keyDown', { keyCode: KeyCodes.backspace }); + input.simulate('change', mockEvent('mask: 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (___) 456 - 7890'); + + // Simulate selecting and deleting the '456' + // also select the proceding ' ' + inputDOM.setSelectionRange(12, 16); + input.simulate('keyDown', { keyCode: KeyCodes.del }); + input.simulate('change', mockEvent('mask: (___) - 7890')); + expect(inputDOM.value).toEqual('mask: (___) ___ - 7890'); + }); + + it('should paste characters', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Paste a 7777 into the start of the input + inputDOM.setSelectionRange(0, 0); + input.simulate('paste'); + input.simulate('change', mockEvent('7777mask: (123) 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (777) 756 - 7890'); + + // Paste a 9999 into the end + inputDOM.setSelectionRange(22, 22); + input.simulate('paste'); + input.simulate('change', mockEvent('mask: (777) 756 - 78909999')); + expect(inputDOM.value).toEqual('mask: (777) 756 - 7890'); + + // Paste invalid characters mixed with valid characters + inputDOM.setSelectionRange(0, 0); + input.simulate('paste'); + input.simulate('change', mockEvent('1a2b3cmask: (777) 756 - 7890')); + expect(inputDOM.value).toEqual('mask: (123) 756 - 7890'); + }); + + it('should paste over selected characters', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Paste a 000 over the '123' + inputDOM.setSelectionRange(7, 10); + input.simulate('paste'); + input.simulate('change', mockEvent('mask: (000) 456 - 7890')); + expect(inputDOM.value).toEqual('mask: (000) 456 - 7890'); + + // Replace all characters with a paste + inputDOM.setSelectionRange(0, 22); + input.simulate('paste'); + input.simulate('change', mockEvent('98765')); + expect(inputDOM.value).toEqual('mask: (987) 65_ - ____'); + }); + + it('should replace selected text a char added', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Replace '23) 45' text with '6' + inputDOM.setSelectionRange(8, 14); + input.simulate('keyDown', { keyCode: KeyCodes.six }); + inputDOM.setSelectionRange(9, 9); + input.simulate('change', mockEvent('mask: (166 - 7890')); + expect(inputDOM.value).toEqual('mask: (16_) __6 - 7890'); + + // Replace all text with '9' + inputDOM.setSelectionRange(0, 22); + input.simulate('keyDown', { keyCode: KeyCodes.nine }); + inputDOM.setSelectionRange(1, 1); + input.simulate('change', mockEvent('9')); + expect(inputDOM.value).toEqual('mask: (9__) ___ - ____'); + }); + + it('should ignore overflowed characters', () => { + const component = mount( + + ); + + const input = component.find('input'), + inputDOM = input.getDOMNode() as HTMLInputElement; + input.simulate('focus'); + + // Add '1' to the end + inputDOM.setSelectionRange(22, 22); + input.simulate('keyDown', { keyCode: KeyCodes.one }); + inputDOM.setSelectionRange(23, 23); + input.simulate('change', mockEvent('mask: (123) 456 - 78901')); + expect(inputDOM.value).toEqual('mask: (123) 456 - 7890'); + }); +}); diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx new file mode 100644 index 00000000000000..82f9161ea475de --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx @@ -0,0 +1,406 @@ +import * as React from 'react'; +import { TextField } from '../TextField'; +import { + ITextField, + ITextFieldProps +} from '../TextField.types'; +import { + autobind, + BaseComponent, + KeyCodes, +} from '../../../Utilities'; + +import { + clearNext, + clearPrev, + clearRange, + DEFAULT_MASK_FORMAT_CHARS, + getLeftFormatIndex, + getMaskDisplay, + getRightFormatIndex, + IMaskValue, + insertString, + parseMask +} from '@uifabric/utilities/lib/inputMask'; + +/** + * props.mask: + * The string containing the prompt and format characters. + * Example: + * 'Phone Number: (999) 9999' + * + * _maskCharData + * An array of data containing information regarding the format characters, + * their indices inside the display text, and their corresponding values. + * Example: + * [ + * { value: '1', displayIndex: 16, format: /[0-9]/ }, + * { value: '2', displayIndex: 17, format: /[0-9]/ }, + * { displayIndex: 18, format: /[0-9]/ }, + * { value: '4', displayIndex: 22, format: /[0-9]/ }, + * ... + * ] + */ +export interface IMaskedTextFieldState { + /** + * The mask string formatted with the input value. + * This is what is displayed inside the TextField + * Example: + * 'Phone Number: 12_ - 4___' + */ + displayValue: string; + /** The index into the rendered value of the first unfilled format character */ + maskCursorPosition?: number; +} + +export const DEFAULT_MASK_CHAR = '_'; + +enum inputChangeType { + default, + backspace, + delete, + textPasted +} + +export class MaskedTextField extends BaseComponent implements ITextField { + public static defaultProps: ITextFieldProps = { + maskChar: DEFAULT_MASK_CHAR, + maskFormat: DEFAULT_MASK_FORMAT_CHARS, + }; + /** + * Tell BaseComponent to bypass resolution of componentRef. + */ + protected _shouldUpdateComponentRef = false; + + private _textField: ITextField; + private _maskCharData: IMaskValue[]; + // True if the TextField is focused + private _isFocused: boolean; + // True if the TextField was not focused and it was clicked into + private _moveCursorOnMouseUp: boolean; + + // The stored selection data prior to input change events. + private _changeSelectionData: { + changeType: inputChangeType + selectionStart: number, + selectionEnd: number + } | null; + + constructor(props: ITextFieldProps) { + super(props); + + // Translate mask into charData + this._maskCharData = parseMask(props.mask, props.maskFormat); + // If an initial value is provided, use it to populate the format chars + props.value && this.setValue(props.value); + + this._isFocused = false; + this._moveCursorOnMouseUp = false; + + this.state = { + displayValue: getMaskDisplay( + props.mask, + this._maskCharData, + props.maskChar), + }; + } + + public componentWillReceiveProps(newProps: ITextFieldProps) { + if (newProps.mask !== this.props.mask) { + this._maskCharData = parseMask(newProps.mask, newProps.maskFormat); + this.state = { + displayValue: getMaskDisplay( + newProps.mask, + this._maskCharData, + newProps.maskChar), + }; + } + } + + public componentDidUpdate() { + // Move the cursor to the start of the mask format on update + if (this.state.maskCursorPosition) { + this._textField.setSelectionRange(this.state.maskCursorPosition, this.state.maskCursorPosition); + } + } + + public render() { + return ( + + ); + } + + /** + * @return The value of all filled format characters or undefined if not all format characters are filled + */ + public get value(): string | undefined { + let value = ''; + + for (let i = 0; i < this._maskCharData.length; i++) { + if (!this._maskCharData[i].value) { + return undefined; + } + value += this._maskCharData[i].value; + } + return value; + } + + /** + * + */ + public setValue(newValue: string): void { + let valueIndex = 0, + charDataIndex = 0; + + while (valueIndex < newValue.length && + charDataIndex < this._maskCharData.length) { + // Test if the next character in the new value fits the next format character + const testVal = newValue[valueIndex]; + if (this._maskCharData[charDataIndex].format.test(testVal)) { + this._maskCharData[charDataIndex].value = testVal; + charDataIndex++; + } + valueIndex++; + } + } + + public focus(): void { + this._textField && this._textField.focus(); + } + + public select(): void { + this._textField && this._textField.select(); + } + + public setSelectionStart(value: number): void { + this._textField && this._textField.setSelectionStart(value); + } + + public setSelectionEnd(value: number): void { + this._textField && this._textField.setSelectionEnd(value); + } + + public setSelectionRange(start: number, end: number): void { + this._textField && this._textField.setSelectionRange(start, end); + } + + public get selectionStart(): number | null { + return this._textField && this._textField.selectionStart !== null ? this._textField.selectionStart : -1; + } + + public get selectionEnd(): number | null { + return this._textField && this._textField.selectionEnd ? this._textField.selectionEnd : -1; + } + + @autobind + private _onFocus(event: React.FocusEvent) { + const { + onFocus + } = this.props; + + if (onFocus) { + onFocus(event); + } + + this._isFocused = true; + + // Move the cursor position to the rightmost unfilled position + for (let i = 0; i < this._maskCharData.length; i++) { + if (!this._maskCharData[i].value) { + this.setState({ + maskCursorPosition: this._maskCharData[i].displayIndex + }); + break; + } + } + } + + @autobind + private _onBlur(event: React.FocusEvent) { + const { + onBlur + } = this.props; + + if (onBlur) { + onBlur(event); + } + + this._isFocused = false; + this._moveCursorOnMouseUp = true; + } + + @autobind + private _onMouseDown(event: React.MouseEvent) { + if (!this._isFocused) { + this._moveCursorOnMouseUp = true; + } + } + + @autobind + private _onMouseUp(event: React.MouseEvent) { + // Move the cursor on mouseUp after focusing the textField + if (this._moveCursorOnMouseUp) { + this._moveCursorOnMouseUp = false; + // Move the cursor position to the rightmost unfilled position + for (let i = 0; i < this._maskCharData.length; i++) { + if (!this._maskCharData[i].value) { + this.setState({ + maskCursorPosition: this._maskCharData[i].displayIndex + }); + break; + } + } + } + } + + @autobind + private _onBeforeChange(value: String) { + if (this._changeSelectionData === null) { + this._changeSelectionData = { + changeType: inputChangeType.default, + selectionStart: this._textField.selectionStart !== null ? this._textField.selectionStart : -1, + selectionEnd: this._textField.selectionEnd !== null ? this._textField.selectionEnd : -1 + }; + } + } + + @autobind + private _onInputChange(value: string) { + if (!this._changeSelectionData) { + return; + } + + const { displayValue } = this.state; + + // The initial value of cursorPos does not matter + let cursorPos = 0; + const { + changeType, + selectionStart, + selectionEnd + } = this._changeSelectionData; + + if (changeType === inputChangeType.textPasted) { + const charsSelected = selectionEnd - selectionStart, + charCount = value.length + charsSelected - displayValue.length, + startPos = selectionStart, + pastedString = value.substr(startPos, charCount); + + // Clear any selected characters + if (charsSelected) { + this._maskCharData = clearRange(this._maskCharData, selectionStart, charsSelected); + } + cursorPos = insertString(this._maskCharData, startPos, pastedString); + } else if (changeType === inputChangeType.delete || + changeType === inputChangeType.backspace) { + // isDel is true If the characters are removed LTR, otherwise RTL + const isDel = changeType === inputChangeType.delete, + charCount = selectionEnd - selectionStart; + + if (charCount) { // charCount is > 0 if range was deleted + this._maskCharData = clearRange(this._maskCharData, selectionStart, charCount); + cursorPos = getRightFormatIndex(this._maskCharData, selectionStart); + } else { // If charCount === 0, there was no selection and a single character was deleted + if (isDel) { + this._maskCharData = clearNext(this._maskCharData, selectionStart); + cursorPos = getRightFormatIndex(this._maskCharData, selectionStart); + } else { + this._maskCharData = clearPrev(this._maskCharData, selectionStart); + cursorPos = getLeftFormatIndex(this._maskCharData, selectionStart); + } + } + } else if (value.length > displayValue.length) { + // This case is if the user added characters + const charCount = value.length - displayValue.length, + startPos = selectionEnd - charCount, + enteredString = value.substr(startPos, charCount); + + cursorPos = insertString(this._maskCharData, startPos, enteredString); + } else if (value.length <= displayValue.length) { + /** + * This case is reached only if the user has selected a block of 1 or more + * characters and input a character replacing the characters they've selected. + */ + const charCount = 1, + selectCount = displayValue.length + charCount - value.length, + startPos = selectionEnd - charCount, + enteredString = value.substr(startPos, charCount); + + // Clear the selected range + this._maskCharData = clearRange(this._maskCharData, startPos, selectCount); + // Insert the printed character + cursorPos = insertString(this._maskCharData, startPos, enteredString); + } + + this._changeSelectionData = null; + + this.setState({ + displayValue: getMaskDisplay( + this.props.mask, + this._maskCharData, + this.props.maskChar), + maskCursorPosition: cursorPos + }); + } + + @autobind + private _onKeyDown(event: React.KeyboardEvent) { + this._changeSelectionData = null; + if (this._textField.value) { + const { + keyCode, + ctrlKey, + metaKey + } = event; + + // Ignore ctrl and meta keydown + if (ctrlKey || metaKey) { + return; + } + + // On backspace or delete, store the selection and the keyCode + if (keyCode === KeyCodes.backspace || keyCode === KeyCodes.del) { + const selectionStart = (event.target as HTMLInputElement).selectionStart, + selectionEnd = (event.target as HTMLInputElement).selectionEnd; + + // Check if backspace or delete press is valid. + if (!(keyCode === KeyCodes.backspace && selectionEnd && selectionEnd > 0) + && !(keyCode === KeyCodes.del && selectionStart !== null && selectionStart < this._textField.value.length)) { + return; + } + + this._changeSelectionData = { + changeType: keyCode === KeyCodes.backspace ? + inputChangeType.backspace : + inputChangeType.delete, + selectionStart: selectionStart !== null ? selectionStart : -1, + selectionEnd: selectionEnd !== null ? selectionEnd : -1 + }; + } + } + } + + @autobind + private _onPaste(event: React.ClipboardEvent) { + const selectionStart = (event.target as HTMLInputElement).selectionStart, + selectionEnd = (event.target as HTMLInputElement).selectionEnd; + // Store the paste selection range + this._changeSelectionData = { + changeType: inputChangeType.textPasted, + selectionStart: selectionStart !== null ? selectionStart : -1, + selectionEnd: selectionEnd !== null ? selectionEnd : -1 + }; + } +} diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap new file mode 100644 index 00000000000000..7eb59c12207525 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MaskedTextField renders TextField correctly 1`] = ` +
    +
    + +
    + +
    +
    +
    +`; diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts index 41d6d0bf120031..2e88a28cb8a740 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts @@ -228,6 +228,32 @@ export interface ITextFieldProps extends React.AllHTMLAttributes { @@ -21,7 +24,11 @@ export class TextFieldBasicExample extends React.Component { label='With error message' errorMessage='Error message' /> +
    ); } -} \ No newline at end of file +} diff --git a/packages/office-ui-fabric-react/src/components/TextField/index.ts b/packages/office-ui-fabric-react/src/components/TextField/index.ts index 4ec96447ffa23b..20b2d0efda0b01 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/index.ts +++ b/packages/office-ui-fabric-react/src/components/TextField/index.ts @@ -1,2 +1,3 @@ export * from './TextField'; export * from './TextField.types'; +export * from './MaskedTextField/MaskedTextField'; diff --git a/packages/utilities/src/inputMask.test.ts b/packages/utilities/src/inputMask.test.ts new file mode 100644 index 00000000000000..48ec8fcfe6b6ec --- /dev/null +++ b/packages/utilities/src/inputMask.test.ts @@ -0,0 +1,160 @@ +import { + clearNext, + clearPrev, + clearRange, + getLeftFormatIndex, + getMaskDisplay, + getRightFormatIndex, + IMaskValue, + insertString, + parseMask +} from './inputMask'; + +const inputMask = 'Phone number m\\ask: (999) 999 - 9999'; + +const values: IMaskValue[] = [ + { value: '1', format: /[0-9]/, displayIndex: 20 }, + { value: '2', format: /[0-9]/, displayIndex: 21 }, + { value: '3', format: /[0-9]/, displayIndex: 22 }, + { value: '4', format: /[0-9]/, displayIndex: 25 }, + { value: '5', format: /[0-9]/, displayIndex: 26 }, + { value: undefined, format: /[0-9]/, displayIndex: 27 }, + { value: undefined, format: /[0-9]/, displayIndex: 31 }, + { value: undefined, format: /[0-9]/, displayIndex: 32 }, + { value: undefined, format: /[0-9]/, displayIndex: 33 }, + { value: undefined, format: /[0-9]/, displayIndex: 34 }, +]; + +function resetValues(charData: IMaskValue[], maxIndex: number = Infinity): void { + for (let i = 0; i < charData.length; i++) { + if (i < maxIndex) { + charData[i].value = (i + 1).toString()[0]; + } else { + charData[i].value = undefined; + } + } +} + +describe('inputMask', () => { + it('parses mask sucessfully', () => { + let result = parseMask(inputMask); + expect(result.length).toEqual(values.length); + + for (let i = 0; i < values.length; i++) { + expect(result[i].displayIndex).toEqual(values[i].displayIndex); + } + }); + + it('parsing ignores escaped format characters', () => { + let result = parseMask('Esc\\aped some ch\\ar\\acters: (999) 999 - 9999 \\*'); + expect(result.length).toEqual(values.length); + }); + + it('generates displayedMask', () => { + resetValues(values, 5); + let result = getMaskDisplay(inputMask, values, '_'); + expect(result).toEqual('Phone number mask: (123) 45_ - ____'); + + result = getMaskDisplay(inputMask, values); + expect(result).toEqual('Phone number mask: (123) 45'); + + resetValues(values, 0); + result = getMaskDisplay(inputMask, values); + expect(result).toEqual('Phone number mask: ('); + }); + + it('generated displayedMask doesn\'t render escape codes', () => { + const maskString = 'Esc\\aped Ch\\ar\\acters: (999) 999 - 9999'; + const maskValues = parseMask(maskString); + + resetValues(maskValues, 5); + + let result = getMaskDisplay(maskString, maskValues, '_'); + expect(result).toEqual('Escaped Characters: (123) 45_ - ____'); + + result = getMaskDisplay(maskString, maskValues); + expect(result).toEqual('Escaped Characters: (123) 45'); + }); + + it('clearNext works as intended', () => { + resetValues(values, 5); + let result = clearNext(values, 20); + expect(result[0].value).toBeUndefined(); + + resetValues(values, 5); + result = clearNext(values, 22); + expect(result[2].value).toBeUndefined(); + + resetValues(values, 5); + result = clearNext(values, 23); + expect(result[3].value).toBeUndefined(); + expect(result[2].value).toBeDefined(); + }); + + it('clearPrev works as intended', () => { + resetValues(values, 5); + let result = clearPrev(values, 25); + expect(result[2].value).toBeUndefined(); + + resetValues(values, 5); + result = clearPrev(values, 21); + expect(result[0].value).toBeUndefined(); + + resetValues(values, 5); + result = clearPrev(values, 20); + expect(result[0].value).toBeDefined(); + }); + + it('clearRange works as intended', () => { + resetValues(values, 5); + let result = clearRange(values, 23, 5); + expect(result[2].value).toBeDefined(); + expect(result[3].value).toBeUndefined(); + expect(result[4].value).toBeUndefined(); + + resetValues(values, 5); + result = clearRange(values, 22, 5); + expect(result[2].value).toBeUndefined(); + expect(result[3].value).toBeUndefined(); + expect(result[4].value).toBeUndefined(); + }); + + it('getLeftFormatIndex works as intended', () => { + resetValues(values, 5); + let result = getLeftFormatIndex(values, 23); + expect(result).toEqual(22); + + resetValues(values, 5); + result = getLeftFormatIndex(values, 22); + expect(result).toEqual(21); + + resetValues(values, 5); + result = getLeftFormatIndex(values, 25); + expect(result).toEqual(22); + }); + + it('getRightFormatIndex works as intended', () => { + resetValues(values, 5); + let result = getRightFormatIndex(values, 23); + expect(result).toEqual(25); + + resetValues(values, 5); + result = getRightFormatIndex(values, 22); + expect(result).toEqual(22); + + resetValues(values, 5); + result = getRightFormatIndex(values, 25); + expect(result).toEqual(25); + }); + + it('insertString works as intended', () => { + resetValues(values, 5); + let result = insertString(values, 23, '89asdf0asdf98'); + expect(values[3].value).toEqual('8'); + expect(values[4].value).toEqual('9'); + expect(values[5].value).toEqual('0'); + expect(values[6].value).toEqual('9'); + expect(values[7].value).toEqual('8'); + expect(result).toEqual(33); + }); +}); diff --git a/packages/utilities/src/inputMask.ts b/packages/utilities/src/inputMask.ts new file mode 100644 index 00000000000000..ab108e411ee035 --- /dev/null +++ b/packages/utilities/src/inputMask.ts @@ -0,0 +1,247 @@ +export interface IMaskValue { + value?: string; + /** + * This index refers to the index in the displayMask rather than the inputMask. + * This means that any escaped characters do not count toward this index. + */ + displayIndex: number; + format: RegExp; +} + +export const DEFAULT_MASK_FORMAT_CHARS: { [key: string]: RegExp } = { + '9': /[0-9]/, + 'a': /[a-zA-Z]/, + '*': /[a-zA-Z0-9]/ +}; + +/** + * Takes in the mask string and the formatCharacters and returns an array of MaskValues + * Example: + * mask = 'Phone Number: (999) - 9999' + * return = [ + * { value: undefined, displayIndex: 16, format: /[0-9]/ }, + * { value: undefined, displayIndex: 17, format: /[0-9]/ }, + * { value: undefined, displayIndex: 18, format: /[0-9]/ }, + * { value: undefined, displayIndex: 22, format: /[0-9]/ }, + * ] + * + * @param mask The string use to define the format of the displayed maskedValue. + * @param formatChars An object defining how certain characters in the mask should accept input. + */ +export function parseMask( + mask: string | undefined, + formatChars: { [key: string]: RegExp } = DEFAULT_MASK_FORMAT_CHARS): IMaskValue[] { + if (!mask) { + return []; + } + + let maskCharData: IMaskValue[] = []; + // Count the escape characters in the mask string. + let escapedChars = 0; + for (let i = 0; i + escapedChars < mask.length; i++) { + const maskChar = mask.charAt(i + escapedChars); + if (maskChar === '\\') { + escapedChars++; + } else { + // Check if the maskChar is a format character. + const maskFormat = formatChars[maskChar]; + if (maskFormat) { + maskCharData.push({ + /** + * Do not add escapedChars to the displayIndex. + * The index refers to a position in the mask's displayValue. + * Since the backslashes don't appear in the displayValue, + * we do not add them to the charData displayIndex. + */ + displayIndex: i, + format: maskFormat + }); + } + } + } + + return maskCharData; +} + +/** + * Takes in the mask string, an array of MaskValues, and the maskCharacter + * returns the mask string formatted with the input values and maskCharacter. + * If the maskChar is undefined, the maskDisplay is truncated to the last filled format character. + * Example: + * mask = 'Phone Number: (999) 999 - 9999' + * maskCharData = '12345' + * maskChar = '_' + * return = 'Phone Number: (123) 45_ - ___' + * + * Example: + * mask = 'Phone Number: (999) 999 - 9999' + * value = '12345' + * maskChar = undefined + * return = 'Phone Number: (123) 45' + * + * @param mask The string use to define the format of the displayed maskedValue. + * @param maskCharData The input values to insert into the mask string for displaying. + * @param maskChar? A character to display in place of unfilled mask format characters. + */ +export function getMaskDisplay(mask: string | undefined, maskCharData: IMaskValue[], maskChar?: string): string { + let maskDisplay = mask; + + if (!maskDisplay) { + return ''; + } + + // Remove all backslashes + maskDisplay = maskDisplay.replace(/\\/g, ''); + + // lastDisplayIndex is is used to truncate the string if necessary. + let lastDisplayIndex = 0; + if (maskCharData.length > 0) { + lastDisplayIndex = maskCharData[0].displayIndex - 1; + } + + /** + * For each input value, replace the character in the maskDisplay with the value. + * If there is no value set for the format character, use the maskChar. + */ + for (let charData of maskCharData) { + let nextChar = ' '; + if (charData.value) { + nextChar = charData.value; + if (charData.displayIndex > lastDisplayIndex) { + lastDisplayIndex = charData.displayIndex; + } + } else { + if (maskChar) { + nextChar = maskChar; + } + } + + // Insert the character into the maskdisplay at its corresponding index + maskDisplay = maskDisplay.slice(0, charData.displayIndex) + nextChar + + maskDisplay.slice(charData.displayIndex + 1); + } + + // Cut off all mask characters after the last filled format value + if (!maskChar) { + maskDisplay = maskDisplay.slice(0, lastDisplayIndex + 1); + } + + return maskDisplay; +} + +/** + * Get the next format index right of or at a specified index. + * If no index exists, returns the rightmost index. + * @param maskCharData + * @param index + */ +export function getRightFormatIndex(maskCharData: IMaskValue[], index: number): number { + for (let i = 0; i < maskCharData.length; i++) { + if (maskCharData[i].displayIndex >= index) { + return maskCharData[i].displayIndex; + } + } + return maskCharData[maskCharData.length - 1].displayIndex; +} + +/** + * Get the next format index left of a specified index. + * If no index exists, returns the leftmost index. + * @param maskCharData + * @param index + */ +export function getLeftFormatIndex(maskCharData: IMaskValue[], index: number): number { + for (let i = maskCharData.length - 1; i >= 0; i--) { + if (maskCharData[i].displayIndex < index) { + return maskCharData[i].displayIndex; + } + } + return maskCharData[0].displayIndex; +} + +/** + * Deletes all values in maskCharData with a displayIndex that falls inside the specified range. + * maskCharData is modified inline and also returned. + * @param maskCharData + * @param selectionStart + * @param selectionCount + */ +export function clearRange(maskCharData: IMaskValue[], selectionStart: number, selectionCount: number): IMaskValue[] { + for (let i = 0; i < maskCharData.length; i++) { + if (maskCharData[i].displayIndex >= selectionStart) { + if (maskCharData[i].displayIndex >= selectionStart + selectionCount) { + break; + } + maskCharData[i].value = undefined; + } + } + return maskCharData; +} + +/** + * Deletes the input character at or after a specified index and returns the new array of charData + * maskCharData is modified inline and also returned. + * @param maskCharData + * @param selectionStart + */ +export function clearNext(maskCharData: IMaskValue[], selectionStart: number): IMaskValue[] { + for (let i = 0; i < maskCharData.length; i++) { + if (maskCharData[i].displayIndex >= selectionStart) { + maskCharData[i].value = undefined; + break; + } + } + return maskCharData; +} + +/** + * Deletes the input character before a specified index and returns the new array of charData + * maskCharData is modified inline and also returned. + * @param maskCharData + * @param selectionStart + */ +export function clearPrev(maskCharData: IMaskValue[], selectionStart: number): IMaskValue[] { + for (let i = maskCharData.length - 1; i >= 0; i--) { + if (maskCharData[i].displayIndex < selectionStart) { + maskCharData[i].value = undefined; + break; + } + } + return maskCharData; +} + +/** + * Deletes all values in maskCharData with a displayIndex that falls inside the specified range. + * Modifies the maskCharData inplace with the passed string and returns the display index of the + * next format character after the inserted string. + * @param maskCharData + * @param selectionStart + * @param selectionCount + * @return The displayIndex of the next format character + */ +export function insertString(maskCharData: IMaskValue[], selectionStart: number, newString: string): number { + let stringIndex = 0, + nextIndex = 0; + // Iterate through _maskCharData finding values with a displayIndex after the specified range start + for (let i = 0; i < maskCharData.length && stringIndex < newString.length; i++) { + if (maskCharData[i].displayIndex >= selectionStart) { + nextIndex = maskCharData[i].displayIndex; + // Find the next character in the newString that matches the format + while (stringIndex < newString.length) { + // If the character matches the format regexp, set the maskCharData to the new character + if (maskCharData[i].format.test(newString.charAt(stringIndex))) { + maskCharData[i].value = newString.charAt(stringIndex++); + // Set the nextIndex to the display index of the next mask format character. + if (i + 1 < maskCharData.length) { + nextIndex = maskCharData[i + 1].displayIndex; + } else { + nextIndex++; + } + break; + } + stringIndex++; + } + } + } + return nextIndex; +} From b6c5fde0d4ede388e05014b2f1f480610b8aef17 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 19 Apr 2018 15:41:39 -0700 Subject: [PATCH 40/86] DetailsRow: Flexshrink fix (#4622) * Flex shrink * Change file. --- .../flexshrink-fix_2018-04-19-20-18.json | 11 +++++++++++ .../src/components/DetailsList/DetailsRow.scss | 1 + 2 files changed, 12 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/flexshrink-fix_2018-04-19-20-18.json diff --git a/common/changes/office-ui-fabric-react/flexshrink-fix_2018-04-19-20-18.json b/common/changes/office-ui-fabric-react/flexshrink-fix_2018-04-19-20-18.json new file mode 100644 index 00000000000000..10306dc5b7e845 --- /dev/null +++ b/common/changes/office-ui-fabric-react/flexshrink-fix_2018-04-19-20-18.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "DetailsRow: applying `flex-shrink:0` to the check cell to prevent it from squishing in the flex layout.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss index 262aa48d3da731..92f1c6a7249494 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss @@ -228,6 +228,7 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark; // cause other items to be deselected. padding-top: 1px; margin-top: -1px; + flex-shrink: 0; } & > button { From ef0cfe45e059432b609973bdc710b3e0aaf2534b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 19 Apr 2018 18:10:05 -0700 Subject: [PATCH 41/86] Revert unintended changes in Dropdown from #4512 (#4625) * Remove unintended changes in dropdown from #4512 --- ...intended-changes-in-dropdown_2018-04-19-22-49.json | 11 +++++++++++ .../src/components/Dropdown/Dropdown.scss | 3 +-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/hotfix-unintended-changes-in-dropdown_2018-04-19-22-49.json diff --git a/common/changes/office-ui-fabric-react/hotfix-unintended-changes-in-dropdown_2018-04-19-22-49.json b/common/changes/office-ui-fabric-react/hotfix-unintended-changes-in-dropdown_2018-04-19-22-49.json new file mode 100644 index 00000000000000..fe501e1ec12e66 --- /dev/null +++ b/common/changes/office-ui-fabric-react/hotfix-unintended-changes-in-dropdown_2018-04-19-22-49.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Revert unintended changes to Dropdown styles from #4512", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index 71cebc5b8ca5ea..66cba6b8feecd4 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -34,7 +34,6 @@ $DropDown-item-height: 32px; @include ms-font-m; color: $ms-color-neutralPrimary; - height: $DropDown-height; position: relative; outline: 0; user-select: none; @@ -150,7 +149,7 @@ $DropDown-item-height: 32px; border: 1px solid $ms-color-neutralTertiary; cursor: pointer; display: block; - height: 100%; + height: $DropDown-height; line-height: $DropDown-height - 2px; // height minus the border @include padding(0, $DropDown-height, 0, 12px); position: relative; From 365de61c6ba80f672f6c5b3a26faa0c36e8530b3 Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 03:16:53 +0200 Subject: [PATCH 42/86] Remove tslint ignore of React (#4614) --- .../experiments/src/components/CommandBar/CommandBar.test.tsx | 3 --- .../ActivityItem/examples/ActivityItem.Basic.Example.tsx | 2 -- .../ActivityItem/examples/ActivityItem.Compact.Example.tsx | 2 -- .../ActivityItem/examples/ActivityItem.Persona.Example.tsx | 2 -- .../src/components/Autofill/Autofill.test.tsx | 2 -- .../src/components/Breadcrumb/Breadcrumb.test.tsx | 2 -- .../src/components/Breadcrumb/Breadcrumb.types.ts | 2 -- .../Breadcrumb/examples/Breadcrumb.Basic.Example.tsx | 2 -- .../Breadcrumb/examples/Breadcrumb.Static.Example.tsx | 2 -- .../office-ui-fabric-react/src/components/Button/Button.tsx | 2 -- .../src/components/Calendar/Calendar.test.tsx | 2 -- .../office-ui-fabric-react/src/components/Callout/Callout.tsx | 2 -- .../src/components/Callout/CalloutContent.base.tsx | 2 -- .../src/components/CommandBar/CommandBar.test.tsx | 2 -- .../src/components/ContextualMenu/ContextualMenu.test.tsx | 2 -- .../src/components/DetailsList/DetailsRowCheck.tsx | 2 -- .../DetailsList/examples/DetailsList.Basic.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.Compact.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.CustomColumns.Example.tsx | 2 -- .../examples/DetailsList.CustomGroupHeaders.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.CustomRows.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.Documents.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.DragDrop.Example.tsx | 2 -- .../DetailsList/examples/DetailsList.Grouped.Example.tsx | 2 -- .../src/components/Dialog/Dialog.test.tsx | 2 -- .../src/components/DocumentCard/DocumentCardStatus.tsx | 2 -- .../src/components/DocumentCard/DocumentCardTitle.tsx | 2 -- .../src/components/FocusTrapZone/FocusTrapZone.test.tsx | 2 -- .../FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx | 2 -- .../FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx | 2 -- .../FocusTrapZone.Box.FocusOnCustomElement.Example.tsx | 2 -- .../FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx | 2 -- .../src/components/FocusZone/FocusZone.test.tsx | 2 -- .../FocusZone/examples/FocusZone.Disabled.Example.tsx | 2 -- .../components/FocusZone/examples/FocusZone.Photos.Example.tsx | 2 -- .../src/components/GroupedList/GroupSpacer.tsx | 2 -- .../src/components/HoverCard/ExpandingCard.tsx | 2 -- .../src/components/HoverCard/HoverCard.tsx | 2 -- .../components/HoverCard/examples/HoverCard.Basic.Example.tsx | 2 -- .../src/components/Icon/examples/Icon.Basic.Example.tsx | 2 -- .../src/components/Icon/examples/Icon.Color.Example.tsx | 2 -- .../src/components/Icon/examples/Icon.ImageSheet.Example.tsx | 2 -- .../src/components/Icon/examples/Icon.Svg.Example.tsx | 2 -- .../office-ui-fabric-react/src/components/Image/Image.base.tsx | 2 -- .../office-ui-fabric-react/src/components/Image/Image.test.tsx | 2 -- .../office-ui-fabric-react/src/components/Label/Label.test.tsx | 2 -- .../office-ui-fabric-react/src/components/Label/Label.types.ts | 2 -- .../src/components/Label/examples/Label.Basic.Example.tsx | 2 -- .../office-ui-fabric-react/src/components/Link/Link.types.ts | 2 -- .../examples/MarqueeSelection.Basic.Example.tsx | 2 -- .../src/components/MessageBar/MessageBar.test.tsx | 2 -- .../MessageBar/examples/MessageBar.Basic.Example.tsx | 2 -- .../OverflowSet/examples/OverflowSet.Basic.Example.tsx | 2 -- .../OverflowSet/examples/OverflowSet.Custom.Example.tsx | 2 -- .../OverflowSet/examples/OverflowSet.Vertical.Example.tsx | 2 -- .../office-ui-fabric-react/src/components/Panel/Panel.test.tsx | 2 -- packages/office-ui-fabric-react/src/components/Panel/Panel.tsx | 2 -- .../office-ui-fabric-react/src/components/Popup/Popup.types.ts | 2 -- .../src/components/Rating/Rating.test.tsx | 2 -- .../examples/ScrollablePane.DetailsList.Example.tsx | 2 -- .../src/components/Slider/Slider.test.tsx | 2 -- .../src/components/TeachingBubble/TeachingBubble.test.tsx | 2 -- .../src/components/TeachingBubble/TeachingBubble.tsx | 2 -- .../src/components/TeachingBubble/TeachingBubbleContent.tsx | 2 -- .../TeachingBubble/examples/TeachingBubble.Basic.Example.tsx | 2 -- .../examples/TeachingBubble.Condensed.Example.tsx | 2 -- .../examples/TeachingBubble.Illustration.Example.tsx | 2 -- .../examples/TeachingBubble.SmallHeadline.Example.tsx | 2 -- .../examples/TeachingBubble.WideIllustration.Example.tsx | 2 -- .../src/components/Toggle/Toggle.test.tsx | 2 -- .../components/Toggle/examples/Toggle.AriaLabel.Example.tsx | 2 -- .../src/components/Toggle/examples/Toggle.Basic.Example.tsx | 2 -- .../office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx | 2 -- .../src/components/Tooltip/TooltipHost.tsx | 2 -- .../src/components/Tooltip/examples/Tooltip.Basic.Example.tsx | 2 -- .../src/components/Tooltip/examples/Tooltip.Custom.Example.tsx | 2 -- .../components/Tooltip/examples/Tooltip.Overflow.Example.tsx | 2 -- packages/office-ui-fabric-react/src/demo/index.tsx | 2 -- .../src/utilities/selection/SelectionZone.test.tsx | 2 -- 79 files changed, 159 deletions(-) diff --git a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx index cdc75037b459b7..fae541993fdf60 100644 --- a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx +++ b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ - import { CommandBar } from './CommandBar'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; 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 838d6fd39bec76..876bc6b616cee4 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; import { 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 a2710443ce2ba0..ae470d6318c96b 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; import { IActivityItemProps } from '../ActivityItem.types'; 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 204be27e2a29fb..5dfb162c10fdaa 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css, classNamesFunction } from '../../../Utilities'; import { ActivityItem } from '../ActivityItem'; import { diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx index 3ec42dccafdecb..329a1d64ef2645 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx index fc31314c41a7b4..7004f172c843c0 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; 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 419097fbbc4440..ec6a738b6c875a 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Breadcrumb, IBreadCrumbData } from './Breadcrumb.base'; import { IIconProps } from '../Icon'; import { IRenderFunction, IComponentAs } from '../../Utilities'; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx index c3fc03ce3ca123..fba2af92829715 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx index fc283ec4f333fb..286ee8146c5965 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.tsx index 06772743f94dad..930d80d749e669 100644 --- a/packages/office-ui-fabric-react/src/components/Button/Button.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/Button.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, warn } from '../../Utilities'; import { ButtonType, IButtonProps } from './Button.types'; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx index 6616d450c70a45..f44ab13a7ce206 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx index 07bf90be3eb67b..72b35098346be0 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from '../../Utilities'; import { ICalloutProps } from './Callout.types'; 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 b9eb91f7661bda..6ebad2fb222fdf 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { ICalloutProps, ICalloutContentStyleProps, diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx index 2f769b022acee9..f6de37f1b487b4 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx index e4d912aa78495a..947147fc05e7ab 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Promise } from 'es6-promise'; import * as ReactTestUtils from 'react-dom/test-utils'; import { 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 49428fe9b3feca..907e5617571989 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css } from '../../Utilities'; import { Check } from '../../Check'; import * as DetailsRowCheckStyles from './DetailsRowCheck.scss'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx index 5d4ce186686a89..b9109a682dcce4 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { DetailsList, diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx index a35388a1e229b2..caea28be9fd78e 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { DetailsList, diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx index 8eb95497aa6c0a..207d013e2653c1 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { createListItems } from '@uifabric/example-app-base'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx index e7552c5374c471..19c4256ab10de9 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Link } from 'office-ui-fabric-react/lib/Link'; import { DetailsList, IGroup, IGroupDividerProps } from 'office-ui-fabric-react/lib/DetailsList'; import { createListItems, createGroups } from '@uifabric/example-app-base'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx index c1481847de2ffb..11559d08f54282 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DetailsList, DetailsRow, IDetailsRowProps, IDetailsRowCheckProps } from 'office-ui-fabric-react/lib/DetailsList'; import { css } from 'office-ui-fabric-react/lib/Utilities'; import { createListItems } from '@uifabric/example-app-base'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx index 67bf30c6857983..2bf18feaa202d6 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx index 7b60397e17cc53..18e9c9f10e9830 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Link } from 'office-ui-fabric-react/lib/Link'; import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList'; import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx index d12578a4604ca2..59ffbeab088a26 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, createRef diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx index 21b58689ced00f..4f45ee0719d27a 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx index d229db9f39b09b..61b57069757899 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 9b03ef17def543..36a6944fee7f21 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx index 2fac102b5b5a36..272175728c1e83 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; 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 c235864294499d..82dba91bf0b8ab 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; 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 6f3531818f0877..80cf5a5fd0152b 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; 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 0eee480b8cb7af..60b46d16b903ae 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; 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 4c726df79e49e2..9d744081c97619 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 @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ /* tslint:disable:no-string-literal */ diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index 5392191efeafaa..3dad9e8a78d41a 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx index d5f93fdae9cc4b..fb63dd475f8b17 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx index 1ceaf2e425ea82..c4d2126105c1a5 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { createArray } from 'office-ui-fabric-react/lib/Utilities'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx index 8f9e61fef19c29..a3dea1d7c1eff8 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css } from '../../Utilities'; diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx index b6ab47a089aa99..14099ee016770a 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, getNativeProps, diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx index b401cc8f4c0135..4616ac42ad1580 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, divProperties, diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx index 2968e13027b82a..c26c02f5d6ff89 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { HoverCard, diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx index f05b207a3ab45b..02d122c52466c5 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Icon } from 'office-ui-fabric-react/lib/Icon'; import './IconExample.scss'; diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx index d4f9bf420b22d1..c9a8526f32d615 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Icon } from 'office-ui-fabric-react/lib/Icon'; import './IconExample.scss'; diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx index 24d3e04bb266c1..54f7555783f263 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Icon, IconType } from 'office-ui-fabric-react/lib/Icon'; import './IconExample.scss'; import { TestImages } from '../../../common/TestImages'; diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx index 8303d934b47c66..12d03b2a9b6aa9 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx @@ -1,7 +1,5 @@ /* tslint:disable:jsx-wrap-multiline */ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Icon } from 'office-ui-fabric-react/lib/Icon'; import './IconExample.scss'; import { mergeStyles, registerIcons } from 'office-ui-fabric-react/lib/Styling'; diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx index 966228a12045e5..00d9ca33de6737 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, classNamesFunction, diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx index 5c68075f7286a2..ca63b70a8a669d 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx index 32aa491fbbc1c8..73cbe8c6bcce54 100644 --- a/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.types.ts b/packages/office-ui-fabric-react/src/components/Label/Label.types.ts index 6df484a69cb705..4189663243207d 100644 --- a/packages/office-ui-fabric-react/src/components/Label/Label.types.ts +++ b/packages/office-ui-fabric-react/src/components/Label/Label.types.ts @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { ITheme } from '../../Styling'; export interface ILabel { diff --git a/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx index 791fa98d0f960c..8d0f66c54b5446 100644 --- a/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Label } from 'office-ui-fabric-react/lib/Label'; diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.types.ts b/packages/office-ui-fabric-react/src/components/Link/Link.types.ts index 109783f3195f69..afa26bd42905b0 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.types.ts +++ b/packages/office-ui-fabric-react/src/components/Link/Link.types.ts @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { LinkBase } from './Link.base'; import { diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx index 4396c07dabcf4f..d85e790f2efd75 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { css, diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx index f64f3663324f86..ed70283be509ab 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx +++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; import * as renderer from 'react-test-renderer'; diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx index 635a65ff412c4b..41d21eb32b3dea 100644 --- a/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { MessageBarButton } from 'office-ui-fabric-react/lib/Button'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { Label } from 'office-ui-fabric-react/lib/Label'; diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx index 0e6fdeacb756f4..dc6e0be9573213 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { Link } from 'office-ui-fabric-react/lib/Link'; diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx index 470d5d9501620d..1209320863176a 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx index a8d6b8571bf4ea..ca6122ac0dc3b1 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { CommandBarButton } from 'office-ui-fabric-react/lib/Button'; import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx index 342b065e1f3979..1ed46a5d3c04e4 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx index 8aae33f9273c8a..77c7cb3c23ff4e 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts b/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts index d49339eb57e6ae..b00993fa7f612e 100644 --- a/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts +++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Popup } from './Popup'; export interface IPopup { diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx index 02bb092d20d05b..4739320115defd 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx index d03049bf316b0d..cea5daa278d82d 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { DetailsList, diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx index 6af3e305401153..a0a09e9dc38d5c 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx index cb71202e1c7a6a..a2974da0e16e48 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx index ceb246fb4f4216..73d7599b7d9def 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css } from '../../Utilities'; import { TeachingBubbleContent } from './TeachingBubbleContent'; import { ITeachingBubbleProps } from './TeachingBubble.types'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx index 79fb4ae6743734..71d9a0ad37a64d 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css } from '../../Utilities'; import { ITeachingBubbleProps } from './TeachingBubble.types'; import { ITeachingBubbleState } from './TeachingBubble'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx index 91bd4ec369aca8..f591ec5911cfe3 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx index bdfc2d2a27c656..39d15efcb47bc6 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx index 7293397f80aaf1..b3934351b9cea8 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { IImageProps } from 'office-ui-fabric-react/lib/Image'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx index aed369491e4923..ba3b918032b52d 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble'; diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx index 7448ab573a9b36..650f8eeb9fa6ab 100644 --- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { IImageProps } from 'office-ui-fabric-react/lib/Image'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx index 0fb4e096454e45..8447805343e8ef 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { mount } from 'enzyme'; import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; diff --git a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx index 0076984be1c804..056f6446415d66 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; // tslint:disable:jsx-no-lambda diff --git a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx index 9df6ebe041da36..1efd3e65416b5c 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; // tslint:disable:jsx-no-lambda diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx index 3053d4e2bc288a..3069f605105d00 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css, diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx index 2b9bc6503b0d34..a1749ca60c12e0 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, css, diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx index 8e849c64631d41..27f48e64b61680 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx index 85d195fc33d61a..63d433e7010a28 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx index 64f49a9e3a0177..19a04262218f64 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import { BaseComponent, getId } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { diff --git a/packages/office-ui-fabric-react/src/demo/index.tsx b/packages/office-ui-fabric-react/src/demo/index.tsx index 3fb721541bf9f6..6afa2e98a2db2b 100644 --- a/packages/office-ui-fabric-react/src/demo/index.tsx +++ b/packages/office-ui-fabric-react/src/demo/index.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import { App, AppDefinition } from './AppDefinition'; import { Router, Route } from 'office-ui-fabric-react/lib/utilities/router/index'; diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx index 414c8d413b013b..3cf9cb98003632 100644 --- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx +++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx @@ -1,6 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -/* tslint:enable:no-unused-variable */ import * as ReactDOM from 'react-dom'; import * as ReactTestUtils from 'react-dom/test-utils'; From f2dc9cbc3b00abe1af545917f9908ce7e08a5b9b Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 19 Apr 2018 18:51:30 -0700 Subject: [PATCH 43/86] Addressing Issue #4349 - Data attributes on Pivot Item (#4461) * added linkNativeProps prop to PivotItem to pass to the link/CommandButton element * rush change * updated to headerButtonProps and deprecated linkText while adding headerText * better implementation of headerText * fixed name attribute --- ...pivotitem-nativeprops-4349_2018-04-04-19-55.json | 11 +++++++++++ .../src/components/Pivot/Pivot.tsx | 12 +++++++----- .../src/components/Pivot/PivotItem.types.ts | 13 ++++++++++++- .../Pivot/examples/Pivot.Basic.Example.tsx | 9 ++++++++- 4 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json diff --git a/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json b/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json new file mode 100644 index 00000000000000..89e6b541192440 --- /dev/null +++ b/common/changes/office-ui-fabric-react/pivotitem-nativeprops-4349_2018-04-04-19-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added headerButtonProps prop to PivotItem to allow passing native props (data-* & aria-*) to the header/link/CommandButton element. Also depricated linkText and added headerText for semantic purposes.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx index f3ec8ce5527bfd..51f92c1970678e 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx @@ -128,7 +128,7 @@ export class Pivot extends BaseComponent { } private _renderPivotLink = (link: IPivotItemProps): JSX.Element => { - const { itemKey } = link; + const { itemKey, headerButtonProps } = link; const tabId = this._keyToTabIds[itemKey as string]; const { onRenderItemLink } = link; let linkContent: JSX.Element | null; @@ -141,6 +141,7 @@ export class Pivot extends BaseComponent { return ( { ariaLabel={ link.ariaLabel } role='tab' aria-selected={ this.state.selectedKey === itemKey } - name={ link.linkText } + name={ link.headerText } > { linkContent } @@ -163,7 +164,7 @@ export class Pivot extends BaseComponent { } private _renderLinkContent = (link: IPivotItemProps): JSX.Element => { - const { itemCount, itemIcon, linkText } = link; + const { itemCount, itemIcon, headerText } = link; return ( @@ -172,7 +173,7 @@ export class Pivot extends BaseComponent { ) } - { linkText !== undefined && { link.linkText } } + { headerText !== undefined && { link.headerText } } { itemCount !== undefined && ({ itemCount }) } ); @@ -215,7 +216,8 @@ export class Pivot extends BaseComponent { const itemKey = pivotItem.props.itemKey || index.toString(); links.push({ - linkText: pivotItem.props.linkText, + headerText: pivotItem.props.headerText || pivotItem.props.linkText, + headerButtonProps: pivotItem.props.headerButtonProps, ariaLabel: pivotItem.props.ariaLabel, itemKey: itemKey, itemCount: pivotItem.props.itemCount, diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts index 616ca5f694a8fc..8eabb6604e1708 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts @@ -8,10 +8,21 @@ export interface IPivotItemProps extends React.HTMLAttributes { componentRef?: () => void; /** - * The text displayed of each pivot link. + * The text displayed of each pivot link - renaming to 'headerText'. + * @deprecated */ linkText?: string; + /** + * The text displayed of each pivot link. + */ + headerText?: string; + + /** + * Props for the header command button supporting native props - data-* and aria-* - for each pivot header/link element + */ + headerButtonProps?: { [key: string]: string | number | boolean }; + /** * An required key to uniquely identify a pivot item. * diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx index 4b1efa1d9964aa..d00b6e53b6a0b8 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx @@ -9,7 +9,14 @@ export class PivotBasicExample extends React.Component { return (
    - + From ffd046eb362ce46c9f9ef4dc7c22ee5db00167c2 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 19 Apr 2018 18:53:17 -0700 Subject: [PATCH 44/86] Addressing Issue #3634 - Accessibility: Panel should have aria-labelledby and aria-describedby like Dialog (#4626) * enable native props * update documentation * rush change --- .../panel-nativeprops-3634_2018-04-19-23-53.json | 11 +++++++++++ .../src/components/Panel/Panel.tsx | 4 ++++ .../src/components/Panel/PanelPage.tsx | 1 + 3 files changed, 16 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/panel-nativeprops-3634_2018-04-19-23-53.json diff --git a/common/changes/office-ui-fabric-react/panel-nativeprops-3634_2018-04-19-23-53.json b/common/changes/office-ui-fabric-react/panel-nativeprops-3634_2018-04-19-23-53.json new file mode 100644 index 00000000000000..bb18d1f2704ec2 --- /dev/null +++ b/common/changes/office-ui-fabric-react/panel-nativeprops-3634_2018-04-19-23-53.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added support for native props on Panel for the root div with class ms-Panel", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx index 77c7cb3c23ff4e..de4e937eedee3b 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx @@ -3,7 +3,9 @@ import * as React from 'react'; import { BaseComponent, css, + divProperties, getId, + getNativeProps, getRTL, createRef } from '../../Utilities'; @@ -100,6 +102,7 @@ export class Panel extends BaseComponent implements IP const isOnRightSide = isRTL ? isLeft : !isLeft; const headerTextId = headerText && id + '-headerText'; const customWidthStyles = (type === PanelType.custom) ? { width: customWidth } : {}; + const nativeProps = getNativeProps(this.props, divProperties); if (!isOpen && !isAnimating && !isHiddenOnDismiss) { return null; @@ -135,6 +138,7 @@ export class Panel extends BaseComponent implements IP } >
    { title='Panel' componentName='PanelExample' componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Panel' + allowNativeProps={ true } exampleCards={
    From 5cab1cf94fb150c78e059c4158410df8d57d4e9f Mon Sep 17 00:00:00 2001 From: Chris Mohr Date: Thu, 19 Apr 2018 18:54:26 -0700 Subject: [PATCH 45/86] add onRenderDescription to TextField (#4588) * add onRenderDescription to TextField * delete empty change files * fix linting error * use arrow function instead of autobind * address pr feedback * allow onRenderDescriptiont to be invoked in absence of description * remove autobind --- ...iption_for_TextField_2018-04-16-23-55.json | 11 ++++++++ .../src/components/TextField/TextField.tsx | 23 ++++++++------- .../components/TextField/TextField.types.ts | 11 ++++++-- .../components/TextField/TextFieldPage.tsx | 8 ++++++ .../TextField.OnRenderDescription.Example.tsx | 28 +++++++++++++++++++ 5 files changed, 68 insertions(+), 13 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json create mode 100644 packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx diff --git a/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json b/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json new file mode 100644 index 00000000000000..fbfb53e7016884 --- /dev/null +++ b/common/changes/office-ui-fabric-react/onRenderDescription_for_TextField_2018-04-16-23-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "add onRenderDescription to TextField", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "chrismo@microsoft.com" +} \ No newline at end of file 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 18999147b804d9..1fafdae374e1ef 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -3,7 +3,6 @@ import { ITextField, ITextFieldProps } from './TextField.types'; import { Label } from '../../Label'; import { Icon } from '../../Icon'; import { - autobind, DelayedRender, BaseComponent, getId, @@ -150,7 +149,8 @@ export class TextField extends BaseComponent i onRenderAddon = this._onRenderAddon, // @deprecated onRenderPrefix = this._onRenderPrefix, onRenderSuffix = this._onRenderSuffix, - onRenderLabel = this._onRenderLabel + onRenderLabel = this._onRenderLabel, + onRenderDescription = this._onRenderDescription } = this.props; const { isFocused } = this.state; const errorMessage = this._errorMessage; @@ -192,7 +192,7 @@ export class TextField extends BaseComponent i
    { this._isDescriptionAvailable && - { description && { description } } + { onRenderDescription(this.props, this._onRenderDescription) } { errorMessage &&
    @@ -293,13 +293,16 @@ export class TextField extends BaseComponent i } } - @autobind - private _onRenderLabel(props: ITextFieldProps): JSX.Element | null { - const { - label - } = props; - if (label) { - return (); + private _onRenderLabel = (props: ITextFieldProps): JSX.Element | null => { + if (props.label) { + return (); + } + return null; + } + + private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => { + if (props.description) { + return ({ props.description }); } return null; } diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts index 2e88a28cb8a740..f7483ab9b7cc88 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts @@ -78,7 +78,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; @@ -87,6 +87,11 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; + /** * @deprecated * Deprecated; use prefix instead. @@ -110,12 +115,12 @@ export interface ITextFieldProps extends React.AllHTMLAttributes; /** - * Custom render function for prefix + * Custom render function for prefix. */ onRenderPrefix?: IRenderFunction; /** - * Custom render function for suffix + * Custom render function for suffix. */ onRenderSuffix?: IRenderFunction; diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx index b53950817af652..d3255ca176b5c5 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx @@ -20,6 +20,7 @@ import { TextFieldStatus } from './TextField.checklist'; import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example'; import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example'; import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example'; +import { TextFieldOnRenderDescriptionExample } from './examples/TextField.OnRenderDescription.Example'; const TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx') as string; const TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx') as string; @@ -33,6 +34,7 @@ const TextFieldPrefixAndSuffixExampleCode = require('!raw-loader!office-ui-fabri const TextFieldSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx') as string; const TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx') as string; const TextFieldAutoCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx') as string; +const TextFieldOnRenderDescriptionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx') as string; export class TextFieldPage extends React.Component { public render() { @@ -113,6 +115,12 @@ export class TextFieldPage extends React.Component > + + + { + public render() { + return ( +
    + +
    + ); + } + + private _onRenderDescription = (props: ITextFieldProps): JSX.Element => { + return ( +
    + { props.description }{ ' ' } + Link +
    ); + } + + private _onLinkClick = (e: React.MouseEvent) => { + e.preventDefault(); + } +} From 9c95e9b92f8caa1fe5ffb9da769ce0921a5272ed Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Fri, 20 Apr 2018 04:22:29 +0200 Subject: [PATCH 46/86] Typedef tslint rule fixes (ready to merge) (#4573) * Add typedefs * More typedefs * More typdefs * Fix merge mistake * Fix conflict * Typedef wip * More typedefs * Fixup oufr typedefs * Fix experiments * Add missing import of type --- .../fabric-website/src/components/App/App.tsx | 6 +-- .../src/components/CodeBlock/CodeBlock.tsx | 2 +- .../src/components/ColorTable/ColorTable.tsx | 2 +- .../src/components/DOIcon/DOIcon.tsx | 2 +- .../components/DONavigation/DONavigation.tsx | 20 ++++---- .../DONavigation/DONavigationLink.tsx | 30 +++++------ .../components/DOSearchBox/DOSearchBox.tsx | 18 +++---- .../src/components/IconGrid/IconGrid.tsx | 4 +- .../fabric-website/src/components/Nav/Nav.tsx | 2 +- .../src/components/PageHeader/PageHeader.tsx | 4 +- .../PageHeaderLink/PageHeaderLink.tsx | 6 +-- .../Table/AnimationCell/AnimationCell.tsx | 2 +- .../src/components/Table/Table.tsx | 2 +- .../src/pages/BlogPage/BlogItem.tsx | 4 +- .../src/pages/BlogPage/BlogPage.tsx | 2 +- .../src/pages/BlogPage/BlogPost.tsx | 4 +- .../Components/ActivityItemComponentPage.tsx | 2 +- .../Components/BreadcrumbComponentPage.tsx | 2 +- .../pages/Components/ButtonComponentPage.tsx | 2 +- .../Components/CalendarComponentPage.tsx | 2 +- .../pages/Components/CalloutComponentPage.tsx | 2 +- .../Components/CheckboxComponentPage.tsx | 2 +- .../Components/ChoiceGroupComponentPage.tsx | 2 +- .../Components/CoachmarkComponentPage.tsx | 2 +- .../Components/ColorPickerComponentPage.tsx | 2 +- .../Components/ComboBoxComponentPage.tsx | 2 +- .../Components/CommandBarComponentPage.tsx | 2 +- .../Components/ComponentUtilitiesPage.tsx | 2 +- .../ContextualMenuComponentPage.tsx | 2 +- .../Components/DatePickerComponentPage.tsx | 2 +- .../Components/DetailsListComponentPage.tsx | 2 +- .../pages/Components/DialogComponentPage.tsx | 2 +- .../Components/DocumentCardComponentPage.tsx | 2 +- .../Components/DropdownComponentPage.tsx | 2 +- .../Components/FacepileComponentPage.tsx | 2 +- .../Components/FocusTrapZoneUtilityPage.tsx | 2 +- .../pages/Components/FocusZoneUtilityPage.tsx | 2 +- .../Components/GroupedListComponentPage.tsx | 2 +- .../Components/HoverCardComponentPage.tsx | 2 +- .../pages/Components/IconComponentPage.tsx | 2 +- .../pages/Components/ImageComponentPage.tsx | 2 +- .../pages/Components/LabelComponentPage.tsx | 2 +- .../pages/Components/LayerComponentPage.tsx | 2 +- .../pages/Components/LinkComponentPage.tsx | 2 +- .../pages/Components/ListComponentPage.tsx | 2 +- .../MarqueeSelectionUtilityPage.tsx | 2 +- .../Components/MessageBarComponentPage.tsx | 2 +- .../pages/Components/ModalComponentPage.tsx | 2 +- .../src/pages/Components/NavComponentPage.tsx | 2 +- .../Components/OverflowSetComponentPage.tsx | 2 +- .../pages/Components/OverlayComponentPage.tsx | 2 +- .../pages/Components/PanelComponentPage.tsx | 2 +- .../Components/PeoplePickerComponentPage.tsx | 2 +- .../pages/Components/PersonaComponentPage.tsx | 2 +- .../pages/Components/PickersComponentPage.tsx | 2 +- .../pages/Components/PivotComponentPage.tsx | 2 +- .../ProgressIndicatorComponentPage.tsx | 2 +- .../pages/Components/RatingComponentPage.tsx | 2 +- .../Components/ResizeGroupComponentPage.tsx | 2 +- .../ScrollablePaneComponentPage.tsx | 2 +- .../Components/SearchBoxComponentPage.tsx | 2 +- .../pages/Components/SelectionUtilityPage.tsx | 2 +- .../pages/Components/SliderComponentPage.tsx | 2 +- .../Components/SpinButtonComponentPage.tsx | 2 +- .../pages/Components/SpinnerComponentPage.tsx | 2 +- .../SwatchColorPickerComponentPage.tsx | 2 +- .../TeachingBubbleComponentPage.tsx | 2 +- .../Components/TextFieldComponentPage.tsx | 2 +- .../pages/Components/ThemesUtilityPage.tsx | 2 +- .../pages/Components/ToggleComponentPage.tsx | 2 +- .../pages/Components/TooltipComponentPage.tsx | 2 +- .../src/pages/GetStarted/GetStartedPage.tsx | 2 +- .../src/pages/HomePage/HomePage.tsx | 2 +- .../src/pages/Interstitials/AngularJSPage.tsx | 2 +- .../src/pages/Interstitials/FabricIOSPage.tsx | 2 +- .../src/pages/Interstitials/FabricJSPage.tsx | 2 +- .../src/pages/Overviews/ComponentsPage.tsx | 2 +- .../src/pages/Overviews/StylesPage.tsx | 2 +- .../src/pages/ResourcesPage/ResourcesPage.tsx | 2 +- .../Styles/AnimationsPage/AnimationsPage.tsx | 2 +- .../Styles/BrandIconsPage/BrandIconsPage.tsx | 2 +- .../pages/Styles/ColorsPage/ColorsPage.tsx | 2 +- .../src/pages/Styles/IconsPage/IconsPage.tsx | 2 +- .../pages/Styles/LayoutPage/LayoutPage.tsx | 2 +- .../LocalizationPage/LocalizationPage.tsx | 2 +- .../ThemeGeneratorToolPage.tsx | 2 +- .../Styles/TypographyPage/TypographyPage.tsx | 2 +- .../Styles/UtilitiesPage/UtilitiesPage.tsx | 2 +- apps/fabric-website/src/root.tsx | 4 +- apps/fabric-website/src/utilities/data.ts | 10 ++-- ghdocs/BestPractices/ComponentDesign.md | 8 +-- ghdocs/BestPractices/Styling.md | 4 +- .../src/common/testUtilities.ts | 2 +- .../components/ActivityItem/ActivityItem.tsx | 34 +++++++------ .../ActivityItem/ActivityItemPage.tsx | 2 +- .../examples/ActivityItem.Basic.Example.tsx | 6 +-- .../examples/ActivityItem.Compact.Example.tsx | 4 +- .../examples/ActivityItem.Persona.Example.tsx | 6 +-- .../src/components/Autofill/Autofill.test.tsx | 18 +++---- .../src/components/Autofill/Autofill.tsx | 12 ++--- .../components/Breadcrumb/Breadcrumb.base.tsx | 43 ++++++++-------- .../components/Breadcrumb/BreadcrumbPage.tsx | 2 +- .../examples/Breadcrumb.Basic.Example.tsx | 4 +- .../examples/Breadcrumb.Static.Example.tsx | 4 +- .../Button/ActionButton/ActionButton.tsx | 2 +- .../src/components/Button/BaseButton.tsx | 3 +- .../src/components/Button/Button.tsx | 2 +- .../src/components/Button/ButtonPage.tsx | 6 +-- .../CommandBarButton/CommandBarButton.tsx | 2 +- .../Button/CompoundButton/CompoundButton.tsx | 2 +- .../Button/DefaultButton/DefaultButton.tsx | 2 +- .../Button/IconButton/IconButton.tsx | 2 +- .../MessageBarButton/MessageBarButton.tsx | 2 +- .../Button/PrimaryButton/PrimaryButton.tsx | 2 +- .../Button/examples/Button.Action.Example.tsx | 2 +- .../Button/examples/Button.Anchor.Example.tsx | 2 +- .../examples/Button.Command.Example.tsx | 2 +- .../examples/Button.CommandBar.Example.tsx | 2 +- .../examples/Button.Compound.Example.tsx | 2 +- .../Button.ContextualMenu.Example.tsx | 2 +- .../examples/Button.Default.Example.tsx | 2 +- .../Button/examples/Button.Icon.Example.tsx | 2 +- .../examples/Button.Primary.Example.tsx | 2 +- .../examples/Button.ScreenReader.Example.tsx | 2 +- .../Button/examples/Button.Split.Example.tsx | 4 +- .../Button/examples/Button.Swap.Example.tsx | 2 +- .../src/components/Calendar/Calendar.tsx | 6 +-- .../src/components/Calendar/CalendarDay.tsx | 14 ++--- .../src/components/Calendar/CalendarMonth.tsx | 4 +- .../src/components/Calendar/CalendarPage.tsx | 2 +- .../examples/Calendar.Button.Example.tsx | 8 +-- .../examples/Calendar.Inline.Example.tsx | 10 ++-- .../src/components/Callout/Callout.tsx | 2 +- .../Callout/CalloutContent.base.tsx | 14 ++--- .../src/components/Callout/CalloutPage.tsx | 2 +- .../examples/Callout.Basic.Example.tsx | 6 +-- .../examples/Callout.Cover.Example.tsx | 8 +-- .../examples/Callout.Directional.Example.tsx | 2 +- .../examples/Callout.Nested.Example.tsx | 4 +- .../src/components/Check/Check.base.tsx | 2 +- .../src/components/Checkbox/Checkbox.base.tsx | 2 +- .../src/components/Checkbox/CheckboxPage.tsx | 2 +- .../examples/Checkbox.Basic.Example.tsx | 4 +- .../Checkbox.ImplementationExamples.tsx | 6 +-- .../components/ChoiceGroup/ChoiceGroup.tsx | 8 +-- .../ChoiceGroup/ChoiceGroupPage.tsx | 2 +- .../examples/ChoiceGroup.Icon.Example.tsx | 2 +- .../examples/ChoiceGroup.Image.Example.tsx | 4 +- .../components/ColorPicker/ColorPicker.tsx | 6 +-- .../ColorPicker/ColorPickerPage.tsx | 2 +- .../components/ColorPicker/ColorRectangle.tsx | 6 +-- .../components/ColorPicker/ColorSlider.tsx | 4 +- .../examples/ColorPicker.Basic.Example.tsx | 2 +- .../src/components/ComboBox/ComboBox.tsx | 51 ++++++++++--------- .../src/components/ComboBox/ComboBoxPage.tsx | 2 +- .../examples/ComboBox.Basic.Example.tsx | 4 +- .../ComboBox.CustomStyled.Example.tsx | 2 +- .../src/components/CommandBar/CommandBar.tsx | 22 ++++---- .../components/CommandBar/CommandBarPage.tsx | 2 +- .../examples/CommandBar.Basic.Example.tsx | 2 +- .../CommandBar.Customization.Example.tsx | 4 +- .../CommandBar.NonFocusable.Example.tsx | 2 +- .../ContextualMenu/ContextualMenu.test.tsx | 4 +- .../ContextualMenu/ContextualMenu.tsx | 4 +- .../ContextualMenu/ContextualMenuPage.tsx | 2 +- .../examples/ContextualMenu.Basic.Example.tsx | 2 +- .../ContextualMenu.Checkmarks.Example.tsx | 4 +- .../ContextualMenu.CustomMenuItem.Example.tsx | 2 +- .../ContextualMenu.Customization.Example.tsx | 4 +- ...alMenu.CustomizationWithNoWrap.Example.tsx | 4 +- .../ContextualMenu.Directional.Example.tsx | 2 +- .../ContextualMenu.Header.Example.tsx | 2 +- .../examples/ContextualMenu.Icon.Example.tsx | 2 +- .../ContextualMenu.ScrollBar.Example.tsx | 2 +- .../ContextualMenu.Section.Example.tsx | 2 +- .../ContextualMenu.Submenu.Example.tsx | 2 +- .../src/components/DatePicker/DatePicker.tsx | 6 +-- .../components/DatePicker/DatePickerPage.tsx | 2 +- .../examples/DatePicker.Bounded.Example.tsx | 2 +- .../examples/DatePicker.Format.Example.tsx | 2 +- .../examples/DatePicker.Input.Example.tsx | 2 +- .../examples/DatePicker.Required.Example.tsx | 2 +- .../DatePicker.WeekNumbers.Example.tsx | 4 +- .../components/DetailsList/DetailsHeader.tsx | 20 ++++---- .../components/DetailsList/DetailsList.tsx | 50 +++++++++--------- .../DetailsList/DetailsListPage.tsx | 2 +- .../src/components/DetailsList/DetailsRow.tsx | 16 +++--- .../DetailsList/DetailsRowFields.tsx | 8 +-- .../examples/DetailsList.Advanced.Example.tsx | 18 +++---- .../examples/DetailsList.Basic.Example.tsx | 2 +- .../examples/DetailsList.Compact.Example.tsx | 2 +- ...DetailsList.CustomGroupHeaders.Example.tsx | 4 +- .../examples/DetailsList.DragDrop.Example.tsx | 6 +-- .../DetailsList.NavigatingFocus.Example.tsx | 4 +- .../src/components/Dialog/Dialog.base.tsx | 2 +- .../components/Dialog/DialogContent.base.tsx | 2 +- .../components/Dialog/DialogFooter.base.tsx | 6 +-- .../src/components/Dialog/DialogPage.tsx | 2 +- .../src/components/Divider/DividerPage.tsx | 2 +- .../VerticalDivider.Basic.Example.tsx | 2 +- .../VerticalDivider.Custom.Example.tsx | 2 +- .../components/DocumentCard/DocumentCard.tsx | 2 +- .../DocumentCard/DocumentCardActions.tsx | 2 +- .../DocumentCard/DocumentCardActivity.tsx | 31 +++++------ .../DocumentCard/DocumentCardLocation.tsx | 2 +- .../DocumentCard/DocumentCardPage.tsx | 2 +- .../DocumentCard/DocumentCardPreview.tsx | 2 +- .../DocumentCard/DocumentCardTitle.tsx | 12 ++--- .../examples/DocumentCard.Basic.Example.tsx | 2 +- .../examples/DocumentCard.Compact.Example.tsx | 2 +- .../DocumentCard.Complete.Example.tsx | 2 +- .../src/components/Dropdown/Dropdown.tsx | 15 +++--- .../src/components/Dropdown/DropdownPage.tsx | 2 +- .../examples/Dropdown.Custom.Example.tsx | 2 +- .../examples/Dropdown.Error.Example.tsx | 2 +- .../src/components/Facepile/Facepile.tsx | 4 +- .../components/Facepile/FacepileButton.tsx | 2 +- .../src/components/Facepile/FacepilePage.tsx | 2 +- .../examples/Facepile.AddFace.Example.tsx | 2 +- .../examples/Facepile.Basic.Example.tsx | 2 +- .../examples/Facepile.Overflow.Example.tsx | 2 +- .../FocusTrapZone/FocusTrapZone.test.tsx | 2 +- .../FocusTrapZone/FocusTrapZone.tsx | 14 ++--- .../FocusTrapZone/FocusTrapZonePage.tsx | 2 +- .../components/FocusZone/FocusZone.test.tsx | 2 +- .../src/components/FocusZone/FocusZone.tsx | 2 +- .../components/FocusZone/FocusZonePage.tsx | 2 +- .../examples/FocusZone.List.Example.tsx | 2 +- .../components/GroupedList/GroupHeader.tsx | 2 +- .../components/GroupedList/GroupedList.tsx | 8 +-- .../GroupedList/GroupedListPage.tsx | 2 +- .../GroupedList/GroupedListSection.tsx | 8 +-- .../examples/GroupedList.Basic.Example.tsx | 4 +- .../examples/GroupedList.Custom.Example.tsx | 4 +- .../components/HoverCard/ExpandingCard.tsx | 6 +-- .../src/components/HoverCard/HoverCard.tsx | 4 +- .../components/HoverCard/HoverCardPage.tsx | 2 +- .../src/components/Icon/Icon.base.tsx | 2 +- .../src/components/Icon/IconPage.tsx | 2 +- .../Icon/examples/Icon.Basic.Example.tsx | 2 +- .../Icon/examples/Icon.Color.Example.tsx | 2 +- .../Icon/examples/Icon.ImageSheet.Example.tsx | 2 +- .../Icon/examples/Icon.Svg.Example.tsx | 2 +- .../src/components/Image/Image.base.tsx | 6 +-- .../src/components/Image/ImagePage.tsx | 2 +- .../Image/examples/Image.Center.Example.tsx | 2 +- .../Image/examples/Image.Contain.Example.tsx | 2 +- .../Image/examples/Image.Cover.Example.tsx | 2 +- .../Image/examples/Image.Default.Example.tsx | 2 +- .../examples/Image.MaximizeFrame.Example.tsx | 2 +- .../Image/examples/Image.None.Example.tsx | 2 +- .../src/components/Label/Label.base.tsx | 2 +- .../src/components/Label/LabelPage.tsx | 2 +- .../src/components/Layer/Layer.base.tsx | 10 ++-- .../src/components/Layer/Layer.test.tsx | 6 +-- .../src/components/Layer/LayerHost.tsx | 6 +-- .../src/components/Layer/LayerPage.tsx | 2 +- .../Layer/examples/Layer.Basic.Example.tsx | 6 +-- .../Layer/examples/Layer.Hosted.Example.tsx | 2 +- .../src/components/Link/Link.base.tsx | 2 +- .../src/components/Link/LinkPage.tsx | 2 +- .../Link/examples/Link.Basic.Example.tsx | 2 +- .../src/components/List/List.tsx | 38 +++++++------- .../src/components/List/ListPage.tsx | 2 +- .../List/examples/List.Basic.Example.tsx | 4 +- .../List/examples/List.Ghosting.Example.tsx | 2 +- .../List/examples/List.Grid.Example.tsx | 6 +-- .../MarqueeSelection/MarqueeSelection.tsx | 14 ++--- .../MarqueeSelection/MarqueeSelectionPage.tsx | 2 +- .../MarqueeSelection.Basic.Example.tsx | 4 +- .../components/MessageBar/MessageBarPage.tsx | 2 +- .../src/components/Modal/Modal.tsx | 4 +- .../src/components/Modal/ModalPage.tsx | 2 +- .../Modal/examples/Modal.Basic.Example.tsx | 2 +- .../src/components/Nav/Nav.base.tsx | 4 +- .../src/components/Nav/NavPage.tsx | 2 +- .../Nav/examples/Nav.Basic.Example.tsx | 9 ++-- .../Nav/examples/Nav.ByKeys.Example.tsx | 2 +- .../examples/Nav.FabricDemoApp.Example.tsx | 5 +- .../Nav/examples/Nav.Nested.Example.tsx | 2 +- .../components/OverflowSet/OverflowSet.tsx | 2 +- .../OverflowSet/OverflowSetPage.tsx | 2 +- .../examples/OverflowSet.Basic.Example.tsx | 2 +- .../examples/OverflowSet.Custom.Example.tsx | 2 +- .../examples/OverflowSet.Vertical.Example.tsx | 2 +- .../src/components/Overlay/Overlay.base.tsx | 6 +-- .../src/components/Overlay/OverlayPage.tsx | 2 +- .../Overlay/examples/Overlay.Dark.Example.tsx | 2 +- .../examples/Overlay.Light.Example.tsx | 2 +- .../src/components/Panel/Panel.tsx | 6 +-- .../src/components/Panel/PanelPage.tsx | 2 +- .../Panel/examples/Panel.Custom.Example.tsx | 2 +- .../examples/Panel.ExtraLarge.Example.tsx | 2 +- .../Panel/examples/Panel.Footer.Example.tsx | 2 +- .../Panel.HiddenOnDismiss.Example.tsx | 2 +- .../Panel/examples/Panel.Large.Example.tsx | 2 +- .../examples/Panel.LargeFixed.Example.tsx | 2 +- .../examples/Panel.LightDismiss.Example.tsx | 2 +- .../Panel.LightDismissCustom.Example.tsx | 2 +- .../Panel/examples/Panel.Medium.Example.tsx | 2 +- .../Panel/examples/Panel.NonModal.Example.tsx | 2 +- .../examples/Panel.SmallFluid.Example.tsx | 2 +- .../examples/Panel.SmallLeft.Example.tsx | 2 +- .../examples/Panel.SmallRight.Example.tsx | 2 +- .../src/components/Persona/Persona.base.tsx | 2 +- .../src/components/Persona/PersonaPage.tsx | 2 +- .../examples/Persona.Alternate.Example.tsx | 2 +- .../examples/Persona.Basic.Example.tsx | 2 +- .../Persona.CustomCoinRender.Example.tsx | 2 +- .../examples/Persona.CustomRender.Example.tsx | 2 +- .../examples/Persona.Initials.Example.tsx | 2 +- .../src/components/Pivot/Pivot.tsx | 16 +++--- .../src/components/Pivot/PivotItem.tsx | 2 +- .../src/components/Pivot/PivotPage.tsx | 2 +- .../Pivot/examples/Pivot.Basic.Example.tsx | 2 +- .../Pivot/examples/Pivot.Fabric.Example.tsx | 2 +- .../examples/Pivot.IconCount.Example.tsx | 2 +- .../Pivot/examples/Pivot.Large.Example.tsx | 2 +- .../Pivot/examples/Pivot.OnChange.Example.tsx | 2 +- .../Pivot/examples/Pivot.Override.Example.tsx | 2 +- .../Pivot/examples/Pivot.Remove.Example.tsx | 2 +- .../Pivot/examples/Pivot.Separate.Example.tsx | 2 +- .../Pivot/examples/Pivot.Tabs.Example.tsx | 2 +- .../examples/Pivot.TabsLarge.Example.tsx | 2 +- .../src/components/Popup/Popup.tsx | 12 ++--- .../ProgressIndicatorPage.tsx | 2 +- .../ProgressIndicator.Basic.Example.tsx | 8 +-- ...rogressIndicator.Indeterminate.Example.tsx | 2 +- .../src/components/Rating/Rating.base.tsx | 8 +-- .../src/components/Rating/RatingPage.tsx | 2 +- .../Rating/examples/Rating.Basic.Example.tsx | 8 ++- .../ResizeGroup/ResizeGroup.base.tsx | 10 ++-- .../ResizeGroup/ResizeGroup.test.tsx | 2 +- .../ResizeGroup/ResizeGroupPage.tsx | 2 +- .../examples/ResizeGroup.FlexBox.Example.tsx | 2 +- .../ResizeGroup.OverflowSet.Example.tsx | 2 +- .../ScrollablePane/ScrollablePane.base.tsx | 10 ++-- .../ScrollablePane/ScrollablePanePage.tsx | 2 +- .../ScrollablePane.Default.Example.tsx | 6 +-- .../ScrollablePane.DetailsList.Example.tsx | 2 +- .../components/SearchBox/SearchBox.base.tsx | 2 +- .../components/SearchBox/SearchBoxPage.tsx | 2 +- .../examples/SearchBox.Disabled.Example.tsx | 2 +- .../examples/SearchBox.FullSize.Example.tsx | 2 +- .../examples/SearchBox.Small.Example.tsx | 2 +- .../examples/SearchBox.Underlined.Example.tsx | 2 +- .../src/components/Slider/Slider.tsx | 2 +- .../src/components/Slider/SliderPage.tsx | 2 +- .../Slider/examples/Slider.Basic.Example.tsx | 2 +- .../src/components/SpinButton/SpinButton.tsx | 4 +- .../components/SpinButton/SpinButtonPage.tsx | 2 +- .../examples/SpinButton.Basic.Example.tsx | 2 +- .../SpinButton.BasicDisabled.Example.tsx | 2 +- ...pinButton.BasicWithEndPosition.Example.tsx | 2 +- .../SpinButton.BasicWithIcon.Example.tsx | 2 +- ...inButton.BasicWithIconDisabled.Example.tsx | 2 +- .../SpinButton.CustomStyled.Example.tsx | 2 +- .../examples/SpinButton.Stateful.Example.tsx | 2 +- .../src/components/Spinner/Spinner.tsx | 2 +- .../src/components/Spinner/SpinnerPage.tsx | 2 +- .../examples/Spinner.Basic.Example.tsx | 2 +- .../src/components/Sticky/Sticky.tsx | 2 +- .../ColorPickerGridCell.base.tsx | 2 +- .../SwatchColorPicker.base.tsx | 4 +- .../SwatchColorPickerPage.tsx | 2 +- .../SwatchColorPicker.Basic.Example.tsx | 2 +- .../TeachingBubble/TeachingBubbleContent.tsx | 2 +- .../TeachingBubble/TeachingBubblePage.tsx | 2 +- .../examples/TeachingBubble.Basic.Example.tsx | 4 +- .../TeachingBubble.Condensed.Example.tsx | 4 +- .../TeachingBubble.Illustration.Example.tsx | 4 +- .../TeachingBubble.SmallHeadline.Example.tsx | 4 +- ...eachingBubble.WideIllustration.Example.tsx | 4 +- .../src/components/TextField/TextField.tsx | 18 +++---- .../components/TextField/TextFieldPage.tsx | 2 +- .../TextField.AllErrorMessage.Example.tsx | 2 +- .../TextField.AutoComplete.Example.tsx | 2 +- .../examples/TextField.Basic.Example.tsx | 2 +- .../examples/TextField.Borderless.Example.tsx | 2 +- .../TextField.CustomRender.Example.tsx | 2 +- .../TextField.ErrorMessage.Example.tsx | 2 +- .../examples/TextField.Icon.Example.tsx | 2 +- .../examples/TextField.Multiline.Example.tsx | 2 +- .../TextField.Placeholder.Example.tsx | 2 +- .../examples/TextField.Prefix.Example.tsx | 2 +- .../TextField.PrefixAndSuffix.Example.tsx | 2 +- .../examples/TextField.Suffix.Example.tsx | 2 +- .../examples/TextField.Underlined.Example.tsx | 2 +- .../src/components/Theme/ThemePage.tsx | 8 +-- .../ThemeGenerator/ThemeGeneratorPage.tsx | 6 +-- .../ThemeGenerator/ThemeRulesStandard.ts | 6 +-- .../src/components/Toggle/Toggle.tsx | 4 +- .../src/components/Toggle/TogglePage.tsx | 2 +- .../src/components/Tooltip/Tooltip.tsx | 4 +- .../src/components/Tooltip/TooltipHost.tsx | 4 +- .../src/components/Tooltip/TooltipPage.tsx | 2 +- .../examples/Tooltip.Basic.Example.tsx | 2 +- .../examples/Tooltip.Custom.Example.tsx | 2 +- .../examples/Tooltip.Overflow.Example.tsx | 4 +- .../src/components/pickers/BasePicker.tsx | 16 +++--- .../pickers/PeoplePicker/PeoplePicker.tsx | 14 +++-- .../SelectedItemWithMenu.tsx | 2 +- .../pickers/PeoplePicker/PeoplePickerPage.tsx | 2 +- .../src/components/pickers/PickersPage.tsx | 2 +- .../pickers/Suggestions/Suggestions.tsx | 12 ++--- .../Suggestions/SuggestionsController.ts | 6 +-- .../examples/Picker.CustomResult.Example.tsx | 6 +-- .../ComponentStatus/ComponentStatusPage.tsx | 10 ++-- .../src/demo/GettingStartedPage.tsx | 2 +- .../office-ui-fabric-react/src/demo/index.tsx | 20 ++++---- .../src/utilities/color/colors.ts | 22 +++++--- .../src/utilities/color/shades.ts | 15 +++--- .../contextualMenu/contextualMenuUtility.ts | 2 +- .../src/utilities/dateMath/DateMath.test.ts | 16 +++--- .../src/utilities/dateMath/DateMath.ts | 16 +++--- .../src/utilities/decorators/BaseDecorator.ts | 3 +- .../decorators/withContainsFocus.tsx | 12 ++--- .../decorators/withResponsiveMode.test.tsx | 2 +- .../decorators/withResponsiveMode.tsx | 8 +-- .../src/utilities/decorators/withViewport.tsx | 10 ++-- .../src/utilities/dragdrop/DragDropHelper.tsx | 14 ++--- .../src/utilities/grid/Grid.base.tsx | 8 +-- .../src/utilities/grid/GridCell.tsx | 2 +- .../src/utilities/positioning.test.ts | 4 +- .../src/utilities/positioning/positioning.ts | 16 +++--- .../positioning/positioning.types.ts | 7 +++ .../src/utilities/router/Router.tsx | 6 +-- .../src/utilities/selection/Selection.ts | 4 +- .../src/utilities/selection/SelectionPage.tsx | 2 +- .../selection/SelectionZone.test.tsx | 10 ++-- .../src/utilities/selection/SelectionZone.tsx | 29 ++++++----- .../examples/Selection.Basic.Example.tsx | 20 ++++---- scripts/templates/EmptyComponent.mustache | 2 +- 433 files changed, 975 insertions(+), 948 deletions(-) diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx index 38b5c98c5e03ad..103875380d1d90 100644 --- a/apps/fabric-website/src/components/App/App.tsx +++ b/apps/fabric-website/src/components/App/App.tsx @@ -27,7 +27,7 @@ export class App extends React.Component { }; } - public componentDidMount() { + public componentDidMount(): void { window.addEventListener('scroll', this._handleNavPositioning); window.addEventListener('resize', this._handleNavPositioning); @@ -35,12 +35,12 @@ export class App extends React.Component { this._handleNavPositioning(); } - public componentWillUnmount() { + public componentWillUnmount(): void { window.removeEventListener('scroll', this._handleNavPositioning); window.removeEventListener('resize', this._handleNavPositioning); } - public render() { + public render(): JSX.Element { let { navHeight } = this.state; let navPosition: 'fixed' | 'absolute' = this.state.isAttached ? 'fixed' : 'absolute'; let navStyle = { diff --git a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx index e5d8ce6a6f775d..4856de58c41120 100644 --- a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx +++ b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx @@ -49,7 +49,7 @@ export class CodeBlock extends React.Component this._onToggleClicked = this._onToggleClicked.bind(this); } - public render() { + public render(): JSX.Element { let { language, isCollapsible, isLightTheme, children } = this.props; let { isOpen } = this.state; diff --git a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx index ed7c3d59482b01..c8668c67451a79 100644 --- a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx +++ b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx @@ -14,7 +14,7 @@ export interface IColorTableState { } export class ColorTable extends React.Component { - public render() { + public render(): JSX.Element { let { content } = this.props; return ( diff --git a/apps/fabric-website/src/components/DOIcon/DOIcon.tsx b/apps/fabric-website/src/components/DOIcon/DOIcon.tsx index e212f0f6c8a389..631ad9ced549aa 100644 --- a/apps/fabric-website/src/components/DOIcon/DOIcon.tsx +++ b/apps/fabric-website/src/components/DOIcon/DOIcon.tsx @@ -12,7 +12,7 @@ export class DOIcon extends React.Component { ariaHidden: true }; - public render() { + public render(): JSX.Element { return (
    @@ -174,7 +174,7 @@ export class DONavigation extends React.Component { - public static defaultProps = { - role: 'menuitem' - }; + public static defaultProps = { + role: 'menuitem' + }; - public render() { - return ( - - { this._getIcon() } - { this.props.label } - - ); - } + public render(): JSX.Element { + return ( + + { this._getIcon() } + { this.props.label } + + ); + } - private _getIcon() { - if (this.props.icon) { - return ; - } + private _getIcon() { + if (this.props.icon) { + return ; } + } } \ No newline at end of file diff --git a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx index 8ffd0bba489422..0400353f9881d3 100644 --- a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx +++ b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx @@ -2,17 +2,17 @@ import * as React from 'react'; import './DOSearchBox.scss'; export class DOSearchBox extends React.Component<{}, {}> { - public render() { + public render(): JSX.Element { return (
    -
    -
    - - - -
    -
    -
    +
    +
    + + + +
    +
    +
    ); } } \ No newline at end of file diff --git a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx index 08879b64d9e0d2..3a317fd721b66c 100644 --- a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx +++ b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx @@ -26,7 +26,7 @@ export class IconGrid extends React.Component { }; } - public render() { + public render(): JSX.Element { let { icons } = this.props; let { searchQuery } = this.state; @@ -57,7 +57,7 @@ export class IconGrid extends React.Component { ); } - private _onSearchQueryChanged(newValue) { + private _onSearchQueryChanged(newValue): void { this.setState({ 'searchQuery': newValue }); diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index df836511d6eabd..04b96ff55fa1e3 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/apps/fabric-website/src/components/Nav/Nav.tsx @@ -14,7 +14,7 @@ export interface INavState { export class Nav extends React.Component { - public render() { + public render(): JSX.Element { let { pages } = this.props; if (!pages) { diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index bafc2d4ce182d4..d63bd6bfd626c8 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx @@ -71,7 +71,7 @@ export class PageHeader extends BaseComponent { link?: HTMLAnchorElement } = {}; - public componentDidMount() { + public componentDidMount(): void { this._eventListener = this._eventListener.bind(this); this._getBreakpoint = this._getBreakpoint.bind(this); this._els.link.addEventListener('click', this._eventListener); @@ -23,7 +23,7 @@ export class PageHeaderLink extends React.Component { this._getBreakpoint(); } - public render() { + public render(): JSX.Element { return ( { this._els.link = a; } } href={ this.props.href } data-title={ this.props.text }>{ this.props.text } ); @@ -41,7 +41,7 @@ export class PageHeaderLink extends React.Component { } } - private _eventListener(event) { + private _eventListener(event): void { event.preventDefault(); history.pushState({}, '', this._els.link.getAttribute('href')); let navigatorUserAgent = navigator.userAgent.toLowerCase(); diff --git a/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx b/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx index f2f143e825b2b6..4870ddee18ca03 100644 --- a/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx +++ b/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx @@ -10,7 +10,7 @@ export class AnimationCell extends React.Component { super(props); } - public render() { + public render(): JSX.Element { const name = this.props.data[0].value; const animClass = this.props.data[1].value; diff --git a/apps/fabric-website/src/components/Table/Table.tsx b/apps/fabric-website/src/components/Table/Table.tsx index a9bcf0d2b8edb6..0dd67f4f21d285 100644 --- a/apps/fabric-website/src/components/Table/Table.tsx +++ b/apps/fabric-website/src/components/Table/Table.tsx @@ -31,7 +31,7 @@ export class Table extends React.Component { this._windowEventHandler(); } - public render() { + public render(): JSX.Element { let { content } = this.props; return (this.state.currentBreakpoint === 'mobile' && this.props.responsive) ? this._renderMobile(content) : this._renderDesktop(content); } diff --git a/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx b/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx index 5012d58ed50d89..263ed46fa1d847 100644 --- a/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx +++ b/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx @@ -12,7 +12,7 @@ export interface IBlogItem { } export class BlogItem extends React.Component { - public render() { + public render(): JSX.Element { return (
    @@ -33,7 +33,7 @@ export class BlogItem extends React.Component { { this.props.title }

    - Posted by {this.props.author} + Posted by { this.props.author }

    { this.props.previewDescription } diff --git a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx index 686d320b7d8cab..0e70557dfb12d9 100644 --- a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx +++ b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx @@ -7,7 +7,7 @@ const styles: any = stylesImport; const blogData = require('../../data/blog-posts.json'); export class BlogPage extends React.Component { - public render() { + public render(): JSX.Element { return (

    diff --git a/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx b/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx index 9e93ead4f9383e..f2eb361ac72ad9 100644 --- a/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx +++ b/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx @@ -11,7 +11,7 @@ export class BlogPost extends React.Component<{}, {}> { this._postId = this._getParameterByName('id'); } - public render() { + public render(): JSX.Element { return (
    @@ -31,7 +31,7 @@ export class BlogPost extends React.Component<{}, {}> { ); } - private _getParameterByName(name: string, url?: string) { + private _getParameterByName(name: string, url?: string): string { if (!url) { url = window.location.href; } diff --git a/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx b/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx index 9f998585a05c85..d5a8b62c7b95e4 100644 --- a/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ActivityItemComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx b/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx index f4f9be714e055c..1f5c650f113be1 100644 --- a/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class BreadcrumbComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx b/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx index 6a3232b9b1f1b4..ddbd8862a50a40 100644 --- a/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ButtonComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx b/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx index 50bf399d2ee0fe..e69e2759099261 100644 --- a/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class CalendarComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx b/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx index dfe53b86345489..0f61628ccf9e25 100644 --- a/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class CalloutComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx b/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx index 0175c42a03ed8e..187ecf596d44cb 100644 --- a/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class CheckboxComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx b/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx index 4182b09dfb1a4e..53a58a52cad6ec 100644 --- a/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ChoiceGroupComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx index 6096e069887363..ee8ad6e087fac4 100644 --- a/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class CoachmarkComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx index 4c9bd0ba381062..864849d170daad 100644 --- a/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ColorPickerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx b/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx index d28667aeabcd03..b4c2fdebd414ab 100644 --- a/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ComboBoxComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx b/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx index 25be30d714a4fc..28b68e2bdf3930 100644 --- a/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class CommandBarComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx b/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx index bf17459fd3717b..a92bb1ac7e117c 100644 --- a/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx +++ b/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx @@ -4,7 +4,7 @@ import { ComponentPage, IComponentPageProps } from '../../components/ComponentPa const pageStyles: any = require('../PageStyles.module.scss'); export class ComponentUtilitiesPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx b/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx index 1532af2aed26a6..dcc0d0f29ba739 100644 --- a/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ContextualMenuComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx index 204c5dec1575f3..7528ff1215d4a2 100644 --- a/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class DatePickerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx b/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx index 2ac9254e714f83..76d78ee67c44c9 100644 --- a/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class DetailsListComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx b/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx index b3bf165e8e8d7a..37429d48ddf427 100644 --- a/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class DialogComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx b/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx index b1bae3dc7b2a97..5e5b0eef3d4cd5 100644 --- a/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class DocumentCardComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx b/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx index dac02d95e18f8c..ca5e93aab22086 100644 --- a/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class DropdownComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx b/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx index 3ed0df6639a622..3917a6b67f35b4 100644 --- a/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class FacepileComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx b/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx index c7e9b107a45f67..56124bb35f9067 100644 --- a/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx +++ b/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class FocusTrapZoneUtilityPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx b/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx index 961cdec0c6c040..4f19fe75087cd0 100644 --- a/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx +++ b/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class FocusZoneUtilityPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx b/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx index 9208478fa3ef96..65e087c4b323e1 100644 --- a/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class GroupedListComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx b/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx index 78139437bee796..cb46a0a86369d1 100644 --- a/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class HoverCardComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/IconComponentPage.tsx b/apps/fabric-website/src/pages/Components/IconComponentPage.tsx index 0357bd7b5cdc86..ed4bb74cfa756e 100644 --- a/apps/fabric-website/src/pages/Components/IconComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/IconComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class IconComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx b/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx index f8af3614d787e1..799e9db3e3cdc1 100644 --- a/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ImageComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx b/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx index f5760704309112..d3918096fc4e33 100644 --- a/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class LabelComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx b/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx index 21a3374c8f20b9..05813321385c93 100644 --- a/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class LayerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx b/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx index 2e09a43deffda0..2973b8d378c304 100644 --- a/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class LinkComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ListComponentPage.tsx b/apps/fabric-website/src/pages/Components/ListComponentPage.tsx index 991a8a3c799e23..2d61c08e874965 100644 --- a/apps/fabric-website/src/pages/Components/ListComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ListComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ListComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx b/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx index 9dde9e1fb0ee5d..364d4fc5052bd0 100644 --- a/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx +++ b/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class MarqueeSelectionUtilityPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx b/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx index d215e845f2ecf0..7099ae35adf875 100644 --- a/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class MessageBarComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx b/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx index a407a065e0a9ab..be0793d2b2eb17 100644 --- a/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ModalComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/NavComponentPage.tsx b/apps/fabric-website/src/pages/Components/NavComponentPage.tsx index dd0e8f5f59b2a0..dee5dec8a0d435 100644 --- a/apps/fabric-website/src/pages/Components/NavComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/NavComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class NavComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx b/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx index 7c21183bd950a6..7cae17323a2274 100644 --- a/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class OverflowSetComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx b/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx index 36e654cc461c86..050161847c3fa9 100644 --- a/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class OverlayComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx b/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx index 9e158348e4bfba..991071864bd814 100644 --- a/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class PanelComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx index a6570e9a22f00e..5c4a48a32ce800 100644 --- a/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class PeoplePickerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx b/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx index 6207c0bcaf1098..1bf3aab5a22bbc 100644 --- a/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class PersonaComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx b/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx index f94833f6f8e1dd..a3143da8bdd981 100644 --- a/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class PickersComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx b/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx index a991a20e89881a..1ed9a5c4ec33ad 100644 --- a/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class PivotComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx b/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx index 3d756d2edbc24c..4e5a7c942ee85e 100644 --- a/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ProgressIndicatorComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx b/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx index 268f915e2603b6..ea2119d9a12656 100644 --- a/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class RatingComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx b/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx index 5a11a629e2ce4b..da320c2385ce0d 100644 --- a/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ResizeGroupComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx b/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx index 9c3f68da7568d6..9a6e4ac8f1e6d0 100644 --- a/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ScrollablePaneComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx b/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx index 3ee30b89ea0a59..c1ac5e2ca8d6d8 100644 --- a/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SearchBoxComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx b/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx index 17e72e6f9ecff1..02fd6b09c5ec74 100644 --- a/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx +++ b/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SelectionUtilityPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx b/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx index 962688361f6bd4..ced2bb935516fd 100644 --- a/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SliderComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx b/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx index a43701393039af..86398034c23b75 100644 --- a/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SpinButtonComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx b/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx index a68576a591830d..18570a9f0f6726 100644 --- a/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SpinnerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx index e0377f11c6009d..c3028cb9720491 100644 --- a/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class SwatchColorPickerComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx b/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx index 750ccff7c794f1..a524b400189b55 100644 --- a/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class TeachingBubbleComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx b/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx index 481664c191be8a..a46d5f2871c29f 100644 --- a/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class TextFieldComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx b/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx index 81b0c766b8ee93..e5962ebab25e7f 100644 --- a/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx +++ b/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ThemesUtilityPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx b/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx index a9dd35ef267053..bc7d60d8b27c27 100644 --- a/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class ToggleComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx b/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx index 13fdb3ac613b9a..e0174926854afe 100644 --- a/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx +++ b/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx @@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage'; const pageStyles: any = require('../PageStyles.module.scss'); export class TooltipComponentPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx index 2818756338b6d3..3fed74a80af96b 100644 --- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx +++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx @@ -12,7 +12,7 @@ const corePackageData = require('../../../node_modules/office-ui-fabric-core/pac const corePackageVersion: string = corePackageData && corePackageData.version || '9.2.0'; export class GetStartedPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx index 0f2371b9ef90e1..ff14f47e1a4d1d 100644 --- a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx +++ b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx @@ -5,7 +5,7 @@ const styles: any = stylesImport; const pageStyles: any = require('../PageStyles.module.scss'); export class AngularJSPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx index a54ec3b47229eb..000f457820c06b 100644 --- a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx +++ b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx @@ -4,7 +4,7 @@ const styles: any = stylesImport; const pageStyles: any = require('../PageStyles.module.scss'); export class FabricIOSPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx index c46e45ddacf0f5..1ad71bac883143 100644 --- a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx +++ b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx @@ -4,7 +4,7 @@ import * as stylesImport from './Interstitials.module.scss'; const styles: any = stylesImport; export class FabricJSPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx index 1c1662094b730a..2936b7836c7856 100644 --- a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx +++ b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx @@ -5,7 +5,7 @@ import * as stylesImport from './Overviews.module.scss'; const styles: any = stylesImport; export class ComponentsPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx index e1351d495aba69..ac995196cf9c7e 100644 --- a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx +++ b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx @@ -5,7 +5,7 @@ import * as stylesImport from './Overviews.module.scss'; const styles: any = stylesImport; export class StylesPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx index cfc7cbd4d10461..352163683d80f4 100644 --- a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx +++ b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx @@ -6,7 +6,7 @@ const styles: any = stylesImport; const pageStyles: any = require('../PageStyles.module.scss'); export class ResourcesPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { let productIcons = productIconsData; let documentIcons = documentIconsData; diff --git a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx index 62125bd95e0928..37c8d071211833 100644 --- a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx +++ b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx @@ -13,7 +13,7 @@ const neutralColorsData = require('../../../data/colors-neutral.json'); const themeColorsData = require('../../../data/colors-theme.json'); export class ColorsPage extends React.Component { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return (
    diff --git a/apps/fabric-website/src/root.tsx b/apps/fabric-website/src/root.tsx index ed574ac555f439..50406003b832db 100644 --- a/apps/fabric-website/src/root.tsx +++ b/apps/fabric-website/src/root.tsx @@ -59,7 +59,7 @@ function _hasAnchorLink(path: string): boolean { return (path.match(/#/g) || []).length > 1; } -function _extractAnchorLink(path) { +function _extractAnchorLink(path): string { let split = path.split('#'); let cleanedSplit = split.filter((value) => { if (value === '') { @@ -136,7 +136,7 @@ if (isReady) { window.onunload = _onUnload; -function addCSSToHeader(fileName: string) { +function addCSSToHeader(fileName: string): void { let headEl = document.head; let linkEl = document.createElement('link'); diff --git a/apps/fabric-website/src/utilities/data.ts b/apps/fabric-website/src/utilities/data.ts index 0966eb30aff807..0cdf67f593ad05 100644 --- a/apps/fabric-website/src/utilities/data.ts +++ b/apps/fabric-website/src/utilities/data.ts @@ -5,9 +5,9 @@ const LOREM_IPSUM = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit, s 'mollit anim id est laborum').split(' '); const DATA = { - 'color' : [ 'red', 'blue', 'green', 'yellow' ], - 'shape' : [ 'circle', 'square', 'triangle' ], - 'location' : [ 'Seattle', 'New York', 'Chicago', 'Los Angeles', 'Portland' ] + 'color': ['red', 'blue', 'green', 'yellow'], + 'shape': ['circle', 'square', 'triangle'], + 'location': ['Seattle', 'New York', 'Chicago', 'Los Angeles', 'Portland'] }; export function createListItems(count: number, startIndex = 0): any { @@ -17,7 +17,7 @@ export function createListItems(count: number, startIndex = 0): any { let aspectRatio = width / height; return { - thumbnail: `//placekitten.com/${ Math.round(75 * aspectRatio) }/${ 75 }`, + thumbnail: `//placekitten.com/${Math.round(75 * aspectRatio)}/${75}`, key: 'item-' + (index + startIndex) + ' ' + lorem(4), name: lorem(5), description: lorem(10 + Math.round(Math.random() * 50)), @@ -42,7 +42,7 @@ export function isGroupable(key: string): boolean { key === 'location'; } -function _randWord(array: string[]) { +function _randWord(array: string[]): string { let index = Math.floor(Math.random() * array.length); return array[index]; } diff --git a/ghdocs/BestPractices/ComponentDesign.md b/ghdocs/BestPractices/ComponentDesign.md index d5874979e68448..5368c017587def 100644 --- a/ghdocs/BestPractices/ComponentDesign.md +++ b/ghdocs/BestPractices/ComponentDesign.md @@ -200,12 +200,12 @@ class Foo extends BaseComponent<...> { // Create the reference object that will be used for setting and accessing the reference private _root = createRef(); - public render() { + public render(): JSX.Element { // Set the reference by passing the reference object as the ref prop return
    diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx index e2331ecdc8533e..7243b2bdcc3dc0 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx @@ -20,7 +20,7 @@ const BreadcrumbStaticExampleCode = require( ) as string; export class BreadcrumbPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { super(props); } - public render() { + public render(): JSX.Element { const customDivider = () => *; return ( @@ -72,7 +72,7 @@ export class BreadcrumbBasicExample extends React.Component { ); } - private _onBreadcrumbItemClicked = (ev: React.MouseEvent, item: IBreadcrumbItem) => { + private _onBreadcrumbItemClicked = (ev: React.MouseEvent, item: IBreadcrumbItem): void => { console.log(`Breadcrumb item with key "${item.key}" has been clicked.`); } diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx index 286ee8146c5965..fe371bfcee2c40 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx @@ -5,7 +5,7 @@ import { export class BreadcrumbStaticExample extends React.Component { - public render() { + public render(): JSX.Element { return (
    , item: IBreadcrumbItem) => { + private _onBreadcrumbItemClicked = (ev: React.MouseEvent, item: IBreadcrumbItem): void => { console.log(`Breadcrumb item with key "${item.key}" has been clicked.`); } diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx index c99913121c9777..da778847a2dd14 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx @@ -12,7 +12,7 @@ export class ActionButton extends BaseComponent { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { const { styles, theme } = this.props; return ( 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 0dab432606f612..5c350017e24df3 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -39,9 +39,8 @@ export class BaseButton extends BaseComponent = { baseClassName: 'ms-Button', - classNames: {}, styles: {}, split: false, }; diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.tsx index 930d80d749e669..17a4c5764e144d 100644 --- a/packages/office-ui-fabric-react/src/components/Button/Button.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/Button.tsx @@ -26,7 +26,7 @@ export class Button extends BaseComponent { ); } - public render() { + public render(): JSX.Element { const props = this.props; switch (props.buttonType) { diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx index 89e84a86343f3a..894e13ef4646c8 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx @@ -67,7 +67,7 @@ export class ButtonPage extends React.Component, disabled: boolean) { + private _onDisabledChanged(ev: React.MouseEvent, disabled: boolean): void { this.setState({ areButtonsDisabled: disabled }); } - private _onToggledChanged(ev: React.MouseEvent, toggled: boolean) { + private _onToggledChanged(ev: React.MouseEvent, toggled: boolean): void { this.setState({ areButtonsChecked: toggled }); diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx index c5b55c2678e0d3..d2a94188f742ca 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx @@ -11,7 +11,7 @@ export class CommandBarButton extends BaseComponent { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { const { styles, theme } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx index 96cd9e73660a7e..96aaf94ed664da 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx @@ -11,7 +11,7 @@ export class CompoundButton extends BaseComponent { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { const { primary = false, styles, theme } = this.props; return ( { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { const { primary = false, styles, theme } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx index 775ecceba5cc6d..6612ed87bfa050 100644 --- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx @@ -11,7 +11,7 @@ export class IconButton extends BaseComponent { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { const { styles, theme } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx index c59d000ab98a12..3c5e0345f04230 100644 --- a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx @@ -7,7 +7,7 @@ import { getStyles } from './MessageBarButton.styles'; @customizable('MessageBarButton', ['theme']) export class MessageBarButton extends BaseComponent { - public render() { + public render(): JSX.Element { const { styles, theme } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx index c633f9c4a70317..58ec54fcdb1a7d 100644 --- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx @@ -10,7 +10,7 @@ export class PrimaryButton extends BaseComponent { */ protected _shouldUpdateComponentRef = false; - public render() { + public render(): JSX.Element { return ( { super(props); } - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx index 09a462ec6a6881..5bdbe2a5a8917f 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx @@ -11,7 +11,7 @@ import { } from 'office-ui-fabric-react/lib/Button'; export class ButtonAnchorExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx index 4617d5420cb864..acbdf45e089d83 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CommandButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonCommandExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx index c1ba4cf8657597..295b9974150eb4 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CommandBarButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonCommandBarExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx index 19a42f41c4c630..bd284ccc3d3f57 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx @@ -16,7 +16,7 @@ export class ButtonCompoundExample extends React.Component { super(props); } - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx index a90f12afb5b428..5675c885040d41 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonContextualMenuExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx index 7e145591eefde6..83de1f76fa67fc 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx @@ -9,7 +9,7 @@ import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { Label } from 'office-ui-fabric-react/lib/Label'; export class ButtonDefaultExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx index 02ec95de01f36e..135731af037726 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx @@ -8,7 +8,7 @@ import { import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonIconExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx index fcc150fa3fd136..253e75f431bc89 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx @@ -8,7 +8,7 @@ import { import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonPrimaryExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx index ceccbf0b51c1df..5cd9502c361f75 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx @@ -8,7 +8,7 @@ import { import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonScreenReaderExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx index 3ab322885eda6c..63ae1632d8ccf7 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx @@ -15,7 +15,7 @@ const alertClicked = (): void => { export class ButtonSplitExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); @@ -139,7 +139,7 @@ export class ButtonSplitExample extends React.Component { export class ButtonSplitCustomExample extends React.Component { - public render() { + public render(): JSX.Element { const { disabled, checked } = this.props; const customSplitButtonStyles = getCustomSplitButtonStyles(); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx index e91de6bf13f39a..80061d9aa3dee9 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx @@ -39,7 +39,7 @@ export class ButtonSwapExample extends React.Component impl this._focusOnUpdate = false; } - public componentWillReceiveProps(nextProps: ICalendarProps) { + public componentWillReceiveProps(nextProps: ICalendarProps): void { const { autoNavigateOnSelection, value, today = new Date() } = nextProps; // Make sure auto-navigation is supported for programmatic changes to selected date, i.e., @@ -109,7 +109,7 @@ export class Calendar extends BaseComponent impl }); } - public componentDidUpdate() { + public componentDidUpdate(): void { if (this._focusOnUpdate) { // if the day picker is shown, focus on it if (this._dayPicker.current) { @@ -121,7 +121,7 @@ export class Calendar extends BaseComponent impl } } - public render() { + public render(): JSX.Element { const rootClass = 'ms-DatePicker'; const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; 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 7907ad60de58e5..60cafbab4a897f 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -95,13 +95,13 @@ export class CalendarDay extends BaseComponent 0) { @@ -347,7 +347,7 @@ export class CalendarDay extends BaseComponent, date: Date, weekIndex: number, dayIndex: number) { + private _navigateMonthEdge(ev: React.KeyboardEvent, date: Date, weekIndex: number, dayIndex: number): void { const { minDate, maxDate } = this.props; let targetDate: Date | undefined = undefined; 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 c8058f76f7898c..6dcb4823161821 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx @@ -52,7 +52,7 @@ export class CalendarMonth extends BaseComponent { this._onSelectMonth = this._onSelectMonth.bind(this); } - public render() { + public render(): JSX.Element { const { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; const leftNavigationIcon = navigationIcons.leftNavigation; @@ -157,7 +157,7 @@ export class CalendarMonth extends BaseComponent { } } - private _isCurrentMonth(month: number, year: number, today: Date) { + private _isCurrentMonth(month: number, year: number, today: Date): boolean { return today.getFullYear() === year && today.getMonth() === month; } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx index 3ceb6f92b25eaf..3beb5f7fc49148 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx @@ -17,7 +17,7 @@ const CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/sr const CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx') as string; export class CalendarPage extends React.Component { - public render() { + public render(): JSX.Element { const today = new Date(Date.now()); return (
    this._calendarButtonElement = calendarBtn! }> @@ -134,21 +134,21 @@ export class CalendarButtonExample extends React.Component { prevState.showCalendar = !prevState.showCalendar; return prevState; }); } - private _onDismiss() { + private _onDismiss(): void { this.setState((prevState: ICalendarButtonExampleState) => { prevState.showCalendar = false; return prevState; }); } - private _onSelectDate(date: Date) { + private _onSelectDate(date: Date): void { this.setState((prevState: ICalendarButtonExampleState) => { prevState.showCalendar = false; prevState.selectedDate = date; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx index d6819cbc42f4c7..ab0091063ea14e 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx @@ -98,7 +98,7 @@ export class CalendarInlineExample extends React.Component { return prevState; }); } - private _goPrevious() { + private _goPrevious(): void { this.setState((prevState: ICalendarInlineExampleState) => { const selectedDate = prevState.selectedDate || new Date(); const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); @@ -185,7 +185,7 @@ export class CalendarInlineExample extends React.Component { const selectedDate = prevState.selectedDate || new Date(); const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); @@ -197,7 +197,7 @@ export class CalendarInlineExample extends React.Component { return { selectedDate: date, diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx index 72b35098346be0..737428170c92b7 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx @@ -17,7 +17,7 @@ export class Callout extends BaseComponent { }); } - public render() { + public render(): JSX.Element { const content = ( ); 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 6ebad2fb222fdf..807243c1ca152d 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 @@ -112,7 +112,7 @@ export class CalloutContentBase extends BaseComponent this._updatePosition()); } @@ -323,7 +323,7 @@ export class CalloutContentBase extends BaseComponent { - public render() { + public render(): JSX.Element { const cmdBarParamsTextAndIcons: any = { items: items, farItems: null }; return ( 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 2e1e81f02ac389..a3c3f641730fdc 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 @@ -60,7 +60,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl }; } - public render() { + public render(): JSX.Element { const { isCalloutVisible } = this.state; return ( @@ -103,13 +103,13 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl ); } - private _onShowMenuClicked = () => { + private _onShowMenuClicked = (): void => { this.setState({ isCalloutVisible: !this.state.isCalloutVisible }); } - private _onCalloutDismiss = () => { + private _onCalloutDismiss = (): void => { this.setState({ isCalloutVisible: false }); diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx index 7ab156a067e62d..9766fe9c334e9f 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx @@ -42,7 +42,7 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl }; } - public render() { + public render(): JSX.Element { const { isCalloutVisible, directionalHint } = this.state; // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge. return ( @@ -90,17 +90,17 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl ); } - private _onDismiss() { + private _onDismiss(): void { this.setState({ isCalloutVisible: false }); } - private _onShowMenuClicked() { + private _onShowMenuClicked(): void { this.setState({ isCalloutVisible: !this.state.isCalloutVisible }); } - private _onDirectionalChanged(option: IDropdownOption) { + private _onDirectionalChanged(option: IDropdownOption): void { this.setState({ directionalHint: option.key as number }); diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx index d919a218c33834..3b15711380102c 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx @@ -47,7 +47,7 @@ export class CalloutDirectionalExample extends React.Component<{}, ICalloutDirec }; } - public render() { + public render(): JSX.Element { const { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state; // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge. return ( diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx index f314cac7c8e3eb..ab4ab4ba1bee5b 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx @@ -23,7 +23,7 @@ export class CalloutNestedExample extends React.Component { checked: false }; - public shouldComponentUpdate(newProps: ICheckProps) { + public shouldComponentUpdate(newProps: ICheckProps): boolean { return this.props.checked !== newProps.checked; } diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx index f0e66f2cc175f3..30888e2f88819e 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx @@ -49,7 +49,7 @@ export class Checkbox extends BaseComponent impl }; } - public componentWillReceiveProps(newProps: ICheckboxProps) { + public componentWillReceiveProps(newProps: ICheckboxProps): void { if (newProps.checked !== undefined) { this.setState({ isChecked: !!newProps.checked // convert null to false diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx index e67cde07ec413f..c9062e45d831bf 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx @@ -15,7 +15,7 @@ const CheckboxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src const CheckboxImplementationExamplesCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx') as string; export class CheckboxPage extends React.Component { - public render() { + public render(): JSX.Element { return ( , isChecked: boolean) { + private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean): void { console.log(`The option has been changed to ${isChecked}.`); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx index 16c81e39d6bf7e..63356f64380672 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx @@ -25,7 +25,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo this._onCheckboxChange = this._onCheckboxChange.bind(this); } - public render() { + public render(): JSX.Element { const { isChecked } = this.state; const styles: ICheckboxStyles = { @@ -91,7 +91,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo ); } - private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean) { + private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean): void { console.log(`The option has been changed to ${isChecked}.`); } @@ -99,7 +99,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo this.setState({ isChecked: checked! }); } - private _renderPersonaLabel(props: ICheckboxProps) { + private _renderPersonaLabel(props: ICheckboxProps): JSX.Element { const DEFAULT_IMAGE_URL = '/_layouts/15/userphoto.aspx?size=S&accountname='; return ; } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx index 3fc63e618ebafa..d08aa2d6fcaead 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -50,7 +50,7 @@ export class ChoiceGroup extends BaseComponent) { + private _onChange(option: IChoiceGroupOption, evt: React.FormEvent): void { const { onChanged, onChange, selectedKey } = this.props; // Only manage state in uncontrolled scenarios. diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx index 798775ff1eb486..4c02dc4057ab0a 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx @@ -19,7 +19,7 @@ const ChoiceGroupImageExampleCode = require('!raw-loader!office-ui-fabric-react/ const ChoiceGroupIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx') as string; export class ChoiceGroupPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { return ( , option: IChoiceGroupOption) { + private _onImageChoiceGroupChange(ev: React.SyntheticEvent, option: IChoiceGroupOption): void { this.setState({ selectedKey: option.key }); diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx index ef8869b4ddd808..190d570f0490d5 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx @@ -48,13 +48,13 @@ export class ColorPicker extends BaseComponent { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { return ( diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 6e6e35825d4fa2..977b1261608e93 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { IComboBoxOption, IComboBoxProps } from './ComboBox.types'; +import { IComboBoxOption, IComboBoxProps, IComboBoxOptionStyles } from './ComboBox.types'; import { DirectionalHint } from '../../common/DirectionalHint'; import { Callout } from '../../Callout'; import { Label } from '../../Label'; import { Checkbox } from '../../Checkbox'; import { CommandButton, - IconButton + IconButton, + IButtonStyles } from '../../Button'; import { IAutofill, Autofill } from '../Autofill/index'; import { @@ -88,11 +89,11 @@ interface IComboBoxOptionWrapperProps extends IComboBoxOption { // This is used to customize when we want to rerender components, // so we don't rerender every option every time render is executed class ComboBoxOptionWrapper extends React.Component { - public render() { + public render(): React.ReactNode { return this.props.children; } - public shouldComponentUpdate(newProps: IComboBoxOptionWrapperProps) { + public shouldComponentUpdate(newProps: IComboBoxOptionWrapperProps): boolean { // The children will always be different, so we ignore that prop return !shallowCompare({ ...this.props, children: undefined }, { ...newProps, children: undefined }); } @@ -188,12 +189,12 @@ export class ComboBox extends BaseComponent { }; } - public componentDidMount() { + public componentDidMount(): void { // hook up resolving the options if needed on focus this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true); } - public componentWillReceiveProps(newProps: IComboBoxProps) { + public componentWillReceiveProps(newProps: IComboBoxProps): void { // Update the selectedIndex and currentOptions state if // the selectedKey, value, or options have changed if (newProps.selectedKey !== this.props.selectedKey || @@ -270,7 +271,7 @@ export class ComboBox extends BaseComponent { } } - public componentWillUnmount() { + public componentWillUnmount(): void { super.componentWillUnmount(); // remove the eventHanlder that was added in componentDidMount @@ -278,7 +279,7 @@ export class ComboBox extends BaseComponent { } // Primary Render - public render() { + public render(): JSX.Element { const id = this._id; const { className, @@ -582,7 +583,7 @@ export class ComboBox extends BaseComponent { * allows freeform entry * @param updatedValue - the input's newly changed value */ - private _processInputChangeWithFreeform(updatedValue: string) { + private _processInputChangeWithFreeform(updatedValue: string): void { const { currentOptions } = this.state; @@ -639,7 +640,7 @@ export class ComboBox extends BaseComponent { * does not allow freeform entry * @param updatedValue - the input's newly changed value */ - private _processInputChangeWithoutFreeform(updatedValue: string) { + private _processInputChangeWithoutFreeform(updatedValue: string): void { const { currentPendingValue, currentPendingValueValidIndex, @@ -750,7 +751,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to set (or the index to set from if a search direction is provided) * @param searchDirection - the direction to search along the options from the given index */ - private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none) { + private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none): void { const { onChanged, onPendingValueChanged } = this.props; const { currentOptions } = this.state; let { selectedIndices } = this.state; @@ -882,7 +883,7 @@ export class ComboBox extends BaseComponent { /** * Submit a pending value if there is one */ - private _submitPendingValue(submitPendingValueEvent: any) { + private _submitPendingValue(submitPendingValueEvent: any): void { const { onChanged, allowFreeform, @@ -1187,7 +1188,7 @@ export class ComboBox extends BaseComponent { /** * Scroll the selected element into view */ - private _scrollIntoView() { + private _scrollIntoView(): void { const { onScrollToItem, scrollSelectedToTop @@ -1295,7 +1296,7 @@ export class ComboBox extends BaseComponent { * and setting the suggested display value to the last * selected state text */ - private _resetSelectedIndex() { + private _resetSelectedIndex(): void { const { currentOptions } = this.state; @@ -1320,7 +1321,7 @@ export class ComboBox extends BaseComponent { /** * Clears the pending info state */ - private _clearPendingInfo() { + private _clearPendingInfo(): void { this._setPendingInfo('' /* suggestedDisplayValue */, -1 /* currentPendingValueValidIndex */, '' /* currentPendingValue */); } @@ -1330,7 +1331,7 @@ export class ComboBox extends BaseComponent { * @param currentPendingValueValidIndex - new pending value index to set * @param suggestedDisplayValue - new suggest display value to set */ - private _setPendingInfo(currentPendingValue: string, currentPendingValueValidIndex: number, suggestedDisplayValue: string) { + private _setPendingInfo(currentPendingValue: string, currentPendingValueValidIndex: number, suggestedDisplayValue: string): void { this.setState({ currentPendingValue: currentPendingValue, currentPendingValueValidIndex: currentPendingValueValidIndex, @@ -1343,7 +1344,7 @@ export class ComboBox extends BaseComponent { * Set the pending info from the given index * @param index - the index to set the pending info from */ - private _setPendingInfoFromIndex(index: number) { + private _setPendingInfoFromIndex(index: number): void { const { currentOptions } = this.state; @@ -1362,7 +1363,7 @@ export class ComboBox extends BaseComponent { * @param index - the index to search from * @param searchDirection - the direction to search */ - private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection) { + private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection): void { const { currentOptions } = this.state; @@ -1396,7 +1397,7 @@ export class ComboBox extends BaseComponent { } } - private _notifyPendingValueChanged(prevState: IComboBoxState) { + private _notifyPendingValueChanged(prevState: IComboBoxState): void { const { onPendingValueChanged } = this.props; if (!onPendingValueChanged) { @@ -1434,7 +1435,7 @@ export class ComboBox extends BaseComponent { /** * Sets the isOpen state and updates focusInputAfterClose */ - private _setOpenStateAndFocusOnClose(isOpen: boolean, focusInputAfterClose: boolean) { + private _setOpenStateAndFocusOnClose(isOpen: boolean, focusInputAfterClose: boolean): void { this._focusInputAfterClose = focusInputAfterClose; this.setState({ isOpen: isOpen @@ -1645,7 +1646,7 @@ export class ComboBox extends BaseComponent { ev.preventDefault(); } - private _onOptionMouseEnter(index: number) { + private _onOptionMouseEnter(index: number): void { if (!this._isScrollIdle) { return; } @@ -1655,7 +1656,7 @@ export class ComboBox extends BaseComponent { }); } - private _onOptionMouseMove(index: number) { + private _onOptionMouseMove(index: number): void { if (!this._isScrollIdle || this.state.currentPendingValueValidIndexOnHover === index) { return; } @@ -1680,7 +1681,7 @@ export class ComboBox extends BaseComponent { * eating the required key event when disabled * @param ev - the keyboard event that was fired */ - private _handleInputWhenDisabled(ev: React.KeyboardEvent | null) { + private _handleInputWhenDisabled(ev: React.KeyboardEvent | null): void { // If we are disabled, close the menu (if needed) // and eat all keystokes other than TAB or ESC if (this.props.disabled) { @@ -1729,7 +1730,7 @@ export class ComboBox extends BaseComponent { * Get the styles for the current option. * @param item Item props for the current option */ - private _getCaretButtonStyles() { + private _getCaretButtonStyles(): IButtonStyles { const { caretDownButtonStyles: customCaretDownButtonStyles } = this.props; return getCaretDownButtonStyles(this.props.theme!, customCaretDownButtonStyles); } @@ -1738,7 +1739,7 @@ export class ComboBox extends BaseComponent { * Get the styles for the current option. * @param item Item props for the current option */ - private _getCurrentOptionStyles(item: IComboBoxOption) { + private _getCurrentOptionStyles(item: IComboBoxOption): Partial { const { comboBoxOptionStyles: customStylesForAllOptions } = this.props; const { styles: customStylesForCurrentOption } = item; diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx index 4417240e41de04..264a0698ee632e 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx @@ -15,7 +15,7 @@ const ComboBoxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src const ComboBoxCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx') as string; export class ComboBoxPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { + private _basicComboBoxComponentRef = (component: IComboBox): void => { this._basicCombobox = component; } } diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx index 6f1ae3b4568995..134d4fecc1978f 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx @@ -45,7 +45,7 @@ export class ComboBoxCustomStyledExample extends React.Component { }, ]; - public render() { + public render(): JSX.Element { return (
    @@ -310,7 +310,7 @@ export class CommandBar extends BaseComponent; } - private _asyncMeasure() { + private _asyncMeasure(): void { this._async.requestAnimationFrame(() => { this._updateItemMeasurements(); this._updateRenderedItems(); }); } - private _updateItemMeasurements() { + private _updateItemMeasurements(): void { // the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5 if (this._overflow.current || (this.props.overflowItems && this.props.overflowItems.length)) { this._overflowWidth = OVERFLOW_WIDTH; @@ -354,7 +354,7 @@ export class CommandBar extends BaseComponent { - public render() { + public render(): JSX.Element { const cmdBarParamsTextAndIcons: any = { items, overflowItems, farItems }; return ( diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx index 85e85d209c54a6..43d2d538c1abe5 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx @@ -15,7 +15,7 @@ export class CommandBarBasicExample extends React.Component { }; } - public render() { + public render(): JSX.Element { const { items, overflowItems, farItems } = this.props; const { isSearchBoxVisible: searchBoxVisible, diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx index 0567f01908c54c..d13168457c96e3 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx @@ -17,7 +17,7 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr this.state = { isContextMenuShown: false }; } - public render() { + public render(): JSX.Element { return (
    { + private _renderSplitButtonMenuItem = (item: IContextualMenuItem): JSX.Element => { const darkerBG = this.state.isContextMenuShown && styles.darkerBG; const dropDownButtonClass = css( diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx index 47ede9e27af466..49c7bab72c934e 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx @@ -3,7 +3,7 @@ import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; import { itemsNonFocusable, farItemsNonFocusable } from './data-nonFocusable'; export class CommandBarNonFocusableItemsExample extends React.Component { - public render() { + public render(): JSX.Element { return (
    { // Alter the Layer's prototype so that we can confirm that it mounts before the contextualmenu mounts. /* tslint:disable:no-function-expression */ - Layer.prototype.componentDidMount = function (componentDidMount) { - return function () { + Layer.prototype.componentDidMount = function (componentDidMount): () => void { + return function (): void { if (menuMounted) { menuMountedFirst = true; } diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index bf64647c86c86c..447d4f49ecd82d 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -125,7 +125,7 @@ export class ContextualMenu extends BaseComponent { - public render() { + public render(): JSX.Element { return ( , item?: IContextualMenuItem) { + private _onToggleSelect(ev?: React.MouseEvent, item?: IContextualMenuItem): void { const { selection } = this.state; ev!.preventDefault(); selection![item!.key] = !selection![item!.key]; diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx index 583e6a1b07f03f..0bfb64cf8baad0 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx @@ -13,7 +13,7 @@ export class ContextualMenuWithCustomMenuItemExample extends React.Component { }; } - public render() { + public render(): JSX.Element { return (
    { - public render() { + public render(): JSX.Element { return ( ); } - private _renderCategoriesList(item: any) { + private _renderCategoriesList(item: any): JSX.Element { return (
    • diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx index d41009e19f630b..5d00adf7062e89 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx @@ -5,7 +5,7 @@ import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; import './ContextualMenuExample.scss'; export class ContextualMenuCustomizationWithNoWrapExample extends React.Component<{}, {}> { - public render() { + public render(): JSX.Element { return (
    • diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx index 648b0603fec524..f39a3420d171ff 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx @@ -49,7 +49,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte }; } - public render() { + public render(): JSX.Element { const { beakWidth, directionalHint, diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx index 779121c596699a..5d0b3f390c4ff1 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx @@ -4,7 +4,7 @@ import './ContextualMenuExample.scss'; export class ContextualMenuHeaderExample extends React.Component<{}, {}> { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { return (
      diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx index 32e29248112f4b..d238d599c7f650 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx @@ -140,7 +140,7 @@ export class DatePicker extends BaseComponent { - public render() { + public render(): JSX.Element { return ( { + private _onDropdownChanged = (option: IDropdownOption): void => { this.setState({ firstDayOfWeek: (DayOfWeek as any)[option.key] }); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx index 5d35cf465b4ece..25a76aa132e933 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx @@ -100,7 +100,7 @@ export class DetailsHeader extends BaseComponent) { + private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent): void { const { onColumnAutoResized, columns } = this.props; if (onColumnAutoResized) { onColumnAutoResized(columns[columnIndex], columnIndex); @@ -556,7 +556,7 @@ export class DetailsHeader extends BaseComponent) { + private _onColumnClick(column: IColumn, ev: React.MouseEvent): void { const { onColumnClick } = this.props; if (column.onColumnClick) { @@ -578,7 +578,7 @@ export class DetailsHeader extends BaseComponent) { + private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent): void { const { onColumnContextMenu } = this.props; if (column.onColumnContextMenu) { @@ -594,7 +594,7 @@ export class DetailsHeader extends BaseComponent) { +function stopPropagation(ev: React.MouseEvent): void { ev.stopPropagation(); } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx index 821484d29930e5..acd4fd42ca8c01 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx @@ -152,7 +152,7 @@ export class DetailsList extends BaseComponent) { + private _onHeaderKeyDown(ev: React.KeyboardEvent): void { if (ev.which === KeyCodes.down) { if (this._focusZone.current && this._focusZone.current.focus()) { ev.preventDefault(); @@ -519,7 +519,7 @@ export class DetailsList extends BaseComponent) { + private _onContentKeyDown(ev: React.KeyboardEvent): void { if (ev.which === KeyCodes.up && !ev.altKey) { if (this._header.current && this._header.current.focus()) { ev.preventDefault(); @@ -541,7 +541,7 @@ export class DetailsList extends BaseComponent { + this._async.setTimeout((): void => { row.focus(forceIntoFirstElement); }, 0); } - private _onRowWillUnmount(row: DetailsRow) { + private _onRowWillUnmount(row: DetailsRow): void { const { onRowWillUnmount } = this.props; const { item, itemIndex } = row.props; @@ -583,7 +583,7 @@ export class DetailsList extends BaseComponent { - const newColumn = assign({}, column, this._columnOverrides[column.key]); + const newColumn: IColumn = assign({}, column, this._columnOverrides[column.key]); if (!newColumn.calculatedWidth) { newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH; @@ -692,7 +692,7 @@ export class DetailsList extends BaseComponent) { + private _onActiveRowChanged(el?: HTMLElement, ev?: React.FocusEvent): void { const { items, onActiveItemChanged } = this.props; if (!el) { @@ -839,7 +839,7 @@ export class DetailsList extends BaseComponent) { + private _onBlur(event: React.FocusEvent): void { this.setState({ focusedItemIndex: -1 }); @@ -903,7 +903,7 @@ export function buildColumns( return columns; } -function isRightArrow(event: React.KeyboardEvent) { +function isRightArrow(event: React.KeyboardEvent): boolean { return event.which === getRTLSafeKeyCode(KeyCodes.right); } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx index 5a336f5651adf5..bd7d0addb188ee 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx @@ -40,7 +40,7 @@ import { DetailsListNavigatingFocusExample } from './examples/DetailsList.Naviga const DetailsListNavigatingFocusExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx') as string; export class DetailsListPage extends React.Component { - public render() { + public render(): JSX.Element { return ( void} onMeasureDone (the call back function when finish measure) */ - public measureCell(index: number, onMeasureDone: (width: number) => void) { + public measureCell(index: number, onMeasureDone: (width: number) => void): void { const column = assign({}, this.props.columns[index]) as IColumn; column.minWidth = 0; @@ -345,7 +345,7 @@ export class DetailsRow extends BaseComponent, column: IColumn) => { + private _onColumnClick = (ev: React.MouseEvent, column: IColumn): void => { if (column.columnActionsMode !== ColumnActionsMode.disabled) { this.setState({ contextualMenuProps: this._getContextualMenuProps(ev, column) @@ -450,7 +450,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList } } - private _onColumnContextMenu = (column: IColumn, ev: React.MouseEvent) => { + private _onColumnContextMenu = (column: IColumn, ev: React.MouseEvent): void => { if (column.columnActionsMode !== ColumnActionsMode.disabled) { this.setState({ contextualMenuProps: this._getContextualMenuProps(ev, column) @@ -458,13 +458,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList } } - private _onContextualMenuDismissed = () => { + private _onContextualMenuDismissed = (): void => { this.setState({ contextualMenuProps: undefined }); } - private _onSortColumn = (key: string, isSortedDescending: boolean) => { + private _onSortColumn = (key: string, isSortedDescending: boolean): void => { const sortedItems = _items.slice(0).sort((a: any, b: any) => (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1); this.setState({ @@ -483,7 +483,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }); } - private _onGroupByColumn = (column: IColumn) => { + private _onGroupByColumn = (column: IColumn): void => { const { key, isGrouped } = column; const { sortedColumnKey, isSortedDescending, groups, items, columns } = this.state; @@ -565,13 +565,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList return leafKey; } - private _onAddRow = () => { + private _onAddRow = (): void => { this.setState({ items: createListItems(1).concat(this.state.items) }); } - private _onDeleteRow = () => { + private _onDeleteRow = (): void => { this.setState({ items: this.state.items!.slice(1) }); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx index b9109a682dcce4..fabb597bd6c338 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx @@ -61,7 +61,7 @@ export class DetailsListBasicExample extends React.Component<{}, { }; } - public render() { + public render(): JSX.Element { const { items, selectionDetails } = this.state; return ( diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx index caea28be9fd78e..75b098dd73fc79 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx @@ -62,7 +62,7 @@ export class DetailsListCompactExample extends React.Component<{}, { }; } - public render() { + public render(): JSX.Element { const { items, selectionDetails } = this.state; return ( diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx index 19c4256ab10de9..494c5596fd2957 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx @@ -19,7 +19,7 @@ export class DetailsListCustomGroupHeadersExample extends React.Component { _groups = _groups || createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP); } - public render() { + public render(): JSX.Element { return (
      void { return () => { props.onToggleSelectGroup!(props.group!); }; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx index 18e9c9f10e9830..dfc6dc79749a5b 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx @@ -31,7 +31,7 @@ export class DetailsListDragDropExample extends React.Component<{}, { }; } - public render() { + public render(): JSX.Element { const { items, selectionDetails } = this.state; return ( @@ -78,7 +78,7 @@ export class DetailsListDragDropExample extends React.Component<{}, { alert(`Item invoked: ${item.name}`); } - private _onRenderItemColumn(item: any, index: number, column: IColumn) { + private _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element { if (column.key === 'name') { return { item[column.key] }; } @@ -86,7 +86,7 @@ export class DetailsListDragDropExample extends React.Component<{}, { return item[column.key]; } - private _insertBeforeItem(item: any) { + private _insertBeforeItem(item: any): void { const draggedItems = this._selection.isIndexSelected(_draggedIndex) ? this._selection.getSelection() : [_draggedItem]; const items: any[] = this.state.items.filter((i: number) => draggedItems.indexOf(i) === -1); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx index c1b19c2ef52e24..1e29b2179402b3 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx @@ -35,7 +35,7 @@ export class DetailsListNavigatingFocusExample extends React.Component<{}, IDeta } as IColumn ]; - public render() { + public render(): JSX.Element { return ( parent + name); } diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx index 54e5220ea7ddb3..7cc3cfd92d632c 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx @@ -66,7 +66,7 @@ export class DialogBase extends BaseComponent { }); } - public render() { + public render(): JSX.Element { const { className, containerClassName, diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx index a956ee6dec9490..0290dd13f80112 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx @@ -31,7 +31,7 @@ export class DialogContentBase extends BaseComponent { super(props); } - public render() { + public render(): JSX.Element { const { showCloseButton, className, diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx index ca9db4ff5bafa4..773fe5a8b1dcb5 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx @@ -17,7 +17,7 @@ const getClassNames = classNamesFunction { private _classNames: IClassNames; - public render() { + public render(): JSX.Element { const { className, getStyles, @@ -38,9 +38,9 @@ export class DialogFooterBase extends BaseComponent { ); } - private _renderChildrenAsActions() { + private _renderChildrenAsActions(): (JSX.Element | null)[] { return React.Children.map(this.props.children, child => - child && { child } + child ? { child } : null ); } } diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx index fd619d2056bc10..9bd06d6c592229 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx @@ -17,7 +17,7 @@ const DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react const DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx') as string; export class DialogPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { const classNames = getExampleClassNames(); return (
      diff --git a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx index 999660bb2130e5..f61066a58cbdb3 100644 --- a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx @@ -37,7 +37,7 @@ const getVerticalDividerClassNames = memoizeFunction((theme: ITheme): IVerticalD }); export class VerticalDividerCustomExample extends React.Component { - public render() { + public render(): JSX.Element { const exampleClassNames = getExampleClassNames(); return (
      diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx index 045fb0fd3a660d..e21331929fb347 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx @@ -21,7 +21,7 @@ export class DocumentCard extends BaseComponent { }); } - public render() { + public render(): JSX.Element { const { onClick, onClickHref, children, className, type, accentColor } = this.props; const actionable = (onClick || onClickHref) ? true : false; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx index 73957cd5537eb6..71e3a2623324c4 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx @@ -7,7 +7,7 @@ import * as stylesImport from './DocumentCard.scss'; const styles: any = stylesImport; export class DocumentCardActions extends BaseComponent { - public render() { + public render(): JSX.Element { const { actions, views } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index a39d134b7c1587..9c97de8423c4c9 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -7,24 +7,25 @@ import * as stylesImport from './DocumentCard.scss'; const styles: any = stylesImport; export class DocumentCardActivity extends BaseComponent { - public render() { + public render(): JSX.Element | null { const { activity, people } = this.props; + if (!people || people.length === 0) { + return null; + } + return ( - people && people.length > 0 && - ( -
      1 - }) } - > - { this._renderAvatars(people) } -
      - { this._getNameString(people) } - { activity } -
      +
      1 + }) } + > + { this._renderAvatars(people) } +
      + { this._getNameString(people) } + { activity }
      - ) +
      ); } @@ -37,7 +38,7 @@ export class DocumentCardActivity extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx index bc6fff48f1906c..8fabd691477f01 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx @@ -5,7 +5,7 @@ import * as stylesImport from './DocumentCard.scss'; const styles: any = stylesImport; export class DocumentCardLocation extends BaseComponent { - public render() { + public render(): JSX.Element { const { location, locationHref, ariaLabel, onClick } = this.props; return ( diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx index 0fd46157f885fd..99d143bd28340f 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx @@ -17,7 +17,7 @@ const DocumentCardCompleteExampleCode = require('!raw-loader!office-ui-fabric-re const DocumentCardCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx') as string; export class DocumentCardPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { const { previewImages } = this.props; let style, preview; let isFileList = false; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 36a6944fee7f21..44ce6f3341f5a7 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -40,7 +40,7 @@ export class DocumentCardTitle extends BaseComponent miniLength) { @@ -51,7 +51,7 @@ export class DocumentCardTitle extends BaseComponent titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth; } - private _updateTruncation() { + private _updateTruncation(): void { // Only update truncation if the title's size has changed since the last time we truncated if (this._titleElement.current && (this._titleElement.current.clientWidth !== this._truncatedTitleAtWidth)) { // Throttle truncation so that it doesn't happen during a window resize diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx index 64216d54d58d23..a6b84455568610 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx @@ -11,7 +11,7 @@ import { TestImages } from '../../../common/TestImages'; import './DocumentCard.Example.scss'; export class DocumentCardBasicExample extends React.Component { - public render() { + public render(): JSX.Element { const previewProps: IDocumentCardPreviewProps = { previewImages: [ { diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx index dd04ff54c3fac8..6597182098baea 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx @@ -10,7 +10,7 @@ import { import { TestImages } from '../../../common/TestImages'; export class DocumentCardCompactExample extends React.Component { - public render() { + public render(): JSX.Element { const previewProps: IDocumentCardPreviewProps = { getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`, previewImages: [ diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx index 494caa0a604a9a..dcaf4ed424db32 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx @@ -15,7 +15,7 @@ import { ImageFit } from 'office-ui-fabric-react/lib/Image'; import { TestImages } from '../../../common/TestImages'; export class DocumentCardCompleteExample extends React.Component { - public render() { + public render(): JSX.Element { const previewProps: IDocumentCardPreviewProps = { getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`, previewImages: [ diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx index b13b17790a8ae8..66c9ff5658536f 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx @@ -96,7 +96,7 @@ export class Dropdown extends BaseComponent -1 : false; @@ -585,7 +586,7 @@ export class Dropdown extends BaseComponent { this._isScrollIdle = true; }, this._scrollIdleDelay); } - private _onItemMouseEnter(item: any, ev: React.MouseEvent) { + private _onItemMouseEnter(item: any, ev: React.MouseEvent): void { if (!this._isScrollIdle) { return; } @@ -594,7 +595,7 @@ export class Dropdown extends BaseComponent) { + private _onItemMouseMove(item: any, ev: React.MouseEvent): void { const targetElement = ev.currentTarget as HTMLElement; if (!this._isScrollIdle || document.activeElement === targetElement) { @@ -654,7 +655,7 @@ export class Dropdown extends BaseComponent { - public render() { + public render(): JSX.Element { return ( diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx index 1801d9b39959c1..3ba1e2b031a01b 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx @@ -8,7 +8,7 @@ export class DropdownErrorExample extends BaseComponent<{}, {}> { super(props); } - public render() { + public render(): JSX.Element { return (
      { ); } - private _onRenderVisiblePersonas(personas: IFacepilePersona[], singlePersona: boolean) { + private _onRenderVisiblePersonas(personas: IFacepilePersona[], singlePersona: boolean): JSX.Element[] { return personas.map((persona: IFacepilePersona, index: number) => { const personaControl: JSX.Element = singlePersona ? this._getPersonaControl(persona) : this._getPersonaCoinControl(persona); return persona.onClick ? @@ -162,7 +162,7 @@ export class Facepile extends BaseComponent { ); } - private _getElementProps(persona: IFacepilePersona, index: number) { + private _getElementProps(persona: IFacepilePersona, index: number): { key: React.Key, ['data-is-focusable']: boolean } & React.HTMLAttributes { return { key: (!!persona.imageUrl ? 'i' : '') + index, 'data-is-focusable': true, diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx index 383c0282f2e09e..3e48b87d7959ad 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx @@ -6,7 +6,7 @@ import { getStyles } from '../Button/BaseButton.styles'; export class FacepileButton extends BaseComponent { - public render() { + public render(): JSX.Element { const baseButtonStyles = getStyles(getTheme()); return ( diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx index 92f2c7af48c1ed..d6808fa52e1065 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx @@ -17,7 +17,7 @@ const FacepileBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src const FacepileOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx') as string; export class FacepilePage extends React.Component { - public render() { + public render(): JSX.Element { return ( { let lastFocusedElement: HTMLElement | undefined; - function _onFocus(ev: any) { + function _onFocus(ev: any): void { lastFocusedElement = ev.target; } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx index ac0b2b307bd4db..4ea422a4b9a06d 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -23,7 +23,7 @@ export class FocusTrapZone extends BaseComponent implem private _isInFocusStack = false; private _isInClickStack = false; - public componentWillMount() { + public componentWillMount(): void { const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props; if (forceFocusInsideTrap) { this._isInFocusStack = true; @@ -35,7 +35,7 @@ export class FocusTrapZone extends BaseComponent implem } } - public componentDidMount() { + public componentDidMount(): void { const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props; this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement; @@ -52,14 +52,14 @@ export class FocusTrapZone extends BaseComponent implem } } - public componentWillReceiveProps(nextProps: IFocusTrapZoneProps) { + public componentWillReceiveProps(nextProps: IFocusTrapZoneProps): void { const { elementToFocusOnDismiss } = nextProps; if (elementToFocusOnDismiss && this._previouslyFocusedElement !== elementToFocusOnDismiss) { this._previouslyFocusedElement = elementToFocusOnDismiss; } } - public componentWillUnmount() { + public componentWillUnmount(): void { const { ignoreExternalFocusing } = this.props; this._events.dispose(); @@ -80,7 +80,7 @@ export class FocusTrapZone extends BaseComponent implem } } - public render() { + public render(): JSX.Element { const { className, ariaLabelledBy } = this.props; const divProps = getNativeProps(this.props, divProperties); @@ -152,7 +152,7 @@ export class FocusTrapZone extends BaseComponent implem } } - private _forceFocusInTrap(ev: FocusEvent) { + private _forceFocusInTrap(ev: FocusEvent): void { if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) { const focusedElement = document.activeElement as HTMLElement; @@ -164,7 +164,7 @@ export class FocusTrapZone extends BaseComponent implem } } - private _forceClickInTrap(ev: MouseEvent) { + private _forceClickInTrap(ev: MouseEvent): void { if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) { const clickedElement = ev.target as HTMLElement; diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx index d0e571e4749f1c..3d63fb232441db 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx @@ -19,7 +19,7 @@ import FocusTrapZoneNestedExample from './examples/FocusTrapZone.Nested.Example' const FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string; export class FocusTrapZonePage extends React.Component { - public render() { + public render(): JSX.Element { return ( { let lastFocusedElement: HTMLElement | undefined; - function _onFocus(ev: any) { + function _onFocus(ev: any): void { lastFocusedElement = ev.target; } diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index de89ab2aecb7fd..ede76728ed76be 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -84,7 +84,7 @@ export class FocusZone extends BaseComponent implements IFo this._processingTabKey = false; } - public componentDidMount() { + public componentDidMount(): void { _allInstances[this._id] = this; if (this._root.current) { const windowElement = this._root.current.ownerDocument.defaultView; diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index 76eae2de7ad3a4..023a052c508171 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -17,7 +17,7 @@ const FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react const FocusZoneTabbableCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx') as string; export class FocusZonePage extends React.Component { - public render() { + public render(): JSX.Element { return ( group.children ? this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed)); } - private _updateIsSomeGroupExpanded() { + private _updateIsSomeGroupExpanded(): void { const { groups } = this.state; const { onGroupExpandStateChanged } = this.props; diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx index 7df41177b6cce7..f746b33c0faddd 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx @@ -15,7 +15,7 @@ const GroupedListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/ const GroupedListCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx') as string; export class GroupedListPage extends React.Component { - public render() { + public render(): JSX.Element { return ( ; } - private _onSelectionChange() { + private _onSelectionChange(): void { const { group, selection } = this.props; const isSelected = selection!.isRangeSelected(group!.startIndex, group!.count); @@ -299,7 +299,7 @@ export class GroupedListSection extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx index 14099ee016770a..7652fb732e2dfb 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx @@ -43,15 +43,15 @@ export class ExpandingCard extends BaseComponent { }; } - public componentDidMount() { + public componentDidMount(): void { const target = this._getTargetElement(); this._events.on(target, 'mouseenter', this._cardOpen); @@ -88,7 +88,7 @@ export class HoverCard extends BaseComponent { } // Render - public render() { + public render(): JSX.Element { const { expandingCardProps, children, diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx index a518cb1af47000..ea75ee0b8ae95f 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx @@ -18,7 +18,7 @@ const HoverCardBasicExampleCode = require('!raw-loader!office-ui-fabric-react/sr const HoverCardTargetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx') as string; export class HoverCardPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { }; } - public render() { + public render(): JSX.Element { const { ariaLabel, className, diff --git a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx index cbfb0dd5845369..64f96cfa828188 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx @@ -19,7 +19,7 @@ const IconColorExampleCode = require('!raw-loader!office-ui-fabric-react/src/com const IconImageSheetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx') as string; export class IconPage extends React.Component { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { return (
      diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx index c9a8526f32d615..0164d815d7d226 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx @@ -4,7 +4,7 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon'; import './IconExample.scss'; export class IconColorExample extends React.Component { - public render() { + public render(): JSX.Element { return (
      diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx index 54f7555783f263..337081fbc16c0d 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx @@ -4,7 +4,7 @@ import './IconExample.scss'; import { TestImages } from '../../../common/TestImages'; export class IconImageSheetExample extends React.Component { - public render() { + public render(): JSX.Element { return (
      { - public render() { + public render(): JSX.Element { return (
      diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx index 00d9ca33de6737..44404536221d30 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx @@ -47,7 +47,7 @@ export class ImageBase extends BaseComponent { }; } - public componentWillReceiveProps(nextProps: IImageProps) { + public componentWillReceiveProps(nextProps: IImageProps): void { if (nextProps.src !== this.props.src) { this.setState({ loadState: ImageLoadState.notLoaded @@ -65,7 +65,7 @@ export class ImageBase extends BaseComponent { } } - public render() { + public render(): JSX.Element { const imageProps = getNativeProps(this.props, imageProperties, ['width', 'height']); const { src, @@ -161,7 +161,7 @@ export class ImageBase extends BaseComponent { } } - private _computeCoverStyle(props: IImageProps) { + private _computeCoverStyle(props: IImageProps): void { const { imageFit, width, height } = props; // Do not compute cover style if it was already specified in props diff --git a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx index 61a4c05ed5ddf3..4c6f7188beffa4 100644 --- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx @@ -24,7 +24,7 @@ const ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/com const ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx') as string; export class ImagePage extends React.Component { - public render() { + public render(): JSX.Element { return ( { - public render() { + public render(): JSX.Element { const imageProps: IImageProps = { src: 'http://placehold.it/800x300', imageFit: ImageFit.center, diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx index 4205b03e12b5eb..f09c7cab84078a 100644 --- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx @@ -7,7 +7,7 @@ import { import { Label } from 'office-ui-fabric-react/lib/Label'; export class ImageContainExample extends React.Component { - public render() { + public render(): JSX.Element { const imageProps: IImageProps = { src: 'http://placehold.it/700x300', imageFit: ImageFit.contain diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx index cc7413420b627f..d0bd820c33d78e 100644 --- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx @@ -7,7 +7,7 @@ import { import { Label } from 'office-ui-fabric-react/lib/Label'; export class ImageCoverExample extends React.Component { - public render() { + public render(): JSX.Element { const imageProps: IImageProps = { src: 'http://placehold.it/500x500', imageFit: ImageFit.cover diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx index 12f31376505f8d..271b5a138c68d3 100644 --- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx @@ -3,7 +3,7 @@ import { Image } from 'office-ui-fabric-react/lib/Image'; import { Label } from 'office-ui-fabric-react/lib/Label'; export class ImageDefaultExample extends React.Component { - public render() { + public render(): JSX.Element { return (

      With no imageFit property set, the width and height props control the size of the frame. Depending on which of those props is used, the image may scale to fit the frame.

      diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx index d16f5779de52f2..592272df632e82 100644 --- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx @@ -7,7 +7,7 @@ import { import { Label } from 'office-ui-fabric-react/lib/Label'; export class ImageMaximizeFrameExample extends React.Component { - public render() { + public render(): JSX.Element { const imageProps: IImageProps = { src: 'http://placehold.it/500x500', imageFit: ImageFit.cover, diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx index 288bdfaadbda05..5663ca0222611d 100644 --- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx @@ -7,7 +7,7 @@ import { import { Label } from 'office-ui-fabric-react/lib/Label'; export class ImageNoneExample extends React.Component { - public render() { + public render(): JSX.Element { const imageProps: IImageProps = { src: 'http://placehold.it/500x250', imageFit: ImageFit.none, diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx index ffad9139703d76..5618c9bb7d2275 100644 --- a/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx @@ -5,7 +5,7 @@ import { getLabelClassNames } from './Label.classNames'; @customizable('Label', ['theme']) export class Label extends BaseComponent { - public render() { + public render(): JSX.Element { const { disabled, required, children, className, theme } = this.props; return (