[spike] remove callout component

src/components/Hovercard/Hovercard.styles.ts

@@ -0,0 +1,7 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import { memoizeFunction } from '@uifabric/utilities';
+import { borderStylePopOver } from '../../util/styles/borders';
+
+export const getCalloutStyles = memoizeFunction(() => () => ({
+  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,10 +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 { getCalloutStyles } from './Hovercard.styles';
 import './Hovercard.css';
 
 const hideDelay = 500;
@@ -111,6 +112,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" onMouseEnter={this.handleBodyHover} onMouseLeave={this.beginHide}>
           {screenreaderTitleChild}

src/components/Hovercard/__snapshots__/Hovercard.test.tsx.snap

@@ -53,6 +53,7 @@ exports[`<Hovercard /> with screenreaderTitle matches its snapshot 1`] = `
     isBeakVisible={true}
     onDismiss={[Function]}
     preventDismissOnScroll={false}
+    styles={[Function]}
     target={null}
   >
     <div

src/components/Tooltip/Tooltip.styles.ts

@@ -2,7 +2,7 @@
 import { palette } from '../../util/colors';
 import { TooltipProps } from './Tooltip';
 import { lineHeights, fontSizes } from '../../util/styles/fonts';
-import { borderRadiusSoft } from '../../util/styles/borders';
+import { borderRadiusSoft, borderStylePopOver } from '../../util/styles/borders';
 
 import { ITooltipStyles } from 'office-ui-fabric-react/lib/components/Tooltip/Tooltip.types';
 import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/components/Callout/Callout.types';
@@ -30,20 +30,21 @@ export const getCalloutStyles = (_: TooltipProps): ICalloutContentStyles => {
     },
     root: {
       backgroundColor: 'inherit',
-      boxShadow: 'none',
       padding: '0.7rem 1.2rem 0.8rem',
       minHeight: '3.2rem',
       zIndex: 1000,
-      border: 'none',
+      ...borderStylePopOver,
     },
     beak: {
       backgroundColor: palette.neutralPrimary,
     },
     beakCurtain: {
+      boxShadow: 'none',
       backgroundColor: palette.neutralPrimary,
       borderRadius: borderRadiusSoft,
     },
     calloutMain: {
+      boxShadow: 'none',
       backgroundColor: palette.neutralPrimary,
     },
   };

src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -12,17 +12,21 @@ exports[`<Tooltip /> with additional className matches its snapshot 1`] = `
         "beakCurtain": Object {
           "backgroundColor": "#343A41",
           "borderRadius": "2px",
+          "boxShadow": "none",
         },
         "calloutMain": Object {
           "backgroundColor": "#343A41",
+          "boxShadow": "none",
         },
         "container": Object {
           "backgroundColor": "inherit",
         },
         "root": Object {
           "backgroundColor": "inherit",
           "border": "none",
-          "boxShadow": "none",
+          "borderRadius": "1px",
+          "borderWidth": 0,
+          "boxShadow": "0 0 12px rgba(0, 0, 0, 0.2)",
           "minHeight": "3.2rem",
           "padding": "0.7rem 1.2rem 0.8rem",
           "zIndex": 1000,
@@ -65,17 +69,21 @@ exports[`<Tooltip /> with default options matches its snapshot 1`] = `
         "beakCurtain": Object {
           "backgroundColor": "#343A41",
           "borderRadius": "2px",
+          "boxShadow": "none",
         },
         "calloutMain": Object {
           "backgroundColor": "#343A41",
+          "boxShadow": "none",
         },
         "container": Object {
           "backgroundColor": "inherit",
         },
         "root": Object {
           "backgroundColor": "inherit",
           "border": "none",
-          "boxShadow": "none",
+          "borderRadius": "1px",
+          "borderWidth": 0,
+          "boxShadow": "0 0 12px rgba(0, 0, 0, 0.2)",
           "minHeight": "3.2rem",
           "padding": "0.7rem 1.2rem 0.8rem",
           "zIndex": 1000,
@@ -120,17 +128,21 @@ exports[`<Tooltip /> with directionalHint matches its snapshot 1`] = `
         "beakCurtain": Object {
           "backgroundColor": "#343A41",
           "borderRadius": "2px",
+          "boxShadow": "none",
         },
         "calloutMain": Object {
           "backgroundColor": "#343A41",
+          "boxShadow": "none",
         },
         "container": Object {
           "backgroundColor": "inherit",
         },
         "root": Object {
           "backgroundColor": "inherit",
           "border": "none",
-          "boxShadow": "none",
+          "borderRadius": "1px",
+          "borderWidth": 0,
+          "boxShadow": "0 0 12px rgba(0, 0, 0, 0.2)",
           "minHeight": "3.2rem",
           "padding": "0.7rem 1.2rem 0.8rem",
           "zIndex": 1000,

src/util/styles/borders.ts

@@ -1,3 +1,9 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 export const borderRadiusSoft = '2px';
 export const borderRadiusRound = '50%';
+export const borderStylePopOver = {
+  boxShadow: '0 0 12px rgba(0, 0, 0, 0.2)',
+  border: 'none',
+  borderRadius: '1px',
+  borderWidth: 0,
+};