From ef7db19343ac97e5acd4cd147256831a81fe76e0 Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 6 Oct 2022 13:17:04 -0700 Subject: [PATCH] [EuiTour] Fix `panelProps` overriding Emotion css + misc cleanup (#6298) * [REVERT ME] QA testing * Fix passed `panelProps` overriding tour CSS * Fix `css` being passed to EuiTour and to panelProps not merging with euiTour css - this behavior is tbh a little confusing since the component classes target the popover panel, so i just merged both so that consumers could target either * [misc] DRY out repeated test props required for rendering * Styles cleanup - add euiCanAnimate to transition - flatten opacity CSS - flatten before psuedo selector * changelog * Revert "[REVERT ME] QA testing" This reverts commit d3776e591abfdb6851d5e9ddadddb6c9262ce955. --- .../__snapshots__/tour_step.test.tsx.snap | 8 +-- src/components/tour/tour.styles.ts | 33 ++++++------ src/components/tour/tour_step.test.tsx | 53 ++++++++----------- src/components/tour/tour_step.tsx | 8 ++- upcoming_changelogs/6298.md | 3 ++ 5 files changed, 50 insertions(+), 55 deletions(-) create mode 100644 upcoming_changelogs/6298.md diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index d2e87e34b43..3799fce9128 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/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;" >
@@ -160,7 +160,7 @@ exports[`EuiTourStep can have subtitle 1`] = ` style="left: 0px; top: 10px;" >
@@ -268,7 +268,7 @@ exports[`EuiTourStep can override the footer action 1`] = ` style="left: 0px; top: 10px;" >
@@ -458,7 +458,7 @@ exports[`EuiTourStep is rendered 1`] = ` style="left: 0px; top: 10px;" >
diff --git a/src/components/tour/tour.styles.ts b/src/components/tour/tour.styles.ts index 4cfe96a6c90..76680b4f298 100644 --- a/src/components/tour/tour.styles.ts +++ b/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 diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx index ad24f2ff247..6d10ba56ea9 100644 --- a/src/components/tour/tour_step.test.tsx +++ b/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( + + Test + + ); + shouldRenderCustomStyles( + + Test + , + { childProps: ['panelProps'], skipStyles: true, skipParentTest: true } + ); + test('is rendered', () => { const component = mount( - + Test ); @@ -42,13 +57,7 @@ describe('EuiTourStep', () => { test('can have subtitle', () => { const component = mount( - + Test ); @@ -58,12 +67,7 @@ describe('EuiTourStep', () => { test('can be closed', () => { const component = mount( - + Test ); @@ -73,14 +77,7 @@ describe('EuiTourStep', () => { test('can change the minWidth and maxWidth', () => { const component = mount( - + Test ); @@ -91,11 +88,9 @@ describe('EuiTourStep', () => { test('can override the footer action', () => { const component = mount( {}}>Test} - {...requiredProps} > Test @@ -106,13 +101,7 @@ describe('EuiTourStep', () => { test('can turn off the beacon', () => { const component = mount( - + Test ); diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 7d9eb067f92..97cd3c36170 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -139,6 +139,7 @@ export const EuiTourStep: FunctionComponent = ({ anchor, children, className, + css, closePopover = () => {}, content, isStepOpen = false, @@ -152,6 +153,7 @@ export const EuiTourStep: FunctionComponent = ({ title, decoration = 'beacon', footerAction, + panelProps, ...rest }) => { const titleId = useGeneratedHtmlId(); @@ -192,6 +194,7 @@ export const EuiTourStep: FunctionComponent = ({ const beaconStyles = euiTourBeaconStyles(euiTheme); const beaconCss = [ beaconStyles.euiTourBeacon, + isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition], ]; @@ -262,7 +265,10 @@ export const EuiTourStep: FunctionComponent = ({ 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 && ( diff --git a/upcoming_changelogs/6298.md b/upcoming_changelogs/6298.md new file mode 100644 index 00000000000..d990cfc3aa6 --- /dev/null +++ b/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