diff --git a/config/styleguide-visual/reference/Callout_1_desktop.png b/config/styleguide-visual/reference/Callout_1_desktop.png deleted file mode 100644 index f8539486..00000000 Binary files a/config/styleguide-visual/reference/Callout_1_desktop.png and /dev/null differ diff --git a/config/styleguide-visual/reference/Dropdown_controlled_click_desktop.png b/config/styleguide-visual/reference/Dropdown_controlled_click_desktop.png index 5ad8e3af..e7069f0c 100644 Binary files a/config/styleguide-visual/reference/Dropdown_controlled_click_desktop.png and b/config/styleguide-visual/reference/Dropdown_controlled_click_desktop.png differ diff --git a/config/styleguide-visual/reference/Dropdown_controlled_keypress_arrowdown_desktop.png b/config/styleguide-visual/reference/Dropdown_controlled_keypress_arrowdown_desktop.png index 4439b789..d328e70a 100644 Binary files a/config/styleguide-visual/reference/Dropdown_controlled_keypress_arrowdown_desktop.png and b/config/styleguide-visual/reference/Dropdown_controlled_keypress_arrowdown_desktop.png differ diff --git a/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_click_desktop.png b/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_click_desktop.png index abdd2126..bd70fd40 100644 Binary files a/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_click_desktop.png and b/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_click_desktop.png differ diff --git a/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_keypress_arrowdown_desktop.png b/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_keypress_arrowdown_desktop.png index fe8db224..84473f1b 100644 Binary files a/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_keypress_arrowdown_desktop.png and b/config/styleguide-visual/reference/Dropdown_with_templates_dividers_headers_keypress_arrowdown_desktop.png differ diff --git a/config/styleguide-visual/reference/FileHovercard_1_hover_desktop.png b/config/styleguide-visual/reference/FileHovercard_1_hover_desktop.png index 89ffe82e..c51fe840 100644 Binary files a/config/styleguide-visual/reference/FileHovercard_1_hover_desktop.png and b/config/styleguide-visual/reference/FileHovercard_1_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/GroupHovercard_1_hover_desktop.png b/config/styleguide-visual/reference/GroupHovercard_1_hover_desktop.png index 29078243..d2b42f65 100644 Binary files a/config/styleguide-visual/reference/GroupHovercard_1_hover_desktop.png and b/config/styleguide-visual/reference/GroupHovercard_1_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Hovercard_alignments_hover_desktop.png b/config/styleguide-visual/reference/Hovercard_alignments_hover_desktop.png index 5c5d4f82..028eaf57 100644 Binary files a/config/styleguide-visual/reference/Hovercard_alignments_hover_desktop.png and b/config/styleguide-visual/reference/Hovercard_alignments_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Hovercard_click_trigger_click_desktop.png b/config/styleguide-visual/reference/Hovercard_click_trigger_click_desktop.png index 5a357f88..0d5f80c8 100644 Binary files a/config/styleguide-visual/reference/Hovercard_click_trigger_click_desktop.png and b/config/styleguide-visual/reference/Hovercard_click_trigger_click_desktop.png differ diff --git a/config/styleguide-visual/reference/Hovercard_default_hover_trigger_hover_desktop.png b/config/styleguide-visual/reference/Hovercard_default_hover_trigger_hover_desktop.png index 79e1f026..6aacc321 100644 Binary files a/config/styleguide-visual/reference/Hovercard_default_hover_trigger_hover_desktop.png and b/config/styleguide-visual/reference/Hovercard_default_hover_trigger_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Hovercard_without_beak_hover_desktop.png b/config/styleguide-visual/reference/Hovercard_without_beak_hover_desktop.png index edd31007..8d021262 100644 Binary files a/config/styleguide-visual/reference/Hovercard_without_beak_hover_desktop.png and b/config/styleguide-visual/reference/Hovercard_without_beak_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Tooltip_basic_hover_desktop.png b/config/styleguide-visual/reference/Tooltip_basic_hover_desktop.png index 995c0f36..303dbaeb 100644 Binary files a/config/styleguide-visual/reference/Tooltip_basic_hover_desktop.png and b/config/styleguide-visual/reference/Tooltip_basic_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Tooltip_dark_background_hover_desktop.png b/config/styleguide-visual/reference/Tooltip_dark_background_hover_desktop.png index 54ce71a9..c761d0bb 100644 Binary files a/config/styleguide-visual/reference/Tooltip_dark_background_hover_desktop.png and b/config/styleguide-visual/reference/Tooltip_dark_background_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Tooltip_long_text_hover_desktop.png b/config/styleguide-visual/reference/Tooltip_long_text_hover_desktop.png index d8bbfe96..f93fa667 100644 Binary files a/config/styleguide-visual/reference/Tooltip_long_text_hover_desktop.png and b/config/styleguide-visual/reference/Tooltip_long_text_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/Tooltip_with_directional_hint_hover_desktop.png b/config/styleguide-visual/reference/Tooltip_with_directional_hint_hover_desktop.png index f184aa2e..808c627a 100644 Binary files a/config/styleguide-visual/reference/Tooltip_with_directional_hint_hover_desktop.png and b/config/styleguide-visual/reference/Tooltip_with_directional_hint_hover_desktop.png differ diff --git a/config/styleguide-visual/reference/UserHovercard_1_hover_desktop.png b/config/styleguide-visual/reference/UserHovercard_1_hover_desktop.png index 8b55dea3..0c90e8a7 100644 Binary files a/config/styleguide-visual/reference/UserHovercard_1_hover_desktop.png and b/config/styleguide-visual/reference/UserHovercard_1_hover_desktop.png differ diff --git a/src/components/Callout/Callout.css b/src/components/Callout/Callout.css deleted file mode 100644 index bd6e47a7..00000000 --- a/src/components/Callout/Callout.css +++ /dev/null @@ -1,7 +0,0 @@ -/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ -@import 'src/css/variables/borders.css'; - -/* Fabric Callout box-shadow override */ -.ms-Callout { - @mixin borderStylePopOver; -} diff --git a/src/components/Callout/Callout.md b/src/components/Callout/Callout.md deleted file mode 100644 index 028c905e..00000000 --- a/src/components/Callout/Callout.md +++ /dev/null @@ -1,40 +0,0 @@ -### Notes for use - -Callout is simply [exported from Fabric](https://developer.microsoft.com/en-us/fabric#/components/callout), with some minor YamUI styling. It is meant to be used as a utility component by other YamUI components like Hovercard and Tooltip, you probably don't need to use it directly in your application UIs. - - -### Examples - -Basic usage: - -```js -class MyComponent extends React.Component { - constructor() { - super(); - - this.state = { - visible: false, - }; - } - - render() { - const callout = this.state.visible && ( - -
This message is displayed in the Callout popover!
- - ); - - return ( - - (this.triggerElement = node)} onClick={() => this.setState({ visible: !this.state.visible })}> - {this.props.children} - - {callout} - - ); - } -} - - -Click me -``` diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx deleted file mode 100644 index e22c444c..00000000 --- a/src/components/Callout/Callout.tsx +++ /dev/null @@ -1,7 +0,0 @@ -/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ -import '../../yamui'; -import { Callout, ICalloutProps as CalloutProps, DirectionalHint } from 'office-ui-fabric-react/lib/Callout'; -import './Callout.css'; - -export default Callout; -export { CalloutProps, DirectionalHint }; diff --git a/src/components/Callout/index.ts b/src/components/Callout/index.ts deleted file mode 100644 index 2fee3cde..00000000 --- a/src/components/Callout/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */ -export { default } from './Callout'; -export * from './Callout'; diff --git a/src/components/Dropdown/Dropdown.css b/src/components/Dropdown/Dropdown.css index bc613b37..2fed0902 100644 --- a/src/components/Dropdown/Dropdown.css +++ b/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; +} diff --git a/src/components/Hovercard/Hovercard.styles.ts b/src/components/Hovercard/Hovercard.styles.ts index 960cade4..7dd0f64c 100644 --- a/src/components/Hovercard/Hovercard.styles.ts +++ b/src/components/Hovercard/Hovercard.styles.ts @@ -1,8 +1,10 @@ /*! 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({ @@ -10,9 +12,14 @@ export const getClassNames = memoizeFunction(() => width: '340px', fontSize: fontSizes.medium, lineHeight: lineHeights.medium, + ...borderStylePopOver, }, header: { borderBottom: `2px solid ${palette.neutralLighter}`, }, }), ); + +export const getCalloutStyles = memoizeFunction((): Partial => { + return { root: borderStylePopOver }; +}); diff --git a/src/components/Hovercard/Hovercard.test.tsx b/src/components/Hovercard/Hovercard.test.tsx index fa14e7ab..1dbb7270 100644 --- a/src/components/Hovercard/Hovercard.test.tsx +++ b/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 '.'; diff --git a/src/components/Hovercard/Hovercard.tsx b/src/components/Hovercard/Hovercard.tsx index 4c06d227..77875026 100644 --- a/src/components/Hovercard/Hovercard.tsx +++ b/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
{ contextualMenuItemAs: this.getMenuItemContent, calloutProps: { className: 'y-menu-button--callout', + styles: getCalloutStyles, }, }; }