From ff192553ecaa74513ad9fa6167e90a30e7fe56dc Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 2 Feb 2024 09:16:39 -0800
Subject: [PATCH] [EuiTourStep] `className` consistency with EuiPopover +
 performance/cleanups (#7497)

---
 changelogs/upcoming/7497.md                   |   4 +
 .../beacon/__snapshots__/beacon.test.tsx.snap |  16 +-
 src/components/beacon/beacon.tsx              |  20 +-
 .../__snapshots__/tour_step.test.tsx.snap     | 592 ++----------------
 src/components/tour/_tour_footer.styles.ts    |  28 +
 src/components/tour/_tour_footer.tsx          | 125 ++++
 src/components/tour/_tour_header.styles.ts    |  29 +
 src/components/tour/_tour_header.tsx          |  47 ++
 src/components/tour/tour.styles.ts            |  50 +-
 src/components/tour/tour_step.test.tsx        |  96 ++-
 src/components/tour/tour_step.tsx             | 237 ++-----
 11 files changed, 456 insertions(+), 788 deletions(-)
 create mode 100644 changelogs/upcoming/7497.md
 create mode 100644 src/components/tour/_tour_footer.styles.ts
 create mode 100644 src/components/tour/_tour_footer.tsx
 create mode 100644 src/components/tour/_tour_header.styles.ts
 create mode 100644 src/components/tour/_tour_header.tsx

diff --git a/changelogs/upcoming/7497.md b/changelogs/upcoming/7497.md
new file mode 100644
index 00000000000..89b9fccebcd
--- /dev/null
+++ b/changelogs/upcoming/7497.md
@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- `EuiTourStep`'s `className` and `style` props now apply to the anchoring element instead of to the popover panel, to match `EuiPopover` behavior.
+  - Convert your existing usages to `panelClassName` and `panelStyle` respectively instead.
diff --git a/src/components/beacon/__snapshots__/beacon.test.tsx.snap b/src/components/beacon/__snapshots__/beacon.test.tsx.snap
index 55c5dfc918b..bfc036891eb 100644
--- a/src/components/beacon/__snapshots__/beacon.test.tsx.snap
+++ b/src/components/beacon/__snapshots__/beacon.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiBeacon is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -14,7 +14,7 @@ exports[`EuiBeacon props color accent is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-accent-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -23,7 +23,7 @@ exports[`EuiBeacon props color danger is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-danger-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -32,7 +32,7 @@ exports[`EuiBeacon props color primary is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-primary-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -41,7 +41,7 @@ exports[`EuiBeacon props color subdued is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-subdued-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -50,7 +50,7 @@ exports[`EuiBeacon props color success is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -59,7 +59,7 @@ exports[`EuiBeacon props color warning is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-warning-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -68,6 +68,6 @@ exports[`EuiBeacon props size accepts size 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 14px; width: 14px;"
+  style="block-size: 14px; inline-size: 14px;"
 />
 `;
diff --git a/src/components/beacon/beacon.tsx b/src/components/beacon/beacon.tsx
index b0070e00217..acea33586f2 100644
--- a/src/components/beacon/beacon.tsx
+++ b/src/components/beacon/beacon.tsx
@@ -6,13 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, useMemo } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
-import { euiBeaconStyles } from './beacon.styles';
+import { logicalStyles } from '../../global_styling';
 import { useEuiTheme } from '../../services';
 
+import { euiBeaconStyles } from './beacon.styles';
+
 export const COLORS = [
   'subdued',
   'primary',
@@ -51,11 +53,15 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   const styles = euiBeaconStyles(euiTheme);
   const cssStyles = [styles.euiBeacon, styles[color]];
 
-  const beaconStyle = {
-    ...style,
-    height: size,
-    width: size,
-  };
+  const beaconStyle = useMemo(
+    () =>
+      logicalStyles({
+        ...style,
+        height: size,
+        width: size,
+      }),
+    [style, size]
+  );
 
   return (
     <div className={classes} css={cssStyles} style={beaconStyle} {...rest} />
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index 4ba2a0953aa..0aa353e4849 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -1,565 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiTourStep accepts an array of buttons in the footerAction prop 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
+exports[`EuiTourStep renders 1`] = `
+<body>
+  <div>
     <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
+      class="euiPopover euiPopover-isOpen euiTourAnchor testClass1 testClass2 emotion-euiPopover-inline-block-euiTestCss"
+      data-test-subj="test subject string"
     >
+      <span>
+        Test
+      </span>
       <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
-      >
-        <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
-          style="height: 12px; width: 12px;"
-        />
-      </div>
-      <div>
-        <div
-          style="min-width: 300px; max-width: 600px;"
-        >
-          <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h2>
-          </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
-          >
-            <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
-            >
-              <div
-                class="euiFlexGroup emotion-euiFlexGroup-wrap-s-flexEnd-center-row"
-              >
-                <div
-                  class="euiFlexItem emotion-euiFlexItem-growZero"
-                >
-                  <button>
-                    Button 1
-                  </button>
-                </div>
-                <div
-                  class="euiFlexItem emotion-euiFlexItem-growZero"
-                >
-                  <button>
-                    Button 2
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiTourStep can be closed 1`] = `
-<div
-  class="euiPopover emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-</div>
-`;
-
-exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
-    >
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="-1"
+      />
       <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
+        data-focus-lock-disabled="disabled"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
-          style="height: 12px; width: 12px;"
-        />
-      </div>
-      <div>
-        <div
-          style="min-width: 240px; max-width: 420px;"
+          aria-label="aria-label"
+          aria-labelledby="generated-id"
+          aria-live="assertive"
+          aria-modal="true"
+          class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour"
+          data-popover-open="true"
+          data-popover-panel="true"
+          role="dialog"
+          style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
         >
           <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h2>
-          </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
+            class="euiPopover__arrow emotion-euiPopoverArrow-left"
+            data-popover-arrow="left"
+            style="left: 0px; top: 10px;"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
-            >
-              <div
-                class="euiFlexItem emotion-euiFlexItem-growZero"
-              >
-                <button
-                  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-right"
-                  type="button"
-                >
-                  <span
-                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-                  >
-                    <span
-                      class="eui-textTruncate euiButtonEmpty__text"
-                    >
-                      Close tour
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiTourStep can have subtitle 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
-    >
-      <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
-      >
-        <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
-          style="height: 12px; width: 12px;"
-        />
-      </div>
-      <div>
-        <div
-          style="min-width: 300px; max-width: 600px;"
-        >
-          <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxxs-euiTourHeader__subtitle"
-            >
-              Subtitle
-            </h2>
-            <h3
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h3>
+              class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
+              style="block-size: 12px; inline-size: 12px;"
+            />
           </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
-          >
+          <div>
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
+              style="min-inline-size: 300px; max-inline-size: 600px;"
             >
               <div
-                class="euiFlexItem emotion-euiFlexItem-growZero"
+                class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
+                id="generated-id"
               >
-                <button
-                  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-right"
-                  type="button"
+                <h2
+                  class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
                 >
-                  <span
-                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-                  >
-                    <span
-                      class="eui-textTruncate euiButtonEmpty__text"
-                    >
-                      Close tour
-                    </span>
-                  </span>
-                </button>
+                  A demo
+                </h2>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiTourStep can override the footer action 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
-    >
-      <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
-      >
-        <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
-          style="height: 12px; width: 12px;"
-        />
-      </div>
-      <div>
-        <div
-          style="min-width: 300px; max-width: 600px;"
-        >
-          <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h2>
-          </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
-          >
-            <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
-            >
               <div
-                class="euiFlexItem emotion-euiFlexItem-growZero"
+                class="euiTour__content"
               >
-                <button>
-                  Test
-                </button>
+                You are here
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiTourStep can turn off the beacon 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -16px; will-change: transform, opacity; z-index: 2000;"
-    >
-      <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
-      />
-      <div>
-        <div
-          style="min-width: 300px; max-width: 600px;"
-        >
-          <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h2>
-          </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
-          >
-            <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
-            >
               <div
-                class="euiFlexItem emotion-euiFlexItem-growZero"
+                class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
               >
-                <button
-                  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-right"
-                  type="button"
+                <div
+                  class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
                 >
-                  <span
-                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                  <div
+                    class="euiFlexItem emotion-euiFlexItem-growZero"
                   >
-                    <span
-                      class="eui-textTruncate euiButtonEmpty__text"
+                    <button
+                      class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-right"
+                      type="button"
                     >
-                      Close tour
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+                      >
+                        <span
+                          class="eui-textTruncate euiButtonEmpty__text"
+                        >
+                          Close tour
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
-`;
-
-exports[`EuiTourStep is rendered 1`] = `
-<div
-  class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
-  data-test-subj="test subject string"
->
-  <span>
-    Test
-  </span>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      aria-label="aria-label"
-      aria-labelledby="generated-id"
-      aria-live="assertive"
-      aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
-      data-popover-open="true"
-      data-popover-panel="true"
-      role="dialog"
-      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
-    >
       <div
-        class="euiPopover__arrow emotion-euiPopoverArrow-left"
-        data-popover-arrow="left"
-        style="left: 0px; top: 10px;"
-      >
-        <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
-          style="height: 12px; width: 12px;"
-        />
-      </div>
-      <div>
-        <div
-          style="min-width: 300px; max-width: 600px;"
-        >
-          <div
-            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
-            id="generated-id"
-          >
-            <h2
-              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
-            >
-              A demo
-            </h2>
-          </div>
-          <div
-            class="euiTour__content"
-          >
-            You are here
-          </div>
-          <div
-            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-m-euiTourFooter"
-          >
-            <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
-            >
-              <div
-                class="euiFlexItem emotion-euiFlexItem-growZero"
-              >
-                <button
-                  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-right"
-                  type="button"
-                >
-                  <span
-                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-                  >
-                    <span
-                      class="eui-textTruncate euiButtonEmpty__text"
-                    >
-                      Close tour
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="-1"
+      />
     </div>
   </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
-</div>
+</body>
 `;
diff --git a/src/components/tour/_tour_footer.styles.ts b/src/components/tour/_tour_footer.styles.ts
new file mode 100644
index 00000000000..6e4652838ba
--- /dev/null
+++ b/src/components/tour/_tour_footer.styles.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme, shade, tint } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const _tourFooterBgColor = ({ colorMode, euiTheme }: UseEuiTheme) =>
+  colorMode === 'DARK'
+    ? shade(euiTheme.colors.lightestShade, 0.45)
+    : tint(euiTheme.colors.lightestShade, 0.5);
+
+export const euiTourFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    // Base
+    euiTourFooter: css`
+      background-color: ${_tourFooterBgColor(euiThemeContext)};
+      ${logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium)}
+      ${logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium)}
+    `,
+  };
+};
diff --git a/src/components/tour/_tour_footer.tsx b/src/components/tour/_tour_footer.tsx
new file mode 100644
index 00000000000..04588684349
--- /dev/null
+++ b/src/components/tour/_tour_footer.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useMemo, memo } from 'react';
+
+import { useEuiTheme } from '../../services';
+import { EuiI18n } from '../i18n';
+import { EuiPopoverFooter } from '../popover';
+import { EuiButtonEmpty } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+
+import {
+  EuiTourStepIndicator,
+  type EuiTourStepStatus,
+} from './tour_step_indicator';
+import type { EuiTourStepProps } from './tour_step';
+
+import { euiTourFooterStyles } from './_tour_footer.styles';
+
+type EuiTourFooterProps = Pick<
+  EuiTourStepProps,
+  'footerAction' | 'step' | 'stepsTotal' | 'onFinish'
+>;
+
+export const EuiTourFooter: FunctionComponent<EuiTourFooterProps> = memo(
+  ({ footerAction, step, stepsTotal, onFinish }) => {
+    const euiTheme = useEuiTheme();
+    const footerStyles = euiTourFooterStyles(euiTheme);
+
+    const customFooterAction = useMemo(() => {
+      if (!footerAction) return null;
+
+      return Array.isArray(footerAction) ? (
+        <EuiFlexGroup
+          gutterSize="s"
+          alignItems="center"
+          justifyContent="flexEnd"
+          responsive={false}
+          wrap
+        >
+          {footerAction.map((action, index) => (
+            <EuiFlexItem key={index} grow={false}>
+              {action}
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      ) : (
+        <EuiFlexItem grow={false}>{footerAction}</EuiFlexItem>
+      );
+    }, [footerAction]);
+
+    const indicators = useMemo(() => {
+      if (stepsTotal <= 1) return null;
+
+      return (
+        <EuiFlexItem grow={false}>
+          <ul className="euiTourFooter__stepList">
+            {[...Array(stepsTotal).keys()].map((_, i) => {
+              let status: EuiTourStepStatus = 'complete';
+              if (step === i + 1) {
+                status = 'active';
+              } else if (step <= i) {
+                status = 'incomplete';
+              }
+              return (
+                <EuiTourStepIndicator key={i} number={i + 1} status={status} />
+              );
+            })}
+          </ul>
+        </EuiFlexItem>
+      );
+    }, [step, stepsTotal]);
+
+    return (
+      <EuiPopoverFooter
+        css={footerStyles.euiTourFooter}
+        className="euiTourFooter"
+      >
+        <EuiFlexGroup
+          responsive={false}
+          justifyContent={stepsTotal > 1 ? 'spaceBetween' : 'flexEnd'}
+          alignItems="center"
+        >
+          {indicators}
+
+          {footerAction ? (
+            customFooterAction
+          ) : (
+            <EuiFlexItem grow={false}>
+              <EuiI18n
+                tokens={[
+                  'euiTourFooter.endTour',
+                  'euiTourFooter.skipTour',
+                  'euiTourFooter.closeTour',
+                ]}
+                defaults={['End tour', 'Skip tour', 'Close tour']}
+              >
+                {([endTour, skipTour, closeTour]: string[]) => (
+                  <EuiButtonEmpty
+                    onClick={onFinish}
+                    color="text"
+                    flush="right"
+                    size="xs"
+                  >
+                    {stepsTotal > 1
+                      ? stepsTotal === step
+                        ? endTour
+                        : skipTour
+                      : closeTour}
+                  </EuiButtonEmpty>
+                )}
+              </EuiI18n>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    );
+  }
+);
+EuiTourFooter.displayName = '_EuiTourFooter';
diff --git a/src/components/tour/_tour_header.styles.ts b/src/components/tour/_tour_header.styles.ts
new file mode 100644
index 00000000000..6ff4c941bcd
--- /dev/null
+++ b/src/components/tour/_tour_header.styles.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Base
+  euiTourHeader: css`
+    ${logicalCSS('border-bottom', 'none')}
+    /* Overriding default EuiPopoverTitle styles */
+    ${logicalCSS('margin-bottom', euiTheme.size.s)}
+  `,
+  // Elements
+  euiTourHeader__title: css`
+    /* Removes extra margin applied to sibling EuiTitle's */
+    ${logicalCSS('margin-top', 0)}
+  `,
+  euiTourHeader__subtitle: css`
+    color: ${euiTheme.colors.subduedText};
+    padding-block-end: ${euiTheme.size.xs};
+  `,
+});
diff --git a/src/components/tour/_tour_header.tsx b/src/components/tour/_tour_header.tsx
new file mode 100644
index 00000000000..b2bd4ca3083
--- /dev/null
+++ b/src/components/tour/_tour_header.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, memo } from 'react';
+
+import { useEuiTheme } from '../../services';
+import { EuiPopoverTitle } from '../popover';
+import { EuiTitle } from '../title';
+
+import type { EuiTourStepProps } from './tour_step';
+
+import { euiTourHeaderStyles } from './_tour_header.styles';
+
+type EuiTourHeaderProps = { id: string } & Pick<
+  EuiTourStepProps,
+  'title' | 'subtitle'
+>;
+
+export const EuiTourHeader: FunctionComponent<EuiTourHeaderProps> = memo(
+  ({ id, title, subtitle }) => {
+    const euiTheme = useEuiTheme();
+    const headerStyles = euiTourHeaderStyles(euiTheme);
+
+    return (
+      <EuiPopoverTitle
+        css={headerStyles.euiTourHeader}
+        className="euiTourHeader"
+        id={id}
+      >
+        {subtitle && (
+          <EuiTitle css={headerStyles.euiTourHeader__subtitle} size="xxxs">
+            <h2>{subtitle}</h2>
+          </EuiTitle>
+        )}
+        <EuiTitle css={headerStyles.euiTourHeader__title} size="xxs">
+          {subtitle ? <h3>{title}</h3> : <h2>{title}</h2>}
+        </EuiTitle>
+      </EuiPopoverTitle>
+    );
+  }
+);
+EuiTourHeader.displayName = '_EuiTourHeader';
diff --git a/src/components/tour/tour.styles.ts b/src/components/tour/tour.styles.ts
index 8bfaf6f2239..b6d694e4631 100644
--- a/src/components/tour/tour.styles.ts
+++ b/src/components/tour/tour.styles.ts
@@ -7,30 +7,18 @@
  */
 
 import { css } from '@emotion/react';
-import {
-  UseEuiTheme,
-  shade,
-  tint,
-  COLOR_MODES_STANDARD,
-  EuiThemeColorModeStandard,
-} from '../../services';
+import { UseEuiTheme } from '../../services';
 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';
 
-const backgroundColor = (color: string, colorMode: EuiThemeColorModeStandard) =>
-  colorMode === COLOR_MODES_STANDARD.dark
-    ? shade(color, 0.45)
-    : tint(color, 0.5);
+import { _tourFooterBgColor } from './_tour_footer.styles';
 
-export const euiTourStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
+export const euiTourStyles = (euiThemeContext: UseEuiTheme) => ({
   // Targets EuiPopoverPanel
   euiTour: css`
     [data-popover-arrow='top']::before {
-      ${logicalCSS(
-        'border-top-color',
-        backgroundColor(euiTheme.colors.lightestShade, colorMode)
-      )}
+      ${logicalCSS('border-top-color', _tourFooterBgColor(euiThemeContext))}
     }
   `,
 });
@@ -74,33 +62,3 @@ export const euiTourBeaconStyles = ({ euiTheme }: UseEuiTheme) => {
     `,
   };
 };
-
-export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
-  // Base
-  euiTourHeader: css`
-    ${logicalCSS('border-bottom', 'none')}
-    /* Overriding default EuiPopoverTitle styles */
-    ${logicalCSS('margin-bottom', euiTheme.size.s)}
-  `,
-  // Elements
-  euiTourHeader__title: css`
-    /* Removes extra margin applied to sibling EuiTitle's */
-    ${logicalCSS('margin-top', 0)}
-  `,
-  euiTourHeader__subtitle: css`
-    color: ${euiTheme.colors.subduedText};
-    padding-block-end: ${euiTheme.size.xs};
-  `,
-});
-
-export const euiTourFooterStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
-  // Base
-  euiTourFooter: css`
-    background-color: ${backgroundColor(
-      euiTheme.colors.lightestShade,
-      colorMode
-    )};
-    ${logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium)}
-    ${logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium)}
-  `,
-});
diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx
index 807f7e1561d..a57d2d03385 100644
--- a/src/components/tour/tour_step.test.tsx
+++ b/src/components/tour/tour_step.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
@@ -51,62 +51,74 @@ describe('EuiTourStep', () => {
     }
   );
 
-  test('is rendered', () => {
-    const component = mount(
+  it('renders', () => {
+    const { baseElement } = render(
       <EuiTourStep {...props} isStepOpen>
         <span>Test</span>
       </EuiTourStep>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
-  test('can have subtitle', () => {
-    const component = mount(
+  it('can have subtitle', () => {
+    const { getByText } = render(
       <EuiTourStep {...props} isStepOpen subtitle="Subtitle">
         <span>Test</span>
       </EuiTourStep>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(getByText('Subtitle')).toBeInTheDocument();
   });
 
-  test('can be closed', () => {
-    const component = mount(
+  it('can be closed', () => {
+    const { container } = render(
       <EuiTourStep {...props} isStepOpen={false}>
         <span>Test</span>
       </EuiTourStep>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(container.querySelector('.euiTour')).not.toBeInTheDocument();
   });
 
-  test('can change the minWidth and maxWidth', () => {
-    const component = mount(
+  it('can change the minWidth and maxWidth', () => {
+    const { container } = render(
       <EuiTourStep {...props} minWidth={240} maxWidth={420} isStepOpen>
         <span>Test</span>
       </EuiTourStep>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(
+      container.querySelector('.euiTour__content')?.parentElement
+    ).toHaveStyle({
+      'min-inline-size': '240px',
+      'max-inline-size': '420px',
+    });
   });
 
-  test('can override the footer action', () => {
-    const component = mount(
+  it('can override the footer action', () => {
+    const { queryByText, rerender } = render(
+      <EuiTourStep {...props} isStepOpen>
+        <span>Test</span>
+      </EuiTourStep>
+    );
+    expect(queryByText('Close tour')).toBeInTheDocument();
+
+    rerender(
       <EuiTourStep
         {...props}
         isStepOpen
-        footerAction={<button onClick={() => {}}>Test</button>}
+        footerAction={<button onClick={() => {}}>Custom footer</button>}
       >
         <span>Test</span>
       </EuiTourStep>
     );
-
-    expect(component.render()).toMatchSnapshot();
+    expect(queryByText('Close tour')).not.toBeInTheDocument();
+    expect(queryByText('Custom footer')).toBeInTheDocument();
   });
 
-  test('accepts an array of buttons in the footerAction prop', () => {
-    const component = mount(
+  it('accepts an array of buttons in the footerAction prop', () => {
+    const { getByText } = render(
       <EuiTourStep
         {...props}
         isStepOpen
@@ -119,16 +131,52 @@ describe('EuiTourStep', () => {
       </EuiTourStep>
     );
 
-    expect(component.render()).toMatchSnapshot();
+    expect(getByText('Button 1')).toBeInTheDocument();
+    expect(getByText('Button 2')).toBeInTheDocument();
   });
 
-  test('can turn off the beacon', () => {
-    const component = mount(
+  it('can turn off the beacon', () => {
+    const { container, rerender } = render(
+      <EuiTourStep {...props} isStepOpen>
+        <span>Test</span>
+      </EuiTourStep>
+    );
+    expect(container.querySelector('.euiTour__beacon')).toBeInTheDocument();
+
+    rerender(
       <EuiTourStep {...props} isStepOpen decoration="none">
         <span>Test</span>
       </EuiTourStep>
     );
+    expect(container.querySelector('.euiTour__beacon')).not.toBeInTheDocument();
+  });
+
+  it('applies classNames and styles to the correct locations', () => {
+    const TestTour = ({ isStepOpen }: { isStepOpen?: boolean }) => (
+      <EuiTourStep
+        {...props}
+        className="goesOnAnchor"
+        style={{ color: 'blue' }}
+        panelClassName="goesOnPopover"
+        panelStyle={{ color: 'red' }}
+        isStepOpen={isStepOpen}
+      >
+        <span>Test</span>
+      </EuiTourStep>
+    );
+
+    const { container, rerender } = render(<TestTour />);
+
+    expect(container.querySelector('.goesOnPopover')).not.toBeInTheDocument();
+    expect(container.querySelector('.goesOnAnchor')).toBeInTheDocument();
+    expect(container.querySelector('.goesOnAnchor')).toHaveStyle({
+      color: 'blue',
+    });
 
-    expect(component.render()).toMatchSnapshot();
+    rerender(<TestTour isStepOpen />);
+    expect(container.querySelector('.goesOnPopover')).toBeInTheDocument();
+    expect(container.querySelector('.goesOnPopover')).toHaveStyle({
+      color: 'red',
+    });
   });
 });
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx
index 8cd334dba35..36a3660a48e 100644
--- a/src/components/tour/tour_step.tsx
+++ b/src/components/tour/tour_step.tsx
@@ -8,30 +8,23 @@
 
 import React, {
   CSSProperties,
+  HTMLAttributes,
   FunctionComponent,
   ReactElement,
   ReactNode,
   useEffect,
   useState,
+  useMemo,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
 
+import { logicalStyles } from '../../global_styling';
 import { CommonProps, ExclusiveUnion, NoArgCallback } from '../common';
 
 import { EuiBeacon } from '../beacon';
-import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiI18n } from '../i18n';
-import {
-  EuiPopover,
-  EuiPopoverFooter,
-  EuiPopoverProps,
-  EuiPopoverTitle,
-  EuiWrappingPopover,
-} from '../popover';
-import { EuiTitle } from '../title';
+import { EuiPopover, EuiPopoverProps, EuiWrappingPopover } from '../popover';
 
-import { EuiTourStepIndicator, EuiTourStepStatus } from './tour_step_indicator';
 import {
   useGeneratedHtmlId,
   findElementBySelectorOrRef,
@@ -40,16 +33,16 @@ import {
 } from '../../services';
 import { EuiPopoverPosition } from '../../services/popover';
 
-import {
-  euiTourStyles,
-  euiTourBeaconStyles,
-  euiTourFooterStyles,
-  euiTourHeaderStyles,
-} from './tour.styles';
-
-type PopoverOverrides = 'button' | 'closePopover';
+import { EuiTourHeader } from './_tour_header';
+import { EuiTourFooter } from './_tour_footer';
+import { euiTourStyles, euiTourBeaconStyles } from './tour.styles';
 
-type EuiPopoverPartials = Partial<Pick<EuiPopoverProps, 'closePopover'>>;
+type _EuiPopoverProps = EuiPopoverProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title' | 'step'>;
+type _PopoverOverrides = 'button' | 'closePopover';
+type _PopoverPartials = 'closePopover';
+type ExtendedEuiPopoverProps = Omit<_EuiPopoverProps, _PopoverOverrides> &
+  Partial<Pick<EuiPopoverProps, _PopoverPartials>>;
 
 export type EuiTourStepAnchorProps = ExclusiveUnion<
   {
@@ -69,8 +62,7 @@ export type EuiTourStepAnchorProps = ExclusiveUnion<
 >;
 
 export type EuiTourStepProps = CommonProps &
-  Omit<EuiPopoverProps, PopoverOverrides> &
-  EuiPopoverPartials &
+  ExtendedEuiPopoverProps &
   EuiTourStepAnchorProps & {
     /**
      * Contents of the tour step popover
@@ -107,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.
      */
@@ -148,30 +135,29 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
   onFinish,
   step = 1,
   stepsTotal,
-  style,
   subtitle,
   title,
   decoration = 'beacon',
   footerAction,
   panelProps,
+  panelClassName,
   ...rest
 }) => {
   const titleId = useGeneratedHtmlId();
   if (step === 0) {
     console.warn(
-      'EuiTourStep `step` should 1-based indexing. Please update to eliminate 0 indexes.'
+      'EuiTourStep `step` should use 1-based indexing. Please update to eliminate 0 indexes.'
     );
   }
 
   const [anchorNode, setAnchorNode] = useState<HTMLElement | null>(null);
   const [popoverPosition, setPopoverPosition] = useState<EuiPopoverPosition>();
 
-  const onPositionChange = (position: EuiPopoverPosition) => {
+  const onPositionChange = useCallback((position: EuiPopoverPosition) => {
     setPopoverPosition(position);
-  };
+  }, []);
 
   useEffect(() => {
-    let timeout: number;
     if (anchor) {
       // Wait until next tick to find anchor node in case it's not already
       // in DOM requestAnimationFrame isn't used here because we don't need to
@@ -179,21 +165,18 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
       // needs to go through a react DOM rerender which may take more than
       // 1 frame (16ms) of time.
       // TODO: It would be ideal to have some kind of intersection observer here instead
-      timeout = window.setTimeout(() => {
+      const timeout = window.setTimeout(() => {
         setAnchorNode(findElementBySelectorOrRef(anchor));
       });
-    }
 
-    return () => {
-      timeout && window.clearTimeout(timeout);
-    };
+      return () => window.clearTimeout(timeout);
+    }
   }, [anchor]);
 
-  const classes = classNames('euiTour', className);
+  const anchorClasses = classNames('euiTourAnchor', className);
+  const popoverClasses = classNames('euiTour', panelClassName);
   const euiTheme = useEuiTheme();
   const tourStyles = euiTourStyles(euiTheme);
-  const headerStyles = euiTourHeaderStyles(euiTheme);
-  const footerStyles = euiTourFooterStyles(euiTheme);
   const beaconStyles = euiTourBeaconStyles(euiTheme);
   const beaconCss = [
     beaconStyles.euiTourBeacon,
@@ -201,142 +184,48 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
     popoverPosition && beaconStyles[popoverPosition],
   ];
 
-  const finishButtonProps: EuiButtonEmptyProps = {
-    color: 'text',
-    flush: 'right',
-    size: 'xs',
-  };
-
-  const optionalFooterAction: JSX.Element = Array.isArray(footerAction) ? (
-    <EuiFlexGroup
-      gutterSize="s"
-      alignItems="center"
-      justifyContent="flexEnd"
-      responsive={false}
-      wrap
-    >
-      {footerAction.map((action, index) => (
-        <EuiFlexItem key={index} grow={false}>
-          {action}
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  ) : (
-    <EuiFlexItem grow={false}>{footerAction}</EuiFlexItem>
-  );
-
-  const footer = (
-    <EuiFlexGroup
-      responsive={false}
-      justifyContent={stepsTotal > 1 ? 'spaceBetween' : 'flexEnd'}
-      alignItems="center"
-    >
-      {stepsTotal > 1 && (
-        <EuiFlexItem grow={false}>
-          <ul className="euiTourFooter__stepList">
-            {[...Array(stepsTotal).keys()].map((_, i) => {
-              let status: EuiTourStepStatus = 'complete';
-              if (step === i + 1) {
-                status = 'active';
-              } else if (step <= i) {
-                status = 'incomplete';
-              }
-              return (
-                <EuiTourStepIndicator key={i} number={i + 1} status={status} />
-              );
-            })}
-          </ul>
-        </EuiFlexItem>
-      )}
-
-      {footerAction ? (
-        optionalFooterAction
-      ) : (
-        <EuiFlexItem grow={false}>
-          <EuiI18n
-            tokens={[
-              'euiTourStep.endTour',
-              'euiTourStep.skipTour',
-              'euiTourStep.closeTour',
-            ]}
-            defaults={['End tour', 'Skip tour', 'Close tour']}
-          >
-            {([endTour, skipTour, closeTour]: string[]) => {
-              let content = closeTour;
-              if (stepsTotal > 1) {
-                content = stepsTotal === step ? endTour : skipTour;
-              }
-              return (
-                <EuiButtonEmpty onClick={onFinish} {...finishButtonProps}>
-                  {content}
-                </EuiButtonEmpty>
-              );
-            }}
-          </EuiI18n>
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
-  );
-
   const hasBeacon = decoration === 'beacon';
 
-  const popoverProps = {
-    anchorPosition: anchorPosition,
-    closePopover: closePopover,
-    isOpen: isStepOpen,
-    ownFocus: false,
-    panelClassName: classes,
-    panelStyle: style,
-    panelProps: {
-      ...panelProps,
-      css: [tourStyles.euiTour, css, panelProps?.css],
-    },
-    offset: hasBeacon ? 10 : 0,
-    'aria-labelledby': titleId,
-    arrowChildren: hasBeacon && (
-      <EuiBeacon css={beaconCss} className="euiTour__beacon" />
-    ),
-    onPositionChange,
-    ...rest,
-  };
-
-  const layout = (
-    <div style={{ minWidth, maxWidth }}>
-      <EuiPopoverTitle
-        css={headerStyles.euiTourHeader}
-        className="euiTourHeader"
-        id={titleId}
-      >
-        {subtitle && (
-          <EuiTitle css={headerStyles.euiTourHeader__subtitle} size="xxxs">
-            <h2>{subtitle}</h2>
-          </EuiTitle>
-        )}
-        <EuiTitle css={headerStyles.euiTourHeader__title} size="xxs">
-          {subtitle ? <h3>{title}</h3> : <h2>{title}</h2>}
-        </EuiTitle>
-      </EuiPopoverTitle>
-      <div className="euiTour__content">{content}</div>
-      <EuiPopoverFooter
-        css={footerStyles.euiTourFooter}
-        className="euiTourFooter"
-      >
-        {footer}
-      </EuiPopoverFooter>
-    </div>
+  const widthStyles = useMemo(
+    () => logicalStyles({ minWidth, maxWidth }),
+    [minWidth, maxWidth]
   );
 
-  if (!anchor && children) {
-    return (
-      <EuiPopover button={children} {...popoverProps}>
-        {layout}
-      </EuiPopover>
-    );
-  }
-
-  return anchorNode ? (
-    <EuiWrappingPopover button={anchorNode} {...popoverProps}>
-      {layout}
-    </EuiWrappingPopover>
+  const noAnchor = !anchor && children;
+  const PopoverComponent = noAnchor ? EuiPopover : EuiWrappingPopover;
+  const button = noAnchor ? children : anchorNode;
+
+  return button ? (
+    <PopoverComponent
+      button={button as HTMLElement & ReactNode}
+      className={anchorClasses}
+      anchorPosition={anchorPosition}
+      closePopover={closePopover}
+      isOpen={isStepOpen}
+      ownFocus={false}
+      panelClassName={popoverClasses}
+      panelProps={{
+        ...panelProps,
+        css: [tourStyles.euiTour, css, panelProps?.css],
+      }}
+      offset={hasBeacon ? 10 : 0}
+      aria-labelledby={titleId}
+      arrowChildren={
+        hasBeacon && <EuiBeacon css={beaconCss} className="euiTour__beacon" />
+      }
+      onPositionChange={onPositionChange}
+      {...rest}
+    >
+      <div style={widthStyles}>
+        <EuiTourHeader id={titleId} title={title} subtitle={subtitle} />
+        <div className="euiTour__content">{content}</div>
+        <EuiTourFooter
+          footerAction={footerAction}
+          step={step}
+          stepsTotal={stepsTotal}
+          onFinish={onFinish}
+        />
+      </div>
+    </PopoverComponent>
   ) : null;
 };