From b982a68f449a61b16429d1a025cd8a949177d954 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Mon, 26 Aug 2019 18:28:57 -0700 Subject: [PATCH] Remove some relative imports from examples (#10259) * Fix imports which don't involve example data * Change files --- ...-charting-2019-08-26-16-42-53-imports.json | 8 + ...periments-2019-08-26-16-42-53-imports.json | 8 + ...ric-react-2019-08-26-16-42-53-imports.json | 8 + .../src/components/Legends/LegendsPage.tsx | 8 +- ...cExample.tsx => Legends.Basic.Example.tsx} | 2 +- ...ample.tsx => Legends.Overflow.Example.tsx} | 2 +- .../examples/TilesList.Document.Example.tsx | 9 +- .../examples/TilesList.Media.Example.tsx | 12 +- .../VirtualizedList/VirtualizedListPage.tsx | 4 +- ...tsx => VirtualizedList.Basic2.Example.tsx} | 2 +- .../examples/Theming.Schemes.Example.tsx | 175 +++++++++++------- .../Announced.BulkOperations.Example.tsx | 4 +- .../src/components/Button/BaseButton.tsx | 5 +- .../src/components/Callout/Callout.doc.tsx | 7 +- .../examples/Callout.FocusTrap.Example.tsx | 27 ++- .../examples/Callout.Nested.Example.tsx | 27 ++- .../examples/ColorPicker.Basic.Example.tsx | 3 +- .../components/CommandBar/CommandBar.doc.tsx | 16 +- .../ContextualMenu.deprecated.test.tsx | 3 +- .../ContextualMenu.CustomMenuList.Example.tsx | 2 +- .../components/Dialog/DialogContent.styles.ts | 3 +- .../components/DocumentCard/examples/data.ts | 7 - .../HoverCard.EventListenerTarget.Example.tsx | 3 +- .../components/Keytip/examples/KeytipSetup.ts | 2 +- .../Keytip/examples/Keytips.Basic.Example.tsx | 2 +- .../examples/Keytips.Button.Example.tsx | 2 +- .../examples/Keytips.CommandBar.Example.tsx | 2 +- .../examples/Keytips.Overflow.Example.tsx | 2 +- .../examples/Layer.Customized.Example.tsx | 2 +- .../examples/Panel.PreventDefault.Example.tsx | 2 +- .../examples/Persona.Presence.Example.tsx | 2 +- .../ScrollablePane.DetailsList.Example.tsx | 2 +- ...eachingBubble.WideIllustration.Example.tsx | 2 +- scripts/tasks/lint-imports.js | 11 +- 34 files changed, 222 insertions(+), 154 deletions(-) create mode 100644 change/@uifabric-charting-2019-08-26-16-42-53-imports.json create mode 100644 change/@uifabric-experiments-2019-08-26-16-42-53-imports.json create mode 100644 change/office-ui-fabric-react-2019-08-26-16-42-53-imports.json rename packages/charting/src/components/Legends/examples/{LegendsBasicExample.tsx => Legends.Basic.Example.tsx} (95%) rename packages/charting/src/components/Legends/examples/{LegendsOverflowExample.tsx => Legends.Overflow.Example.tsx} (98%) rename packages/experiments/src/components/VirtualizedList/examples/{VirtualizedList.Basic.Example2.tsx => VirtualizedList.Basic2.Example.tsx} (93%) delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/examples/data.ts 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 new file mode 100644 index 0000000000000..f09c923ad311e --- /dev/null +++ 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 new file mode 100644 index 0000000000000..a8f7a5a3156cd --- /dev/null +++ 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 new file mode 100644 index 0000000000000..2714a844fac8b --- /dev/null +++ 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 index c8b0ad1eec045..cfc6ff0ffbe1e 100644 --- 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 { public render(): JSX.Element { diff --git a/packages/charting/src/components/Legends/examples/LegendsBasicExample.tsx b/packages/charting/src/components/Legends/examples/Legends.Basic.Example.tsx similarity index 95% rename from packages/charting/src/components/Legends/examples/LegendsBasicExample.tsx rename to packages/charting/src/components/Legends/examples/Legends.Basic.Example.tsx index b0af4dbddfdb5..c8d2c86944e9e 100644 --- a/packages/charting/src/components/Legends/examples/LegendsBasicExample.tsx +++ b/packages/charting/src/components/Legends/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/packages/charting/src/components/Legends/examples/LegendsOverflowExample.tsx b/packages/charting/src/components/Legends/examples/Legends.Overflow.Example.tsx similarity index 98% rename from packages/charting/src/components/Legends/examples/LegendsOverflowExample.tsx rename to packages/charting/src/components/Legends/examples/Legends.Overflow.Example.tsx index 85251a34ae8a8..de2d709c24779 100644 --- a/packages/charting/src/components/Legends/examples/LegendsOverflowExample.tsx +++ b/packages/charting/src/components/Legends/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 index aa09ad11335ce..2082c75399d03 100644 --- 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 index 1281d74d37983..33af44334d1b2 100644 --- 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 index 3fdfb92362b3e..1d52647548260 100644 --- 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 { public render(): JSX.Element { diff --git a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic2.Example.tsx similarity index 93% rename from packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx rename to packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic2.Example.tsx index 104eaa36994db..4091727936bc2 100644 --- a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx +++ b/packages/experiments/src/components/VirtualizedList/examples/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 index 75f739306a728..85d119a12aa15 100644 --- 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 { - constructor(props: IDialogExampleProps) { - super(props); - - this.state = { - hideDialog: true - }; - } - - public render(): JSX.Element { - return ( -
-
- - -
- ); - } - - 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 {this._renderSchemedComponents()}; } } + +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 { + constructor(props: IDialogExampleProps) { + super(props); + + this.state = { + hideDialog: true + }; + } + + public render(): JSX.Element { + return ( +
+
+ + +
+ ); + } + + private _showDialog = (): void => { + this.setState({ hideDialog: false }); + }; + + private _closeDialog = (): void => { + this.setState({ hideDialog: true }); + }; +} diff --git a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx index 167bb5f88c36e..8815891c04931 100644 --- a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx +++ b/packages/office-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 index 26d4580671548..ad2f768c8e510 100644 --- 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 index cf9301f3a6f59..ddd577fd7ce1a 100644 --- 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: + view: }, { title: 'Focus Trap Callout', code: CalloutFocusTrapExampleCode, - view: + view: }, { title: 'Callout with directional hint', diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.FocusTrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.FocusTrap.Example.tsx index d2910dea77ff1..b86325338ea45 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.FocusTrap.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.FocusTrap.Example.tsx @@ -5,15 +5,11 @@ import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/Com import { getId } from 'office-ui-fabric-react/lib/Utilities'; import './CalloutExample.scss'; -export interface ICalloutFocusTrapExampleProps { - items: ICommandBarItemProps[]; -} - export interface ICalloutFocusTrapExampleState { isCalloutVisible: boolean; } -export class CalloutFocusTrapExample extends React.Component { +export class CalloutFocusTrapExample extends React.Component<{}, ICalloutFocusTrapExampleState> { public state: ICalloutFocusTrapExampleState = { isCalloutVisible: false }; @@ -54,7 +50,7 @@ export class CalloutFocusTrapExample extends React.Component - + ) : null} @@ -68,3 +64,22 @@ export class CalloutFocusTrapExample extends React.Component 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 } +]; 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 2e8d950e19b26..f3d6b4ab4c188 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 @@ -5,15 +5,11 @@ import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/Com import { getId } from 'office-ui-fabric-react/lib/Utilities'; import './CalloutExample.scss'; -export interface ICalloutNestedExampleProps { - items: ICommandBarItemProps[]; -} - export interface ICalloutNestedExampleState { isCalloutVisible: boolean; } -export class CalloutNestedExample extends React.Component { +export class CalloutNestedExample extends React.Component<{}, ICalloutNestedExampleState> { public state: ICalloutNestedExampleState = { isCalloutVisible: false }; @@ -54,7 +50,7 @@ export class CalloutNestedExample extends React.Component - + ) : null} @@ -68,3 +64,22 @@ export class CalloutNestedExample extends React.Component 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 } +]; diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx index bade43cac42d8..4a5431a955f2a 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { ColorPicker, Toggle, getColorFromString, IColor } from 'office-ui-fabric-react/lib/index'; +import { ColorPicker, Toggle, getColorFromString, IColor, updateA } from 'office-ui-fabric-react'; import { mergeStyleSets, HighContrastSelector } from 'office-ui-fabric-react/lib/Styling'; -import { updateA } from 'office-ui-fabric-react/lib/utilities/color/updateA'; const classNames = mergeStyleSets({ wrapper: { diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.doc.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.doc.tsx index 29368883f39fd..96c0495e52ea3 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.doc.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.doc.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; import { IDocPageProps } from '../../common/DocPage.types'; -import { ICommandBarProps } from './CommandBar.types'; import { CommandBarBasicExample } from './examples/CommandBar.Basic.Example'; import { CommandBarButtonAsExample } from './examples/CommandBar.ButtonAs.Example'; import { IndividualCommandBarButtonAsExampleWrapper } from './examples/CommandBar.CommandBarButtonAs.Example'; import { CommandBarSplitDisabledExample } from './examples/CommandBar.SplitDisabled.Example'; -import { farItems, items, overflowItems } from './examples/data'; const CommandBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx') as string; @@ -16,12 +14,6 @@ const IndividualCommandBarButtonAsExampleCode = require('!raw-loader!office-ui-f const CommandBarSplitDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.SplitDisabled.Example.tsx') as string; -const cmdBarParamsTextAndIcons: ICommandBarProps = { - items, - overflowItems, - farItems -}; - export const CommandBarPageProps: IDocPageProps = { title: 'CommandBar', componentName: 'CommandBar', @@ -30,22 +22,22 @@ export const CommandBarPageProps: IDocPageProps = { { title: 'CommandBar with overflowing menu items', code: CommandBarBasicExampleCode, - view: + view: }, { title: 'CommandBar custom buttons and overflow menu', code: CommandBarButtonAsExampleCode, - view: + view: }, { title: 'CommandBar with coachmark on individual button', code: IndividualCommandBarButtonAsExampleCode, - view: + view: }, { title: 'CommandBar with split and disabled buttons', code: CommandBarSplitDisabledExampleCode, - view: + view: } ], overview: require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md'), diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx index 7e2340588187d..bf6afd9e24a3d 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.deprecated.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import * as ReactTestUtils from 'react-dom/test-utils'; -import { KeyCodes } from '../../Utilities'; -import { setWarningCallback } from '@uifabric/utilities'; +import { KeyCodes, setWarningCallback } from '../../Utilities'; import { IContextualMenuProps, IContextualMenuItem } from './ContextualMenu.types'; import { ContextualMenu } from './ContextualMenu'; import { ContextualMenuItemType } from './ContextualMenu.types'; diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx index d6af98c616fbb..97f67f20fef11 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.tsx @@ -4,7 +4,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import './ContextualMenuExample.scss'; import { IContextualMenuListProps, IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; -import { IRenderFunction } from '@uifabric/utilities'; +import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities'; const ITEMS: IContextualMenuItem[] = [ { diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts index cb31cfb5a306a..fadd5b98f1bfe 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts @@ -1,6 +1,5 @@ import { IDialogContentStyleProps, IDialogContentStyles } from './DialogContent.types'; -import { FontWeights, getGlobalClassNames } from '../../Styling'; -import { IconFontSizes } from '@uifabric/styling'; +import { FontWeights, getGlobalClassNames, IconFontSizes } from '../../Styling'; const GlobalClassNames = { contentLgHeader: 'ms-Dialog-lgHeader', diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/data.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/data.ts deleted file mode 100644 index 663eeccd6c3e1..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/data.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const completeParts = [ - { - type: 'actions', - actions: ['share', 'pinLeft', 'bell'], - views: 432 - } -]; diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.EventListenerTarget.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.EventListenerTarget.Example.tsx index 5df57138224f0..4249f575a484f 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.EventListenerTarget.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.EventListenerTarget.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { HoverCard, IPlainCardProps, HoverCardType } from 'office-ui-fabric-react/lib/HoverCard'; -import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; +import { HoverCard, IPlainCardProps, HoverCardType, DirectionalHint } from 'office-ui-fabric-react/lib/HoverCard'; import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; import { IconButton } from 'office-ui-fabric-react'; diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/KeytipSetup.ts b/packages/office-ui-fabric-react/src/components/Keytip/examples/KeytipSetup.ts index c31a6ec53ed61..84b3e7825b986 100644 --- a/packages/office-ui-fabric-react/src/components/Keytip/examples/KeytipSetup.ts +++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/KeytipSetup.ts @@ -1,4 +1,4 @@ -import { buildKeytipConfigMap, IKeytipConfig, IKeytipConfigMap } from '../../../utilities/keytips/index'; +import { buildKeytipConfigMap, IKeytipConfig, IKeytipConfigMap } from 'office-ui-fabric-react/lib/utilities/keytips/index'; const btnExecute = (el: HTMLElement) => { el.click(); diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx index a0782ff6a1866..eca6d6fbbe64e 100644 --- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { keytipMap } from './KeytipSetup'; +import { keytipMap } from 'office-ui-fabric-react/lib/components/Keytip/examples/KeytipSetup'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { ComboBox } from 'office-ui-fabric-react/lib/ComboBox'; import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx index 2bae995f9f3d2..f1a27996038cd 100644 --- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button'; -import { keytipMap } from './KeytipSetup'; +import { keytipMap } from 'office-ui-fabric-react/lib/components/Keytip/examples/KeytipSetup'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack'; diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.CommandBar.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.CommandBar.Example.tsx index 86a124af77b5c..86a278a260512 100644 --- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.CommandBar.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.CommandBar.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; -import { keytipMap } from './KeytipSetup'; +import { keytipMap } from 'office-ui-fabric-react/lib/components/Keytip/examples/KeytipSetup'; import { Modal } from 'office-ui-fabric-react/lib/Modal'; import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'; diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Overflow.Example.tsx index cb5e7115f49f5..b9913ecc36858 100644 --- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Overflow.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Overflow.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { keytipMap } from './KeytipSetup'; +import { keytipMap } from 'office-ui-fabric-react/lib/components/Keytip/examples/KeytipSetup'; import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet'; import { CommandBarButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx index 5712c41ef0a57..9094fe11892a8 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx @@ -1,4 +1,4 @@ -import { Customizer, getId } from '@uifabric/utilities'; +import { Customizer, getId } from 'office-ui-fabric-react/lib/Utilities'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { LayerHost } from 'office-ui-fabric-react/lib/Layer'; import { Panel } from 'office-ui-fabric-react/lib/Panel'; diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.PreventDefault.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.PreventDefault.Example.tsx index eb8961adef876..b9d7228fd82c8 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.PreventDefault.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.PreventDefault.Example.tsx @@ -1,4 +1,4 @@ -import { KeyCodes } from '@uifabric/utilities'; +import { KeyCodes } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Presence.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Presence.Example.tsx index 0f617450f902a..fe83fd27fbd49 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Presence.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Presence.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { IPersonaSharedProps, Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona'; import { Label } from 'office-ui-fabric-react/lib/Label'; import { Stack } from 'office-ui-fabric-react/lib/Stack'; -import { mergeStyles } from '@uifabric/merge-styles'; +import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; const examplePersona: IPersonaSharedProps = { imageUrl: 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png', 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 8a120440a948f..3c0f1a755077a 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 @@ -15,7 +15,7 @@ import { TooltipHost, ITooltipHostProps } from 'office-ui-fabric-react/lib/Toolt import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane'; import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import { SelectionMode } from 'office-ui-fabric-react/lib/utilities/selection/index'; +import { SelectionMode } from 'office-ui-fabric-react/lib/Selection'; import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; const classNames = mergeStyleSets({ 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 07f1e755778bf..b713c26acf3d5 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 @@ -3,7 +3,7 @@ import * as React from 'react'; import { IImageProps } from 'office-ui-fabric-react/lib/Image'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble'; -import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; +import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout'; export interface ITeachingBubbleWideIllustrationExampleState { isTeachingBubbleVisible?: boolean; diff --git a/scripts/tasks/lint-imports.js b/scripts/tasks/lint-imports.js index 059bb0f5e3d57..870dd448ea605 100644 --- a/scripts/tasks/lint-imports.js +++ b/scripts/tasks/lint-imports.js @@ -37,7 +37,6 @@ function lintImports() { // These were added to reduce the initial ramifications of disabling relative imports across all examples, // the primary goal being to eliminate usage of relative imports going forward. // TODO: Ideally these would eventually be removed. - 'Chiclet.Basic.Example.tsx', 'ChoiceGroup.Image.Example.tsx', 'DocumentCard.Basic.Example.tsx', 'DocumentCard.Compact.Example.tsx', @@ -51,11 +50,6 @@ function lintImports() { 'Facepile.Overflow.Example.tsx', 'FacepileExampleData.ts', 'FloatingPeoplePicker.Basic.Example.tsx', - 'Icon.ImageSheet.Example.tsx', - 'Keytips.Basic.Example.tsx', - 'Keytips.Button.Example.tsx', - 'Keytips.CommandBar.Example.tsx', - 'Keytips.Overflow.Example.tsx', 'PeoplePicker.Types.Example.tsx', 'PeoplePickerExampleData.ts', 'Persona.Alternate.Example.tsx', @@ -64,15 +58,12 @@ function lintImports() { 'Persona.CustomRender.Example.tsx', 'Persona.UnknownPersona.Example.tsx', 'Persona.Presence.Example.tsx', - 'Picker.CustomResult.Example.tsx', 'SelectedPeopleList.Basic.Example.tsx', 'SelectedPeopleList.Controlled.Example.tsx', 'SelectedPeopleList.WithContextMenu.Example.tsx', 'SelectedPeopleList.WithEdit.Example.tsx', 'SelectedPeopleList.WithEditInContextMenu.Example.tsx', - 'SelectedPeopleList.WithGroupExpand.Example.tsx', - 'TilesList.Document.Example.tsx', - 'TilesList.Media.Example.tsx' + 'SelectedPeopleList.WithGroupExpand.Example.tsx' ]; const packagesInfo = getAllPackageInfo();