[spike] remove callout component

src/components/Dropdown/Dropdown.css

@@ -1,6 +1,7 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 @import 'src/css/variables/colors.css';
 @import 'src/css/variables/fonts.css';
+@import 'src/css/variables/borders.css';
 
 /* Label element above the Dropdown */
 .y-dropdown .ms-Dropdown-label {
@@ -87,3 +88,12 @@
 .y-dropdown .ms-Callout-container {
   z-index: 1000;
 }
+
+/* Prevent top shadow of callout from overlapping dropdown. */
+.y-dropdown .ms-Dropdown {
+  z-index: 1001;
+}
+
+.y-dropdown .ms-Dropdown-callout {
+  @mixin borderStylePopOver;
+}

src/components/Hovercard/Hovercard.styles.ts

@@ -1,18 +1,25 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import { palette } from '../../util/colors';
+import { borderStylePopOver } from '../../util/styles/borders';
 import { fontSizes, lineHeights } from '../../util/styles/fonts';
 import { mergeStyleSets } from '@uifabric/styling';
 import { memoizeFunction } from '@uifabric/utilities';
+import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
 
 export const getClassNames = memoizeFunction(() =>
   mergeStyleSets({
     modalContainer: {
       width: '340px',
       fontSize: fontSizes.medium,
       lineHeight: lineHeights.medium,
+      ...borderStylePopOver,
     },
     header: {
       borderBottom: `2px solid ${palette.neutralLighter}`,
     },
   }),
 );
+
+export const getCalloutStyles = memoizeFunction((): Partial<ICalloutContentStyles> => {
+  return { root: borderStylePopOver };
+});

src/components/Hovercard/Hovercard.test.tsx

@@ -1,7 +1,7 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
 import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
-import Callout from '../Callout';
+import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { KeyCodes } from '../../util/keyCodes';
 import { Hovercard, HovercardProps, HovercardState, TriggerType } from '.';
 

src/components/Hovercard/Hovercard.tsx

@@ -2,11 +2,11 @@
 import '../../yamui';
 import * as React from 'react';
 import { join } from '../../util/classNames';
-import Callout, { DirectionalHint } from '../Callout';
+import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { NestableBaseComponentProps } from '../../util/BaseComponent/props';
 import { KeyCodes } from '../../util/keyCodes';
 import ScreenreaderText from '../ScreenreaderText';
-import { getClassNames } from './Hovercard.styles';
+import { getClassNames, getCalloutStyles } from './Hovercard.styles';
 
 const hideDelay = 500;
 const showDelay = 750;
@@ -117,6 +117,7 @@ export default class Hovercard extends React.Component<HovercardProps, Hovercard
             target={this.triggerElement}
             onDismiss={this.hide}
             preventDismissOnScroll={false}
+            styles={getCalloutStyles}
           >
             <div
               className={`y-hovercard--modal-container ${classNames.modalContainer}`}

src/components/MenuButton/MenuButton.tsx

@@ -15,6 +15,7 @@ import { IconSize, BaseIcon } from '../Icon';
 import MoreIcon from '../Icon/icons/More';
 import MenuButtonItem from './MenuButtonItem';
 import { MenuItemType } from './types';
+import { getCalloutStyles } from './MenuButton.styles';
 import './MenuButton.css';
 
 export { MenuItemType };
@@ -139,6 +140,7 @@ export default class MenuButton extends React.Component<MenuButtonProps> {
       contextualMenuItemAs: this.getMenuItemContent,
       calloutProps: {
         className: 'y-menu-button--callout',
+        styles: getCalloutStyles,
       },
     };
   }