From 091cd18d85176b6470daaf4634db051c442c6b1d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 May 2022 12:36:27 -0700 Subject: [PATCH 1/6] [REVERT ME] Repro of bug --- .../src/views/datagrid/basics/datagrid.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js index 49de063d996..2a63fa4b074 100644 --- a/src-docs/src/views/datagrid/basics/datagrid.js +++ b/src-docs/src/views/datagrid/basics/datagrid.js @@ -33,6 +33,7 @@ import { EuiScreenReaderOnly, EuiText, EuiTitle, + EuiTourStep, } from '../../../../../src/components/'; const gridRef = createRef(); @@ -410,8 +411,69 @@ export default () => { console.log(eventData); }); + const [showTour, setShowTour] = useState(true); + const [showTour2, setShowTour2] = useState(false); + const nextStep = () => { + setShowTour(false); + setShowTour2(true); + }; + return ( + {showTour ? ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + fringilla quam in turpis blandit, eu ultricies nulla efficitur. + + } + step={1} + stepsTotal={2} + maxWidth={400} + onFinish={nextStep} + footerAction={ + + Next + + } + /> + ) : null} + {showTour2 ? ( + + Nunc ultricies egestas bibendum. Maecenas finibus enim at justo + elementum elementum. + + } + step={2} + stepsTotal={2} + maxWidth={400} + onFinish={() => setShowTour2(false)} + footerAction={ + setShowTour2(false)} + > + Dismiss + + } + /> + ) : null} Date: Thu, 12 May 2022 12:40:50 -0700 Subject: [PATCH 2/6] [FIX] Set maxWidth and minWidth styles on popover *content* and not on *popover* --- .../__snapshots__/tour_step.test.tsx.snap | 286 ++++++++++-------- src/components/tour/tour_step.tsx | 8 +- 2 files changed, 156 insertions(+), 138 deletions(-) diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index 2a793994d39..65613f5edbd 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -50,7 +50,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = ` class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2" data-popover-panel="true" role="dialog" - style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 420px; min-width: 240px; z-index: 2000;" + style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
-

- A demo -

-
-
- You are here -
-
+

+ A demo +

+
+
+ You are here +
- + +
@@ -148,7 +152,7 @@ exports[`EuiTourStep can have subtitle 1`] = ` class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2" data-popover-panel="true" role="dialog" - style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;" + style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
-

- Subtitle -

-

+ Subtitle +

+

+ A demo +

+
+
- A demo - -
-
- You are here -
-
+ You are here +
- + +
@@ -251,7 +259,7 @@ exports[`EuiTourStep can override the footer action 1`] = ` class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2" data-popover-panel="true" role="dialog" - style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;" + style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
-

- A demo -

-
-
- You are here -
-
+

+ A demo +

+
+
+ You are here +
- +
+ +
@@ -338,7 +350,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = ` class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2" data-popover-panel="true" role="dialog" - style="top: -22px; left: -16px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;" + style="top: -22px; left: -16px; will-change: transform, opacity; z-index: 2000;" >
-

- A demo -

-
-
- You are here -
-
+

+ A demo +

+
+ You are here +
+
- + +
@@ -431,7 +447,7 @@ exports[`EuiTourStep is rendered 1`] = ` class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--left euiPopover__panel-isOpen euiTour testClass1 testClass2" data-popover-panel="true" role="dialog" - style="top: -22px; left: -26px; will-change: transform, opacity; max-width: 600px; min-width: 300px; z-index: 2000;" + style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;" >
-

- A demo -

-
-
- You are here -
-
+

+ A demo +

+
+
+ You are here +
- + +
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 6da963feea1..b32e9a9c940 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -170,8 +170,6 @@ export const EuiTourStep: FunctionComponent = ({ }; }, [anchor]); - const newStyle: CSSProperties = { ...style, maxWidth, minWidth }; - const classes = classNames('euiTour', className); const finishButtonProps: EuiButtonEmptyProps = { @@ -240,7 +238,7 @@ export const EuiTourStep: FunctionComponent = ({ isOpen: isStepOpen, ownFocus: false, panelClassName: classes, - panelStyle: newStyle, + panelStyle: style, offset: hasBeacon ? 10 : 0, 'aria-labelledby': titleId, arrowChildren: hasBeacon && , @@ -248,7 +246,7 @@ export const EuiTourStep: FunctionComponent = ({ }; const layout = ( - <> +
{subtitle && ( @@ -261,7 +259,7 @@ export const EuiTourStep: FunctionComponent = ({
{content}
{footer} - +
); if (!anchor && children) { From e121e984633f885761eac08382296f5b1bed78e1 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 May 2022 12:43:15 -0700 Subject: [PATCH 3/6] [optional/misc] Remove `style` prop - it's covered by `...rest` and doesn't seem necessary to explicitly document --- src/components/tour/tour_step.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index b32e9a9c940..d6b38fa8017 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -99,11 +99,6 @@ export type EuiTourStepProps = CommonProps & */ stepsTotal: number; - /** - * Optional, standard DOM `style` attribute. Passed to the EuiPopover panel. - */ - style?: CSSProperties; - /** * Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level. */ @@ -138,7 +133,6 @@ export const EuiTourStep: FunctionComponent = ({ onFinish, step = 1, stepsTotal, - style, subtitle, title, decoration = 'beacon', @@ -238,7 +232,6 @@ export const EuiTourStep: FunctionComponent = ({ isOpen: isStepOpen, ownFocus: false, panelClassName: classes, - panelStyle: style, offset: hasBeacon ? 10 : 0, 'aria-labelledby': titleId, arrowChildren: hasBeacon && , From d123ac74c382023e83301ebee929b1dcab4ba53e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 12 May 2022 13:07:47 -0700 Subject: [PATCH 4/6] changelog --- upcoming_changelogs/5897.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/5897.md diff --git a/upcoming_changelogs/5897.md b/upcoming_changelogs/5897.md new file mode 100644 index 00000000000..b76b5820820 --- /dev/null +++ b/upcoming_changelogs/5897.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiTour` position calculation issues caused by popover width styles From 88c1152b39e661274d6e9345ea1b3282039ff69e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 May 2022 08:46:27 -0700 Subject: [PATCH 5/6] Revert "[optional/misc] Remove `style` prop - it's covered by `...rest` and doesn't seem necessary to explicitly document" This reverts commit e121e984633f885761eac08382296f5b1bed78e1. --- src/components/tour/tour_step.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index d6b38fa8017..b32e9a9c940 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -99,6 +99,11 @@ export type EuiTourStepProps = CommonProps & */ stepsTotal: number; + /** + * Optional, standard DOM `style` attribute. Passed to the EuiPopover panel. + */ + style?: CSSProperties; + /** * Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level. */ @@ -133,6 +138,7 @@ export const EuiTourStep: FunctionComponent = ({ onFinish, step = 1, stepsTotal, + style, subtitle, title, decoration = 'beacon', @@ -232,6 +238,7 @@ export const EuiTourStep: FunctionComponent = ({ isOpen: isStepOpen, ownFocus: false, panelClassName: classes, + panelStyle: style, offset: hasBeacon ? 10 : 0, 'aria-labelledby': titleId, arrowChildren: hasBeacon && , From 4df07ef36682b71f05d173e9edc6afab7617e9ca Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 May 2022 08:46:33 -0700 Subject: [PATCH 6/6] Revert "[REVERT ME] Repro of bug" This reverts commit 091cd18d85176b6470daaf4634db051c442c6b1d. --- .../src/views/datagrid/basics/datagrid.js | 62 ------------------- 1 file changed, 62 deletions(-) diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js index 2a63fa4b074..49de063d996 100644 --- a/src-docs/src/views/datagrid/basics/datagrid.js +++ b/src-docs/src/views/datagrid/basics/datagrid.js @@ -33,7 +33,6 @@ import { EuiScreenReaderOnly, EuiText, EuiTitle, - EuiTourStep, } from '../../../../../src/components/'; const gridRef = createRef(); @@ -411,69 +410,8 @@ export default () => { console.log(eventData); }); - const [showTour, setShowTour] = useState(true); - const [showTour2, setShowTour2] = useState(false); - const nextStep = () => { - setShowTour(false); - setShowTour2(true); - }; - return ( - {showTour ? ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed - fringilla quam in turpis blandit, eu ultricies nulla efficitur. - - } - step={1} - stepsTotal={2} - maxWidth={400} - onFinish={nextStep} - footerAction={ - - Next - - } - /> - ) : null} - {showTour2 ? ( - - Nunc ultricies egestas bibendum. Maecenas finibus enim at justo - elementum elementum. - - } - step={2} - stepsTotal={2} - maxWidth={400} - onFinish={() => setShowTour2(false)} - footerAction={ - setShowTour2(false)} - > - Dismiss - - } - /> - ) : null}