Remove global fabric theme load (#515)

* fix(globaltheme): Remove global fabric theme load

* fix textarea height

* revert change to textarea reference

* fix(pickerborder): Fix border color on picker when focused and when item is selected

* chore(reference): Remove .diff and .new png files, and check in new baselines

* Properly use default or given theme in AppContainer, don't force default in ExampleWrapper

* fix(picker): Remove leftover debug code

* fix(suggestionsitemhover): Restore suggestions item hover color

* Move duplicate AppWrapper styles to CustomizerBody styles

* Set docker to share the dist-commonjs directory (build-time bugfix)

* fix(picker): Fix picker hover colors, border colors, suggestions title color

* fix(dropdown): Fix caret padding, option list padding, selected item bgcolor, and hovered item bgcolor

* chore(styleguidevisual): Approve remaining references for visual comparison

* Revert docker config update

* Fix interactive dropdown visual diffs

* Fix Dropdown label margin

* style(picker): Change selector to use aria-selected attribute as the indicator for selected picker item

* Rename picker root classname

* Update AppContainer jest snapshots

* Update Picker and ProgressIndicator jest snapshots

* Revert "style(picker): Change selector to use aria-selected attribute as the indicator for selected picker item"

This reverts commit 5e3c309.

* Update TextField and TextArea jest snapshots

* Update dropdown snapshot

* Fix app container test coverage

* Fix choicegroup test selector and update snapshots

* Fix snapshots changed by Fabric's "styled" HoC change

* Replace TextField's depracated onChanged prop, fix broken test selector and update snapshots

* Update tooltip snapshots

* Revert onChange update to TextField

This will require a larger API change, punting for now

* Update TextField snapshots

Author: dokarns

config/styleguide-visual/reference/Avatar_colors_desktop.png

@@ -10,10 +10,11 @@
     "url": "https://github.com/Microsoft/YamUI.git"
   },
   "dependencies": {
-    "office-ui-fabric-react": "6.25.0",
-    "@researchgate/react-intersection-observer": "0.7.3"
+    "@researchgate/react-intersection-observer": "0.7.3",
+    "office-ui-fabric-react": "6.53.0"
   },
   "devDependencies": {
+    "@uifabric/utilities": "6.16.0",
     "@types/enzyme": "3.1.11",
     "@types/jest": "23.1.4",
     "@types/node": "8.10.21",

config/styleguide-visual/reference/Dropdown_controlled_click_desktop.png

@@ -1,23 +1,10 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
-import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
+import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
 import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
-import { textColors, fontWeights } from '../../util/styles/fonts';
-
-export interface AppContainerClassNameProps {
-  theme: ITheme;
-}
-
-export const getClassNames = memoizeFunction((props: AppContainerClassNameProps) => {
-  const { theme } = props;
-  const font = theme.fonts.medium;
 
+export const getClassNames = memoizeFunction(() => {
   return mergeStyleSets({
     root: {
-      color: textColors(theme).primary,
-      fontSize: font.fontSize,
-      lineHeight: font.lineHeight,
-      fontWeight: fontWeights.normal,
-
       selectors: {
         ':global(html)': {
           /* Sets 1.0rem to 10px */

config/styleguide-visual/reference/Dropdown_controlled_keypress_arrowdown_desktop.png

@@ -3,13 +3,14 @@ import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { NestableBaseComponentProps } from '../../util/BaseComponent/props';
 import AppContainer from '.';
+import { darkTheme } from '../Customizer';
 
 describe('<AppContainer />', () => {
   let component: ShallowWrapper<NestableBaseComponentProps>;
 
   describe('with default options', () => {
     beforeEach(() => {
-      component = shallow(<AppContainer>paragraph text</AppContainer>);
+      component = shallow(<AppContainer>app container text</AppContainer>);
     });
 
     it('matches its snapshot', () => {
@@ -19,7 +20,17 @@ describe('<AppContainer />', () => {
 
   describe('with className', () => {
     beforeEach(() => {
-      component = shallow(<AppContainer className="TEST_CLASSNAME">paragraph text</AppContainer>);
+      component = shallow(<AppContainer className="TEST_CLASSNAME">app container text</AppContainer>);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with theme', () => {
+    beforeEach(() => {
+      component = shallow(<AppContainer theme={darkTheme}>app container text</AppContainer>);
     });
 
     it('matches its snapshot', () => {

config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_click_desktop.png

@@ -3,7 +3,7 @@ import '../../yamui';
 import * as React from 'react';
 import { join } from '../../util/classNames';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { CustomizableComponentProps, defaultTheme } from '../Customizer';
+import Customizer, { CustomizableComponentProps, defaultTheme } from '../Customizer';
 import { NestableBaseComponentProps } from '../../util/BaseComponent/props';
 import { getClassNames } from './AppContainer.styles';
 
@@ -13,10 +13,12 @@ import { getClassNames } from './AppContainer.styles';
 export default class AppContainer extends React.Component<NestableBaseComponentProps & CustomizableComponentProps> {
   public render() {
     const { children, className, theme = defaultTheme } = this.props;
-    const classNames = getClassNames({ theme });
+    const classNames = getClassNames();
     return (
-      <Fabric>
-        <div className={join(['y-appContainer', classNames.root, className])}>{children}</div>
+      <Fabric theme={theme}>
+        <Customizer settings={{ theme }}>
+          <div className={join(['y-appContainer', classNames.root, className])}>{children}</div>
+        </Customizer>
       </Fabric>
     );
   }