[EuiTour] Fix panelProps overriding Emotion css + misc cleanup

src-docs/src/views/tour/step.js

@@ -25,6 +25,7 @@ export default () => {
         title="Title of the current step"
         subtitle="Title of the full tour (optional)"
         anchorPosition="rightUp"
+        panelProps={{ 'data-test-subj': 'test' }}
       >
         <EuiText>
           The tour step{' '}

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

@@ -57,7 +57,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -160,7 +160,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -268,7 +268,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -458,7 +458,7 @@ exports[`EuiTourStep is rendered 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>

src/components/tour/tour.styles.ts

@@ -14,7 +14,7 @@ import {
   COLOR_MODES_STANDARD,
   EuiThemeColorModeStandard,
 } from '../../services';
-import { logicalCSS, mathWithUnits } from '../../global_styling';
+import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
 import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
 import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
 
@@ -26,19 +26,11 @@ const backgroundColor = (color: string, colorMode: EuiThemeColorModeStandard) =>
 export const euiTourStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
   // Targets EuiPopoverPanel
   euiTour: css`
-    &[data-popover-open='true'] {
-      [class*='euiTourBeacon'] {
-        opacity: 1; // Must alter here otherwise the transition does not occur
-      }
-    }
-
-    [data-popover-arrow='top'] {
-      &:before {
-        ${logicalCSS(
-          'border-top-color',
-          backgroundColor(euiTheme.colors.lightestShade, colorMode)
-        )};
-      }
+    [data-popover-arrow='top']::before {
+      ${logicalCSS(
+        'border-top-color',
+        backgroundColor(euiTheme.colors.lightestShade, colorMode)
+      )};
     }
   `,
 });
@@ -53,10 +45,16 @@ export const euiTourBeaconStyles = ({ euiTheme }: UseEuiTheme) => {
     euiTourBeacon: css`
       pointer-events: none;
       position: absolute;
-      opacity: 0;
-      transition: opacity 0s ${euiTheme.animation[openAnimationTiming]};
+      ${euiCanAnimate} {
+        opacity: 0;
+        transition: opacity 0s ${euiTheme.animation[openAnimationTiming]};
+      }
+    `,
+    isOpen: css`
+      ${euiCanAnimate} {
+        opacity: 1; // Must alter here otherwise the transition does not occur
+      }
     `,
-
     // Positions
     right: css`
       ${logicalCSS('top', arrowHalfSize)};
@@ -84,7 +82,6 @@ export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
     // Overriding default EuiPopoverTitle styles
     ${logicalCSS('margin-bottom', euiTheme.size.s)};
   `,
-
   // Elements
   euiTourHeader__title: css`
     // Removes extra margin applied to sibling EuiTitle's

src/components/tour/tour_step.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiTourStep } from './tour_step';
 
@@ -29,10 +30,24 @@ const config = {
   title: 'A demo',
 };
 
+const props = { ...config, ...steps[0], ...requiredProps };
+
 describe('EuiTourStep', () => {
+  shouldRenderCustomStyles(
+    <EuiTourStep {...props} isStepOpen>
+      <span>Test</span>
+    </EuiTourStep>
+  );
+  shouldRenderCustomStyles(
+    <EuiTourStep {...props} isStepOpen panelProps={requiredProps}>
+      <span>Test</span>
+    </EuiTourStep>,
+    { childProps: ['panelProps'], skipStyles: true, skipParentTest: true }
+  );
+
   test('is rendered', () => {
     const component = mount(
-      <EuiTourStep {...config} {...steps[0]} isStepOpen {...requiredProps}>
+      <EuiTourStep {...props} isStepOpen>
         <span>Test</span>
       </EuiTourStep>
     );
@@ -42,13 +57,7 @@ describe('EuiTourStep', () => {
 
   test('can have subtitle', () => {
     const component = mount(
-      <EuiTourStep
-        {...config}
-        {...steps[0]}
-        isStepOpen
-        subtitle="Subtitle"
-        {...requiredProps}
-      >
+      <EuiTourStep {...props} isStepOpen subtitle="Subtitle">
         <span>Test</span>
       </EuiTourStep>
     );
@@ -58,12 +67,7 @@ describe('EuiTourStep', () => {
 
   test('can be closed', () => {
     const component = mount(
-      <EuiTourStep
-        {...config}
-        {...steps[0]}
-        isStepOpen={false}
-        {...requiredProps}
-      >
+      <EuiTourStep {...props} isStepOpen={false}>
         <span>Test</span>
       </EuiTourStep>
     );
@@ -73,14 +77,7 @@ describe('EuiTourStep', () => {
 
   test('can change the minWidth and maxWidth', () => {
     const component = mount(
-      <EuiTourStep
-        {...config}
-        {...steps[0]}
-        minWidth={240}
-        maxWidth={420}
-        isStepOpen
-        {...requiredProps}
-      >
+      <EuiTourStep {...props} minWidth={240} maxWidth={420} isStepOpen>
         <span>Test</span>
       </EuiTourStep>
     );
@@ -91,11 +88,9 @@ describe('EuiTourStep', () => {
   test('can override the footer action', () => {
     const component = mount(
       <EuiTourStep
-        {...config}
-        {...steps[0]}
+        {...props}
         isStepOpen
         footerAction={<button onClick={() => {}}>Test</button>}
-        {...requiredProps}
       >
         <span>Test</span>
       </EuiTourStep>
@@ -106,13 +101,7 @@ describe('EuiTourStep', () => {
 
   test('can turn off the beacon', () => {
     const component = mount(
-      <EuiTourStep
-        {...config}
-        {...steps[0]}
-        isStepOpen
-        decoration="none"
-        {...requiredProps}
-      >
+      <EuiTourStep {...props} isStepOpen decoration="none">
         <span>Test</span>
       </EuiTourStep>
     );

src/components/tour/tour_step.tsx

@@ -139,6 +139,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
   anchor,
   children,
   className,
+  css,
   closePopover = () => {},
   content,
   isStepOpen = false,
@@ -152,6 +153,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
   title,
   decoration = 'beacon',
   footerAction,
+  panelProps,
   ...rest
 }) => {
   const titleId = useGeneratedHtmlId();
@@ -192,6 +194,7 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
   const beaconStyles = euiTourBeaconStyles(euiTheme);
   const beaconCss = [
     beaconStyles.euiTourBeacon,
+    isStepOpen && beaconStyles.isOpen,
     popoverPosition && beaconStyles[popoverPosition],
   ];
 
@@ -262,7 +265,10 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
-    panelProps: { css: tourStyles.euiTour },
+    panelProps: {
+      ...panelProps,
+      css: [tourStyles.euiTour, css, panelProps?.css],
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && (

upcoming_changelogs/6298.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear