From d3776e591abfdb6851d5e9ddadddb6c9262ce955 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:13:49 -0700 Subject: [PATCH 1/7] [REVERT ME] QA testing --- src-docs/src/views/tour/step.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src-docs/src/views/tour/step.js b/src-docs/src/views/tour/step.js index deed9fa7880..71398f0d19c 100644 --- a/src-docs/src/views/tour/step.js +++ b/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' }} > The tour step{' '} From 15bfbd8ac0bac2dcc02c13cbe216e3629ad52a64 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:01:27 -0700 Subject: [PATCH 2/7] Fix passed `panelProps` overriding tour CSS --- src/components/tour/tour_step.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 7d9eb067f92..38ff3b4114e 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -152,6 +152,7 @@ export const EuiTourStep: FunctionComponent = ({ title, decoration = 'beacon', footerAction, + panelProps, ...rest }) => { const titleId = useGeneratedHtmlId(); @@ -262,7 +263,7 @@ export const EuiTourStep: FunctionComponent = ({ ownFocus: false, panelClassName: classes, panelStyle: style, - panelProps: { css: tourStyles.euiTour }, + panelProps: { ...panelProps, css: tourStyles.euiTour }, offset: hasBeacon ? 10 : 0, 'aria-labelledby': titleId, arrowChildren: hasBeacon && ( From 83d1336cb0e397510b49bf18710c7be15c193cda Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:03:44 -0700 Subject: [PATCH 3/7] 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 --- src/components/tour/tour_step.test.tsx | 18 ++++++++++++++++++ src/components/tour/tour_step.tsx | 6 +++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx index ad24f2ff247..c78da16c8ce 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'; @@ -30,6 +31,23 @@ const config = { }; describe('EuiTourStep', () => { + shouldRenderCustomStyles( + + Test + + ); + shouldRenderCustomStyles( + + Test + , + { childProps: ['panelProps'], skipStyles: true, skipParentTest: true } + ); + test('is rendered', () => { const component = mount( diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 38ff3b4114e..984a9ab3f18 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, @@ -263,7 +264,10 @@ export const EuiTourStep: FunctionComponent = ({ ownFocus: false, panelClassName: classes, panelStyle: style, - panelProps: { ...panelProps, css: tourStyles.euiTour }, + panelProps: { + ...panelProps, + css: [tourStyles.euiTour, css, panelProps?.css], + }, offset: hasBeacon ? 10 : 0, 'aria-labelledby': titleId, arrowChildren: hasBeacon && ( From afbaa6a69fb9e556cbf792cf65886edb7f8316fe Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:14:59 -0700 Subject: [PATCH 4/7] [misc] DRY out repeated test props required for rendering --- src/components/tour/tour_step.test.tsx | 49 ++++++-------------------- 1 file changed, 10 insertions(+), 39 deletions(-) diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx index c78da16c8ce..6d10ba56ea9 100644 --- a/src/components/tour/tour_step.test.tsx +++ b/src/components/tour/tour_step.test.tsx @@ -30,19 +30,16 @@ const config = { title: 'A demo', }; +const props = { ...config, ...steps[0], ...requiredProps }; + describe('EuiTourStep', () => { shouldRenderCustomStyles( - + Test ); shouldRenderCustomStyles( - + Test , { childProps: ['panelProps'], skipStyles: true, skipParentTest: true } @@ -50,7 +47,7 @@ describe('EuiTourStep', () => { test('is rendered', () => { const component = mount( - + Test ); @@ -60,13 +57,7 @@ describe('EuiTourStep', () => { test('can have subtitle', () => { const component = mount( - + Test ); @@ -76,12 +67,7 @@ describe('EuiTourStep', () => { test('can be closed', () => { const component = mount( - + Test ); @@ -91,14 +77,7 @@ describe('EuiTourStep', () => { test('can change the minWidth and maxWidth', () => { const component = mount( - + Test ); @@ -109,11 +88,9 @@ describe('EuiTourStep', () => { test('can override the footer action', () => { const component = mount( {}}>Test} - {...requiredProps} > Test @@ -124,13 +101,7 @@ describe('EuiTourStep', () => { test('can turn off the beacon', () => { const component = mount( - + Test ); From fb91241b3965001dd5231ac194de5ee621841fc8 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:07:57 -0700 Subject: [PATCH 5/7] Styles cleanup - add euiCanAnimate to transition - flatten opacity CSS - flatten before psuedo selector --- .../__snapshots__/tour_step.test.tsx.snap | 8 ++--- src/components/tour/tour.styles.ts | 33 +++++++++---------- src/components/tour/tour_step.tsx | 1 + 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index b8cfd6955e0..7bd94fd85b8 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.tsx b/src/components/tour/tour_step.tsx index 984a9ab3f18..97cd3c36170 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -194,6 +194,7 @@ export const EuiTourStep: FunctionComponent = ({ const beaconStyles = euiTourBeaconStyles(euiTheme); const beaconCss = [ beaconStyles.euiTourBeacon, + isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition], ]; From cc50b33cf95037d4526954a5be74e2a4e78875c0 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 11:19:33 -0700 Subject: [PATCH 6/7] changelog --- upcoming_changelogs/6298.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6298.md 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 From 376f0ea07f0b5b90e21ffe8e67d8266424c9a1c9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 12:37:18 -0700 Subject: [PATCH 7/7] Revert "[REVERT ME] QA testing" This reverts commit d3776e591abfdb6851d5e9ddadddb6c9262ce955. --- src-docs/src/views/tour/step.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/tour/step.js b/src-docs/src/views/tour/step.js index 71398f0d19c..deed9fa7880 100644 --- a/src-docs/src/views/tour/step.js +++ b/src-docs/src/views/tour/step.js @@ -25,7 +25,6 @@ export default () => { title="Title of the current step" subtitle="Title of the full tour (optional)" anchorPosition="rightUp" - panelProps={{ 'data-test-subj': 'test' }} > The tour step{' '}