Remove some relative imports from examples (microsoft#10259)

* Fix imports which don't involve example data * Change files
ecraig12345 · Aug 27, 2019 · b982a68 · b982a68
1 parent 21c4d8f
commit b982a68
Show file tree

Hide file tree

Showing 34 changed files with 222 additions and 154 deletions.
diff --git a/change/@uifabric-charting-2019-08-26-16-42-53-imports.json b/change/@uifabric-charting-2019-08-26-16-42-53-imports.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Remove relative imports from examples and fix incorrectly named example files",
+  "packageName": "@uifabric/charting",
+  "email": "elcraig@microsoft.com",
+  "commit": "9bfb3b5f1dbec3c8ef57558d3d47f5bdc2f9648c",
+  "date": "2019-08-26T23:42:38.253Z"
+}
diff --git a/change/@uifabric-experiments-2019-08-26-16-42-53-imports.json b/change/@uifabric-experiments-2019-08-26-16-42-53-imports.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Remove some relative imports from examples",
+  "packageName": "@uifabric/experiments",
+  "email": "elcraig@microsoft.com",
+  "commit": "9bfb3b5f1dbec3c8ef57558d3d47f5bdc2f9648c",
+  "date": "2019-08-26T23:42:48.174Z"
+}
diff --git a/change/office-ui-fabric-react-2019-08-26-16-42-53-imports.json b/change/office-ui-fabric-react-2019-08-26-16-42-53-imports.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Remove some relative imports from examples",
+  "packageName": "office-ui-fabric-react",
+  "email": "elcraig@microsoft.com",
+  "commit": "9bfb3b5f1dbec3c8ef57558d3d47f5bdc2f9648c",
+  "date": "2019-08-26T23:42:53.695Z"
+}
diff --git a/packages/charting/src/components/Legends/LegendsPage.tsx b/packages/charting/src/components/Legends/LegendsPage.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import { ComponentPage, ExampleCard, IComponentDemoPageProps, PropertiesTableSet } from '@uifabric/example-app-base';
 
-import { LegendOverflowExample } from './examples/LegendsOverflowExample';
-import { LegendBasicExample } from './examples/LegendsBasicExample';
+import { LegendOverflowExample } from './examples/Legends.Overflow.Example';
+import { LegendBasicExample } from './examples/Legends.Basic.Example';
 
-const LegendsOverflowExampleCode = require('!raw-loader!@uifabric/charting/src/components/Legends/examples/LegendsOverflowExample.tsx') as string;
-const LegendsBasicExampleCode = require('!raw-loader!@uifabric/charting/src/components/Legends/examples/LegendsBasicExample.tsx') as string;
+const LegendsOverflowExampleCode = require('!raw-loader!@uifabric/charting/src/components/Legends/examples/Legends.Overflow.Example.tsx') as string;
+const LegendsBasicExampleCode = require('!raw-loader!@uifabric/charting/src/components/Legends/examples/Legends.Basic.Example.tsx') as string;
 
 export class LegendsPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {

diff --git a/.../Legends/examples/LegendsBasicExample.tsx → ...egends/examples/Legends.Basic.Example.tsx b/.../Legends/examples/LegendsBasicExample.tsx → ...egends/examples/Legends.Basic.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Legends, ILegend } from '../index';
+import { Legends, ILegend } from '@uifabric/charting/lib/Legends';
 import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class LegendBasicExample extends React.Component<{}, {}> {

diff --git a/...gends/examples/LegendsOverflowExample.tsx → ...nds/examples/Legends.Overflow.Example.tsx b/...gends/examples/LegendsOverflowExample.tsx → ...nds/examples/Legends.Overflow.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Legends } from '../Legends';
+import { Legends } from '@uifabric/charting/lib/Legends';
 import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class LegendOverflowExample extends React.Component<{}, {}> {

diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
@@ -5,7 +5,14 @@ import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
-import { IExampleGroup, IExampleItem, createGroup, createDocumentItems, getTileCells, createShimmerGroups } from './ExampleHelpers';
+import {
+  IExampleGroup,
+  IExampleItem,
+  createGroup,
+  createDocumentItems,
+  getTileCells,
+  createShimmerGroups
+} from '@uifabric/experiments/lib/components/TilesList/examples/ExampleHelpers';
 import { ISize } from '@uifabric/experiments/lib/Utilities';
 import { ShimmerElementType, ShimmerElementsGroup } from 'office-ui-fabric-react/lib/Shimmer';
 

diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx
@@ -1,14 +1,20 @@
 import * as React from 'react';
 import { TilesList, ITileSize, ITilesGridItem, ITilesGridSegment } from '@uifabric/experiments/lib/TilesList';
-import { Tile, getTileLayout, renderTileWithLayout } from '../../../Tile';
+import { Tile, getTileLayout, renderTileWithLayout } from '@uifabric/experiments/lib/Tile';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
-import { IExampleGroup, IExampleItem, createGroup, createMediaItems, getTileCells } from './ExampleHelpers';
+import {
+  IExampleGroup,
+  IExampleItem,
+  createGroup,
+  createMediaItems,
+  getTileCells
+} from '@uifabric/experiments/lib/components/TilesList/examples/ExampleHelpers';
 import * as TilesListExampleStylesModule from './TilesList.Example.scss';
 import { lorem } from '@uifabric/example-app-base';
-import { SignalField, SharedSignal, CommentsSignal } from '../../signals/Signals';
+import { SignalField, SharedSignal, CommentsSignal } from '@uifabric/experiments/lib/Signals';
 
 // tslint:disable-next-line:no-any
 const TilesListExampleStyles = TilesListExampleStylesModule as any;

diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { ExampleCard, ComponentPage, IComponentDemoPageProps, PropertiesTableSet } from '@uifabric/example-app-base';
 import { VirtualizedListBasicExample } from './examples/VirtualizedList.Basic.Example';
-import { VirtualizedListBasicExample2 } from './examples/VirtualizedList.Basic.Example2';
+import { VirtualizedListBasicExample2 } from './examples/VirtualizedList.Basic2.Example';
 
 const VirtualizedListBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx') as string;
-const VirtualizedListBasicExample2Code = require('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx') as string;
+const VirtualizedListBasicExample2Code = require('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic2.Example.tsx') as string;
 
 export class VirtualizedListPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {

diff --git a/...amples/VirtualizedList.Basic.Example2.tsx → ...amples/VirtualizedList.Basic2.Example.tsx b/...amples/VirtualizedList.Basic.Example2.tsx → ...amples/VirtualizedList.Basic2.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VirtualizedList } from '@uifabric/experiments/lib/VirtualizedList';
-import { ScrollContainer } from '../../../utilities/scrolling/ScrollContainer';
+import { ScrollContainer } from '@uifabric/experiments/lib/utilities/scrolling/ScrollContainer';
 
 import * as VirtualizedListExampleStylesModule from './VirtualizedList.Example.scss';
 

diff --git a/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx b/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {
   ChoiceGroup,
   CommandBar,
+  ICommandBarItemProps,
   createTheme,
   Customizer,
   DefaultButton,
@@ -21,7 +22,6 @@ import {
   Text
 } from 'office-ui-fabric-react';
 import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@uifabric/variants';
-import { farItems, items, overflowItems } from 'office-ui-fabric-react/lib/components/CommandBar/examples/data';
 
 // tslint:disable:max-line-length
 import { CollapsibleSectionRecursiveExample } from '@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example';
@@ -185,77 +185,6 @@ const schemeThemeCustom: ITheme = {
   }
 };
 
-interface IDialogExampleProps {
-  buttonText: string;
-}
-
-interface IDialogExampleState {
-  hideDialog: boolean;
-}
-
-class DialogExample extends React.Component<IDialogExampleProps, IDialogExampleState> {
-  constructor(props: IDialogExampleProps) {
-    super(props);
-
-    this.state = {
-      hideDialog: true
-    };
-  }
-
-  public render(): JSX.Element {
-    return (
-      <div>
-        <br />
-        <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this._showDialog} text={this.props.buttonText} />
-        <Dialog
-          hidden={this.state.hideDialog}
-          onDismiss={this._closeDialog}
-          dialogContentProps={{
-            type: DialogType.largeHeader,
-            title: 'All emails together',
-            subText: 'Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.'
-          }}
-          modalProps={{
-            isBlocking: false,
-            styles: { main: { maxWidth: 450 } }
-          }}
-        >
-          <ChoiceGroup
-            options={[
-              {
-                key: 'A',
-                text: 'Option A'
-              },
-              {
-                key: 'B',
-                text: 'Option B',
-                checked: true
-              },
-              {
-                key: 'C',
-                text: 'Option C',
-                disabled: true
-              }
-            ]}
-          />
-          <DialogFooter>
-            <PrimaryButton onClick={this._closeDialog} text="Save" />
-            <DefaultButton onClick={this._closeDialog} text="Cancel" />
-          </DialogFooter>
-        </Dialog>
-      </div>
-    );
-  }
-
-  private _showDialog = (): void => {
-    this.setState({ hideDialog: false });
-  };
-
-  private _closeDialog = (): void => {
-    this.setState({ hideDialog: true });
-  };
-}
-
 export interface IThemingExampleState {
   bodyToggle: boolean;
   sideToggle: boolean;
@@ -364,3 +293,105 @@ export class ThemingSchemesCustomExample extends ThemingExample {
     return <Customizer settings={{ theme: schemeThemeCustom }}>{this._renderSchemedComponents()}</Customizer>;
   }
 }
+
+const onCommandClick = (ev: any, item?: ICommandBarItemProps) => console.log(item && item.name);
+const items: ICommandBarItemProps[] = [
+  {
+    key: 'newItem',
+    name: 'New',
+    iconProps: { iconName: 'Add' },
+    ariaLabel: 'New. Use left and right arrow keys to navigate',
+    subMenuProps: {
+      items: [
+        { key: 'emailMessage', name: 'Email message', iconProps: { iconName: 'Mail' } },
+        { key: 'calendarEvent', name: 'Calendar event', iconProps: { iconName: 'Calendar' } }
+      ]
+    }
+  },
+  { key: 'upload', name: 'Upload', iconProps: { iconName: 'Upload' }, href: 'https://dev.office.com/fabric', target: '_blank' },
+  { key: 'share', name: 'Share', iconProps: { iconName: 'Share' }, onClick: onCommandClick },
+  { key: 'download', name: 'Download', iconProps: { iconName: 'Download' }, onClick: onCommandClick }
+];
+
+const overflowItems: ICommandBarItemProps[] = [
+  { key: 'move', name: 'Move to...', iconProps: { iconName: 'MoveToFolder' } },
+  { key: 'copy', name: 'Copy to...', iconProps: { iconName: 'Copy' } },
+  { key: 'rename', name: 'Rename...', iconProps: { iconName: 'Edit' } }
+];
+
+const farItems: ICommandBarItemProps[] = [
+  { key: 'sort', name: 'Sort', ariaLabel: 'Sort', iconProps: { iconName: 'SortLines' }, onClick: onCommandClick },
+  { key: 'tile', name: 'Grid view', ariaLabel: 'Grid view', iconProps: { iconName: 'Tiles' }, iconOnly: true, onClick: onCommandClick },
+  { key: 'info', name: 'Info', ariaLabel: 'Info', iconProps: { iconName: 'Info' }, iconOnly: true, onClick: onCommandClick }
+];
+
+interface IDialogExampleProps {
+  buttonText: string;
+}
+
+interface IDialogExampleState {
+  hideDialog: boolean;
+}
+
+class DialogExample extends React.Component<IDialogExampleProps, IDialogExampleState> {
+  constructor(props: IDialogExampleProps) {
+    super(props);
+
+    this.state = {
+      hideDialog: true
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        <br />
+        <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this._showDialog} text={this.props.buttonText} />
+        <Dialog
+          hidden={this.state.hideDialog}
+          onDismiss={this._closeDialog}
+          dialogContentProps={{
+            type: DialogType.largeHeader,
+            title: 'All emails together',
+            subText: 'Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.'
+          }}
+          modalProps={{
+            isBlocking: false,
+            styles: { main: { maxWidth: 450 } }
+          }}
+        >
+          <ChoiceGroup
+            options={[
+              {
+                key: 'A',
+                text: 'Option A'
+              },
+              {
+                key: 'B',
+                text: 'Option B',
+                checked: true
+              },
+              {
+                key: 'C',
+                text: 'Option C',
+                disabled: true
+              }
+            ]}
+          />
+          <DialogFooter>
+            <PrimaryButton onClick={this._closeDialog} text="Save" />
+            <DefaultButton onClick={this._closeDialog} text="Cancel" />
+          </DialogFooter>
+        </Dialog>
+      </div>
+    );
+  }
+
+  private _showDialog = (): void => {
+    this.setState({ hideDialog: false });
+  };
+
+  private _closeDialog = (): void => {
+    this.setState({ hideDialog: true });
+  };
+}
diff --git a/...ce-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx b/...ce-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Announced } from 'office-ui-fabric-react/lib/Announced';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList, IDragDropEvents } from 'office-ui-fabric-react/lib/DetailsList';
+import { Selection } from 'office-ui-fabric-react/lib/Selection';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
-import { IDragDropEvents } from 'office-ui-fabric-react/lib/utilities/dragdrop/interfaces';
 import { mergeStyles, getTheme } from 'office-ui-fabric-react/lib/Styling';
 
 const _items: IFileExampleItem[] = [];

diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -10,7 +10,9 @@ import {
   KeyCodes,
   css,
   mergeAriaAttributeValues,
-  portalContainsElement
+  portalContainsElement,
+  memoizeFunction,
+  nullRender
 } from '../../Utilities';
 import { Icon, FontIcon, ImageIcon } from '../../Icon';
 import { DirectionalHint } from '../../common/DirectionalHint';
@@ -19,7 +21,6 @@ import { IButtonProps, IButton } from './Button.types';
 import { IButtonClassNames, getBaseButtonClassNames } from './BaseButton.classNames';
 import { getClassNames as getBaseSplitButtonClassNames, ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 import { KeytipData } from '../../KeytipData';
-import { memoizeFunction, nullRender } from '@uifabric/utilities';
 import { IKeytipProps } from '../Keytip/Keytip.types';
 
 /**

diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.doc.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.doc.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { items } from '../CommandBar/examples/data';
 
 import { IDocPageProps } from '../../common/DocPage.types';
 
@@ -15,8 +14,6 @@ const CalloutFocusTrapExampleCode = require('!raw-loader!office-ui-fabric-react/
 const CalloutDirectionalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx') as string;
 const CalloutCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx') as string;
 
-const cmdBarParamsTextAndIcons: any = { items: items, farItems: null };
-
 export const CalloutPageProps: IDocPageProps = {
   title: 'Callout',
   componentName: 'Callout',
@@ -30,12 +27,12 @@ export const CalloutPageProps: IDocPageProps = {
     {
       title: 'Nested Callout... Callout with a commandbar with a sub menu',
       code: CalloutNestedExampleCode,
-      view: <CalloutNestedExample {...cmdBarParamsTextAndIcons} />
+      view: <CalloutNestedExample />
     },
     {
       title: 'Focus Trap Callout',
       code: CalloutFocusTrapExampleCode,
-      view: <CalloutFocusTrapExample {...cmdBarParamsTextAndIcons} />
+      view: <CalloutFocusTrapExample />
     },
     {
       title: 'Callout with directional hint',