Add panelStyle prop to EuiPopover; Fix EuiTourStep minWidth prop …

…placement (#3329) * add panelStyle prop * CL
elastic · Apr 16, 2020 · 0e80f04 · 0e80f04
1 parent e2e9214
commit 0e80f04
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/CHANGELOG.md b/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**
 

diff --git a/src/components/popover/popover.tsx b/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,

diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/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"

diff --git a/src/components/tour/tour_step.tsx b/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