diff --git a/CHANGELOG.md b/CHANGELOG.md index 369f8c20ad..0f3d4ddc18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix a gap in `Checkbox` in RTL mode @layershifter ([#1683](https://github.com/stardust-ui/react/pull/1683)) +- Fix broken background in `Popup` with `pointing` and `FocusTrap` @layershifter ([#1689](https://github.com/stardust-ui/react/pull/1689)) ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11) diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts index 1f914b4e4b..f5aa21e922 100644 --- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts +++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts @@ -1,3 +1,5 @@ +import * as _ from 'lodash' +import * as React from 'react' import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { PopupProps } from '../../../../components/Popup/Popup' import { PopupVariables } from './popupVariables' @@ -5,12 +7,29 @@ import { PopupVariables } from './popupVariables' const popupStyles: ComponentSlotStylesInput = { root: (): ICSSInJSStyle => ({}), - popup: ({ variables: v }): ICSSInJSStyle => ({ + popup: ({ props: p, variables: v }): ICSSInJSStyle => ({ zIndex: v.zIndex, position: 'absolute', textAlign: 'left', - color: v.contentColor, - background: v.contentBackgroundColor, + + /* + * This fix handles all cases with wrapped focus trap. + */ + ...((React.isValidElement(p.content) || _.isFunction(p.content)) && { + // when FocusTrap exists and `context` is JSX element or render() callback + color: v.contentColor, + background: v.contentBackgroundColor, + }), + '&.ui-popup__content': { + // when there is no FocusTrap + color: v.contentColor, + background: v.contentBackgroundColor, + }, + '& .ui-popup__content': { + // when FocusTrap exists + color: v.contentColor, + background: v.contentBackgroundColor, + }, }), }