Add panelStyle prop to EuiPopover; Fix EuiTourStep minWidth prop placement

CHANGELOG.md

@@ -1,11 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))
+- Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329))
 
 **Bug Fixes**
 
 - Fixed `EuiInMemoryTable` `isClearable` property to initiate reset ([#3328](https://github.com/elastic/eui/pull/3328))
 - Fixed `EuiCollapsibleNav` docked states on mobile ([#3330](https://github.com/elastic/eui/pull/3330))
+- Fixed `EuiPopover` positioning from being overridden by `style` prop ([#3329](https://github.com/elastic/eui/pull/3329))
 
 **Breaking changes**
 

src/components/popover/popover.tsx

@@ -120,6 +120,11 @@ export interface EuiPopoverProps {
 
  panelRef?: RefCallback<HTMLElement | null>;
 
+ /**
+ * Optional, standard DOM `style` attribute. Passed to the EuiPanel.
+ */
+ panelStyle?: CSSProperties;
+
  popoverRef?: Ref<HTMLDivElement>;
 
  /** When `true`, the popover's position is re-calculated when the user
@@ -137,8 +142,6 @@ export interface EuiPopoverProps {
  */
  onTrapDeactivation?: ReactFocusLockProps['onDeactivation'];
 
- style?: CSSProperties;
-
  /**
  * Distance away from the anchor that the popover will render.
  */
@@ -529,13 +532,13 @@ export class EuiPopover extends Component<Props, State> {
  : zIndexProp;
 
  const popoverStyles = {
+ ...this.props.panelStyle,
  top,
  left:
  this.props.attachToAnchor && anchorBoundingBox
  ? anchorBoundingBox.left
  : left,
  zIndex,
- ...this.props.style,
  };
 
  const willRenderArrow = !this.props.attachToAnchor && this.props.hasArrow;
@@ -600,6 +603,7 @@ export class EuiPopover extends Component<Props, State> {
  panelClassName,
  panelPaddingSize,
  panelRef,
+ panelStyle,
  popoverRef,
  hasArrow,
  arrowChildren,

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -40,7 +40,6 @@ exports[`EuiTourStep can set a minWidth 1`] = `
  class="euiPopover euiPopover--anchorLeftUp euiPopover--withTitle"
  data-test-subj="test subject string"
  offset="10"
- style="min-width:240px"
 >
  <div
  class="euiPopover__anchor"

src/components/tour/tour_step.tsx

@@ -89,7 +89,7 @@ export interface EuiTourStepProps
  stepsTotal: number;
 
  /**
- * Optional, standard DOM `style` attribute
+ * Optional, standard DOM `style` attribute. Passed to the EuiPopover panel.
  */
  style?: CSSProperties;
 
@@ -214,7 +214,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
  closePopover={closePopover}
  isOpen={isStepOpen}
  panelClassName={classes}
- style={newStyle || style}
+ panelStyle={newStyle || style}
  offset={hasBeacon ? 10 : 0}
  arrowChildren={hasBeacon && <EuiBeacon className="euiTour__beacon" />}
  withTitle