microsoft · dzearing · Apr 19, 2018 · Apr 18, 2018 · Apr 18, 2018
@@ -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": "[email protected]"
+}
@@ -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<IActivityItemProps, {}> {
       onRenderActivityDescription = this._onRenderActivityDescription,
       onRenderComments = this._onRenderComments,
       onRenderTimeStamp = this._onRenderTimeStamp,
-      styles: customStyles,
       animateBeaconSignal,
       isCompact
     } = this.props;

@@ -431,7 +431,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     if (this._splitButtonContainer.value) {
       this._splitButtonContainer.value.focus();
     }
-    const { menuProps } = this.props;
+
     const currentMenuProps = this.state.menuProps;
     if (this.props.persistMenu) {
       currentMenuProps && currentMenuProps.hidden ? this._openMenu() : this._dismissMenu();
@@ -446,7 +446,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       disabled,
       checked,
       getSplitButtonClassNames,
-      onClick,
       primaryDisabled
     } = this.props;
 

@@ -1,6 +1,5 @@
 import {
   IStyle,
-  IRawStyle,
   keyframes,
   PulsingBeaconAnimationStyles,
   ITheme,

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  IPositioningContainer,
-  IPositioningContainerTypes
-} from './PositioningContainer.types';
+import { IPositioningContainerTypes } from './PositioningContainer.types';
 import { getClassNames } from './PositioningContainer.styles';
 import { Layer } from 'office-ui-fabric-react/lib/Layer';
 

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IComboBoxOption, IComboBoxProps, IComboBoxOptionStyles } from './ComboBox.types';
+import { IComboBoxOption, IComboBoxProps } from './ComboBox.types';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { Callout } from '../../Callout';
 import { Label } from '../../Label';
@@ -297,7 +297,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       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<IComboBoxProps, IComboBoxState> {
       currentPendingValue,
       currentPendingValueValidIndex,
       currentOptions,
-      selectedIndices
     } = this.state;
 
     if (this.props.autoComplete === 'on') {
@@ -1158,7 +1157,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       currentPendingValueValidIndexOnHover,
       currentPendingValueValidIndex,
       currentPendingValue,
-      selectedIndices
     } = this.state;
 
     return (
@@ -1197,7 +1195,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const {
       currentPendingValueValidIndex,
       currentPendingValue,
-      selectedIndices
     } = this.state;
 
     if (onScrollToItem) {
@@ -1299,7 +1296,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   private _resetSelectedIndex() {
     const {
-      selectedIndices,
       currentOptions
     } = this.state;
     if (this._autofill.value) {
@@ -1367,7 +1363,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection) {
     const {
-      isOpen,
       currentOptions
     } = this.state;
 
@@ -1458,8 +1453,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const {
       isOpen,
       currentOptions,
-      currentPendingValueValidIndexOnHover,
-      selectedIndices
+      currentPendingValueValidIndexOnHover
     } = this.state;
 
     if (disabled) {

@@ -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 (
       <div className='ms-ComboBoxBasicExample'>
@@ -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
         />
 
         <ComboBox
@@ -286,7 +286,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
         />
       </div>
 
@@ -341,7 +341,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
 
     this.setState({
       optionsMulti: INITIAL_OPTIONS,
-      selectedOptionKeys: [ 'C1' ],
+      selectedOptionKeys: ['C1'],
       valueMulti: undefined
     });
 

@@ -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';

@@ -39,7 +39,6 @@ describe('DetailsHeader', () => {
     ): { size: number; index: number; } => lastResize = { size, index };
     const headerRef = createRef<IDetailsHeader>();
 
-    const columns = [];
     const wrapper = mount(
       <DetailsHeader
         componentRef={ headerRef }
@@ -51,7 +50,6 @@ describe('DetailsHeader', () => {
       />
     );
 
-    const rootElement = wrapper.getDOMNode();
     const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode();
     const header: any = headerRef.value;
 

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   IComponentDemoPageProps,

@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { IDocumentCardStatusProps } from './DocumentCard.types';

@@ -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';
 

@@ -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';
 

@@ -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';
 

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import {
-  Link
-} from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   IComponentDemoPageProps,

@@ -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';

@@ -32,7 +32,7 @@ export class LayerPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title='Using LayerHost to control projection' code={ LayerHostedExampleCode }>
               <LayerHostedExample />
             </ExampleCard>
-            <ExampleCard title='Using Customizer to control the default layer behavior' code={ LayerHostedExampleCode }>
+            <ExampleCard title='Using Customizer to control the default layer behavior' code={ LayerCustomizedExampleCode }>
               <LayerCustomizedExample />
             </ExampleCard>
           </div>

@@ -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';

@@ -6,7 +6,6 @@ import {
   getNativeProps,
   divProperties,
   focusFirstChild,
-  getFirstFocusable,
   elementContains
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';

@@ -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';
 

@@ -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';

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   PersonaPresence,
   PersonaSize,

@@ -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);

@@ -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: [

@@ -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';
 

@@ -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%': {

@@ -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,