[EuiTourStep] className consistency with EuiPopover + performance/c…

…leanups (#7497)
elastic · Feb 2, 2024 · ff19255 · ff19255
1 parent f5e3c1a
commit ff19255
Show file tree

Hide file tree

Showing 11 changed files with 456 additions and 788 deletions.
diff --git a/changelogs/upcoming/7497.md 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
@@ -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
@@ -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} />