Replacing deprecated StatelessComponent references with FunctionCompo…

…nent (#11891)

* Replacing deprecated StatelessComponent references with FunctionComponent.

* Change files

apps/fabric-website-resources/src/GettingStartedPage.tsx

@@ -19,7 +19,7 @@ const classNames = mergeStyleSets({
   }
 });
 
-export const GettingStartedPage: React.StatelessComponent = () => {
+export const GettingStartedPage: React.FunctionComponent = () => {
   return (
     <div className={classNames.root}>
       <div className={classNames.banner}>

apps/fabric-website-resources/src/components/DemoPage.tsx

@@ -10,7 +10,7 @@ import {
 } from '@uifabric/example-app-base';
 import * as React from 'react';
 
-export const DemoPage: React.StatelessComponent<IDemoPageProps> = demoPageProps => {
+export const DemoPage: React.FunctionComponent<IDemoPageProps> = demoPageProps => {
   const {
     exampleKnobs,
     examples,

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

@@ -28,7 +28,7 @@ const componentPageStyles: IStyleSet<Partial<IComponentPageStyles>> = {
   }
 };
 
-export const ComponentPage: React.StatelessComponent = props => {
+export const ComponentPage: React.FunctionComponent = props => {
   return (
     <Customizer
       scopedSettings={{

apps/fabric-website/src/components/PageHeader/PageHeader.ts

@@ -1 +1 @@
-export const PageHeader: React.StatelessComponent<any> = () => null;
+export const PageHeader: React.FunctionComponent<any> = () => null;

apps/fabric-website/src/pages/Controls/ActivityItemPage/ActivityItemPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ActivityItemPageProps } from './ActivityItemPage.doc';
 
-export const ActivityItemPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ActivityItemPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...ActivityItemPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AnnouncedPage/AnnouncedBulkOperationsPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedBulkOperationsPageProps } from './AnnouncedBulkOperationsPage.doc';
 
-export const AnnouncedBulkOperationsPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AnnouncedBulkOperationsPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...AnnouncedBulkOperationsPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AnnouncedPage/AnnouncedLazyLoadingPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedLazyLoadingPageProps } from './AnnouncedLazyLoadingPage.doc';
 
-export const AnnouncedLazyLoadingPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AnnouncedLazyLoadingPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...AnnouncedLazyLoadingPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AnnouncedPage/AnnouncedPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedPageProps } from './AnnouncedPage.doc';
 
-export const AnnouncedPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AnnouncedPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...AnnouncedPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AnnouncedPage/AnnouncedQuickActionsPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedQuickActionsPageProps } from './AnnouncedQuickActionsPage.doc';
 
-export const AnnouncedQuickActionsPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AnnouncedQuickActionsPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...AnnouncedQuickActionsPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AnnouncedPage/AnnouncedSearchResultsPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedSearchResultsPageProps } from './AnnouncedSearchResultsPage.doc';
 
-export const AnnouncedSearchResultsPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AnnouncedSearchResultsPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...AnnouncedSearchResultsPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/AvatarPage/AvatarPage.tsx

@@ -6,7 +6,7 @@ import { Platforms } from '../../../interfaces/Platforms';
 
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/AvatarPage/';
 
-export const AvatarPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const AvatarPage: React.FunctionComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return (
     <ControlsAreaPage

apps/fabric-website/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.tsx

@@ -7,7 +7,7 @@ import { Platforms } from '../../../interfaces/Platforms';
 const baseUrl =
   'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/BottomNavigationPage/';
 
-export const BottomNavigationPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const BottomNavigationPage: React.FunctionComponent<IControlsPageProps> = props => {
   return (
     <ControlsAreaPage
       {...props}

apps/fabric-website/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx

@@ -6,7 +6,7 @@ import { Platforms } from '../../../interfaces/Platforms';
 
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/BottomSheetPage/';
 
-export const BottomSheetPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const BottomSheetPage: React.FunctionComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return (
     <ControlsAreaPage

apps/fabric-website/src/pages/Controls/BreadcrumbPage/BreadcrumbPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { BreadcrumbPageProps } from './BreadcrumbPage.doc';
 
-export const BreadcrumbPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const BreadcrumbPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...BreadcrumbPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/CalendarPage/CalendarPage.tsx

@@ -6,7 +6,7 @@ import { IPageSectionProps } from '@uifabric/example-app-base/lib/index2';
 
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/CalendarPage/';
 
-export const CalendarPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CalendarPage: React.FunctionComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return (
     <ControlsAreaPage

apps/fabric-website/src/pages/Controls/CalloutPage/CalloutPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CalloutPageProps } from './CalloutPage.doc';
 
-export const CalloutPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CalloutPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...CalloutPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/CardPage/CardPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CardPageProps } from './CardPage.doc';
 
-export const CardPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CardPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...CardPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/CheckboxPage/CheckboxPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CheckboxPageProps } from './CheckboxPage.doc';
 
-export const CheckboxPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CheckboxPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...CheckboxPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/ChipPage/ChipPage.tsx

@@ -6,7 +6,7 @@ import { Platforms } from '../../../interfaces/Platforms';
 
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/ChipPage/';
 
-export const ChipPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ChipPage: React.FunctionComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return <ControlsAreaPage {...props} {...ChipPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };

apps/fabric-website/src/pages/Controls/ChoiceGroupPage/ChoiceGroupPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ChoiceGroupPageProps } from './ChoiceGroupPage.doc';
 
-export const ChoiceGroupPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ChoiceGroupPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...ChoiceGroupPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/CoachmarkPage/CoachmarkPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CoachmarkPageProps } from './CoachmarkPage.doc';
 
-export const CoachmarkPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CoachmarkPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...CoachmarkPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/ColorPickerPage/ColorPickerPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ColorPickerPageProps } from './ColorPickerPage.doc';
 
-export const ColorPickerPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ColorPickerPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...ColorPickerPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/ComboBoxPage/ComboBoxPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ComboBoxPageProps } from './ComboBoxPage.doc';
 
-export const ComboBoxPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ComboBoxPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...ComboBoxPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/CommandBarPage/CommandBarPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CommandBarPageProps } from './CommandBarPage.doc';
 
-export const CommandBarPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const CommandBarPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...CommandBarPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/ContextualMenuPage/ContextualMenuPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ContextualMenuPageProps } from './ContextualMenuPage.doc';
 
-export const ContextualMenuPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const ContextualMenuPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...ContextualMenuPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/ControlsAreaPage.tsx

@@ -8,7 +8,7 @@ export interface IControlsPageProps extends IPageProps<Platforms> {}
 
 const apiRequireContext = require.context('@uifabric/api-docs/lib/pages/', true, /^(?!references).*/);
 
-const ControlsAreaPageBase: React.StatelessComponent<IControlsPageProps> = props => {
+const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props => {
   let jsonDocs: IPageJson;
   if (props.platform === 'web' && !props.jsonDocs) {
     // Get the control's .page.json file for API docs if it exists
@@ -22,6 +22,6 @@ const ControlsAreaPageBase: React.StatelessComponent<IControlsPageProps> = props
   return <Page subTitle={getSubTitle(props.platform)} jsonDocs={jsonDocs} {...props} />;
 };
 
-export const ControlsAreaPage: React.StatelessComponent<IPageProps<Platforms>> = (props: IPageProps<Platforms>) => (
+export const ControlsAreaPage: React.FunctionComponent<IPageProps<Platforms>> = (props: IPageProps<Platforms>) => (
   <PlatformContext.Consumer>{(platform: Platforms) => <ControlsAreaPageBase platform={platform} {...props} />}</PlatformContext.Consumer>
 );

apps/fabric-website/src/pages/Controls/DatePickerPage/DatePickerPage.tsx

@@ -6,7 +6,7 @@ import { Platforms } from '../../../interfaces/Platforms';
 
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/DatePickerPage/';
 
-export const DatePickerPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DatePickerPage: React.FunctionComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return <ControlsAreaPage {...props} {...DatePickerPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListAdvancedPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListAdvancedPageProps } from './DetailsListAdvancedPage.doc';
 
-export const DetailsListAdvancedPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListAdvancedPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListAdvancedPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListAnimationPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListAnimationPageProps } from './DetailsListAnimationPage.doc';
 
-export const DetailsListAnimationPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListAnimationPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListAnimationPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListBasicPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListBasicPageProps } from './DetailsListBasicPage.doc';
 
-export const DetailsListBasicPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListBasicPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListBasicPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListCompactPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListCompactPageProps } from './DetailsListCompactPage.doc';
 
-export const DetailsListCompactPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListCompactPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListCompactPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListCustomColumnsPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListCustomColumnsPageProps } from './DetailsListCustomColumnsPage.doc';
 
-export const DetailsListCustomColumnsPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListCustomColumnsPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListCustomColumnsPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListCustomFooterPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListCustomFooterPageProps } from './DetailsListCustomFooterPage.doc';
 
-export const DetailsListCustomFooterPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListCustomFooterPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListCustomFooterPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListCustomGroupHeadersPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListCustomGroupHeadersPageProps } from './DetailsListCustomGroupHeadersPage.doc';
 
-export const DetailsListCustomGroupHeadersPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListCustomGroupHeadersPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListCustomGroupHeadersPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListCustomRowsPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListCustomRowsPageProps } from './DetailsListCustomRowsPage.doc';
 
-export const DetailsListCustomRowsPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListCustomRowsPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListCustomRowsPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListDragDropPage.tsx

@@ -3,7 +3,7 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListDragDropPageProps } from './DetailsListDragDropPage.doc';
 import { mergeStyles } from 'office-ui-fabric-react';
 
-export const DetailsListDragDropPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListDragDropPage: React.FunctionComponent<IControlsPageProps> = props => {
   const className = mergeStyles({
     selectors: {
       '.ExampleCard .ms-Icon.ms-DetailsHeader-dropHintCaretStyle': {

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListGroupedPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListGroupedPageProps } from './DetailsListGroupedPage.doc';
 
-export const DetailsListGroupedPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListGroupedPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListGroupedPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListLargeGroupedPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListLargeGroupedPageProps } from './DetailsListLargeGroupedPage.doc';
 
-export const DetailsListLargeGroupedPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListLargeGroupedPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListLargeGroupedPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListNavigatingFocusPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListNavigatingFocusPageProps } from './DetailsListNavigatingFocusPage.doc';
 
-export const DetailsListNavigatingFocusPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListNavigatingFocusPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListNavigatingFocusPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListPageProps } from './DetailsListPage.doc';
 
-export const DetailsListPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListShimmerPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListShimmerPageProps } from './DetailsListShimmerPage.doc';
 
-export const DetailsListShimmerPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DetailsListShimmerPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DetailsListShimmerPageProps[props.platform]} />;
 };

apps/fabric-website/src/pages/Controls/DialogPage/DialogPage.tsx

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DialogPageProps } from './DialogPage.doc';
 
-export const DialogPage: React.StatelessComponent<IControlsPageProps> = props => {
+export const DialogPage: React.FunctionComponent<IControlsPageProps> = props => {
   return <ControlsAreaPage {...props} {...DialogPageProps[props.platform]} />;
 };