[EuiToolTip] Improve Emotion CSS (#6295)

* Add euiCanAnimate checks around tooltip animations * Remove unnecessary arrow CSS nesting - by passing `position` prop down to EuiTooltipArrow * Remove unnecessary euiToolTipPopoverStyles * Remove unnecessary classNames map - not used in Kibana anywhere - replace with a data attribute, just in case 🤷 * changelog - not terribly detailed, but most consumers probably don't care about cleaner nesting / class names * [PR feedback] comments
elastic · Oct 6, 2022 · 783fc6c · 783fc6c
1 parent ea5200e
commit 783fc6c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 66 deletions.
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
@@ -66,7 +66,8 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
   >
     <div
       aria-label="aria-label"
-      class="euiToolTipPopover euiToolTip euiToolTip--top testClass1 testClass2 emotion-euiToolTip-top-EuiToolTipPopover"
+      class="euiToolTipPopover euiToolTip testClass1 testClass2 emotion-euiToolTip-top"
+      data-position="top"
       data-test-subj="test subject string"
       id="id"
       position="top"
@@ -79,7 +80,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
         title
       </div>
       <div
-        class="euiToolTip__arrow emotion-euiToolTip__arrow-EuiToolTipArrow"
+        class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
         style="left: 4px; top: 0px;"
       />
       <div>

diff --git a/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap b/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiToolTipPopover is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiToolTipPopover testClass1 testClass2 emotion-euiToolTip-EuiToolTipPopover"
+  class="euiToolTipPopover testClass1 testClass2 emotion-euiToolTip"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts
@@ -11,6 +11,7 @@ import {
   logicalCSS,
   logicalSizeCSS,
   euiFontSize,
+  euiCanAnimate,
   mathWithUnits,
 } from '../../global_styling';
 import { COLOR_MODES_STANDARD, UseEuiTheme, tint, shade } from '../../services';
@@ -59,12 +60,10 @@ const euiToolTipAnimationHorizontal = (size: string) => keyframes`
 export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
   const animationTiming = `${euiTheme.animation.slow} ease-out 0s forwards`;
-  /*
-   * 1. Shift arrow 1px more than half its size to account for border radius
-   */
+  // Shift arrow 1px more than half its size to account for border radius
   const arrowSize = euiTheme.size.m;
-  const arrowPlusSize = mathWithUnits(arrowSize, (x) => (x / 2 + 1) * -1); // 1.
-  const arrowMinusSize = mathWithUnits(arrowSize, (x) => (x / 2 - 1) * -1); // 1.
+  const arrowPlusSize = mathWithUnits(arrowSize, (x) => (x / 2 + 1) * -1);
+  const arrowMinusSize = mathWithUnits(arrowSize, (x) => (x / 2 - 1) * -1);
   return {
     // Base
     euiToolTip: css`
@@ -90,65 +89,68 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Positions
     top: css`
-      animation: ${euiToolTipAnimationVertical(`-${euiTheme.size.base}`)}
-        ${animationTiming};
+      ${euiCanAnimate} {
+        animation: ${euiToolTipAnimationVertical(`-${euiTheme.size.base}`)}
+          ${animationTiming};
+      }
     `,
     bottom: css`
-      animation: ${euiToolTipAnimationVertical(euiTheme.size.base)}
-        ${animationTiming};
-
-      [class*='euiToolTip__arrow'] {
-        transform: translateY(${arrowMinusSize}) rotateZ(45deg); /* 1 */
+      ${euiCanAnimate} {
+        animation: ${euiToolTipAnimationVertical(euiTheme.size.base)}
+          ${animationTiming};
       }
     `,
     left: css`
-      animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)}
-        ${animationTiming};
-
-      [class*='euiToolTip__arrow'] {
-        transform: translateX(${arrowPlusSize}) rotateZ(45deg); /* 1 */
+      ${euiCanAnimate} {
+        animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)}
+          ${animationTiming};
       }
     `,
     right: css`
-      animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)}
-        ${animationTiming};
-
-      [class*='euiToolTip__arrow'] {
-        transform: translateX(${arrowMinusSize}) rotateZ(45deg); /* 1 */
+      ${euiCanAnimate} {
+        animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)}
+          ${animationTiming};
       }
     `,
-    // Elements
+    // Arrow
     euiToolTip__arrow: css`
       content: '';
       position: absolute;
       transform-origin: center;
       border-radius: 2px;
       background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
       ${logicalSizeCSS(arrowSize, arrowSize)};
-      transform: translateY(${arrowPlusSize}) rotateZ(45deg); /* 1 */
+    `,
+    arrowPositions: {
+      top: css`
+        transform: translateY(${arrowPlusSize}) rotateZ(45deg);
+      `,
+      bottom: css`
+        transform: translateY(${arrowMinusSize}) rotateZ(45deg);
+      `,
+      left: css`
+        transform: translateX(${arrowPlusSize}) rotateZ(45deg);
+      `,
+      right: css`
+        transform: translateX(${arrowMinusSize}) rotateZ(45deg);
+      `,
+    },
+    // Title
+    euiToolTip__title: css`
+      font-weight: ${euiTheme.font.weight.bold};
+      ${logicalCSS(
+        'border-bottom',
+        `solid ${euiTheme.border.width.thin} ${euiToolTipBorderColor(
+          euiTheme,
+          colorMode
+        )}`
+      )};
+      ${logicalCSS('padding-bottom', euiTheme.size.xs)};
+      ${logicalCSS('margin-bottom', euiTheme.size.xs)};
     `,
   };
 };
 
-export const euiToolTipPopoverStyles = ({
-  euiTheme,
-  colorMode,
-}: UseEuiTheme) => ({
-  // Elements
-  euiToolTip__title: css`
-    font-weight: ${euiTheme.font.weight.bold};
-    ${logicalCSS(
-      'border-bottom',
-      `solid ${euiTheme.border.width.thin} ${euiToolTipBorderColor(
-        euiTheme,
-        colorMode
-      )}`
-    )};
-    ${logicalCSS('padding-bottom', euiTheme.size.xs)};
-    ${logicalCSS('margin-bottom', euiTheme.size.xs)};
-  `,
-});
-
 export const euiToolTipAnchorStyles = () => ({
   // Elements
   euiToolTipAnchor: css`

diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
@@ -304,12 +304,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
       calculatedPosition,
     } = this.state;
 
-    const classes = classNames(
-      'euiToolTip',
-      positionsToClassNameMap[this.state.calculatedPosition],
-      className
-    );
-
+    const classes = classNames('euiToolTip', className);
     const anchorClasses = classNames(anchorClassName, anchorProps?.className);
 
     return (
@@ -344,6 +339,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
               <EuiToolTipArrow
                 style={arrowStyles}
                 className="euiToolTip__arrow"
+                position={calculatedPosition}
               />
               <EuiResizeObserver onResize={this.positionToolTip}>
                 {(resizeRef) => <div ref={resizeRef}>{content}</div>}

diff --git a/src/components/tool_tip/tool_tip_arrow.tsx b/src/components/tool_tip/tool_tip_arrow.tsx
@@ -8,13 +8,15 @@
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
 import { useEuiTheme } from '../../services';
+import { ToolTipPositions } from './tool_tip_popover';
 import { euiToolTipStyles } from './tool_tip.styles';
 
-export const EuiToolTipArrow: FunctionComponent<HTMLAttributes<
-  HTMLDivElement
->> = (props) => {
+export const EuiToolTipArrow: FunctionComponent<
+  { position: ToolTipPositions } & HTMLAttributes<HTMLDivElement>
+> = ({ position, ...props }) => {
   const euiTheme = useEuiTheme();
-  const toolTipCss = euiToolTipStyles(euiTheme);
+  const styles = euiToolTipStyles(euiTheme);
+  const cssStyles = [styles.euiToolTip__arrow, styles.arrowPositions[position]];
 
-  return <div css={[toolTipCss.euiToolTip__arrow]} {...props} />;
+  return <div css={cssStyles} {...props} />;
 };
diff --git a/src/components/tool_tip/tool_tip_popover.tsx b/src/components/tool_tip/tool_tip_popover.tsx
@@ -17,7 +17,7 @@ import React, {
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
-import { euiToolTipStyles, euiToolTipPopoverStyles } from './tool_tip.styles';
+import { euiToolTipStyles } from './tool_tip.styles';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
 
@@ -42,9 +42,11 @@ export const EuiToolTipPopover: FunctionComponent<Props> = ({
   const popover = useRef<HTMLDivElement>();
 
   const euiTheme = useEuiTheme();
-  const toolTipCss = euiToolTipStyles(euiTheme);
-  const popoverStyles = euiToolTipPopoverStyles(euiTheme);
-  const titleCss = [popoverStyles.euiToolTip__title];
+  const styles = euiToolTipStyles(euiTheme);
+  const cssStyles = [
+    styles.euiToolTip,
+    calculatedPosition && styles[calculatedPosition],
+  ];
 
   const updateDimensions = useCallback(() => {
     requestAnimationFrame(() => {
@@ -75,16 +77,14 @@ export const EuiToolTipPopover: FunctionComponent<Props> = ({
 
   return (
     <div
-      css={[
-        toolTipCss.euiToolTip,
-        calculatedPosition && toolTipCss[calculatedPosition],
-      ]}
+      css={cssStyles}
       className={classes}
       ref={setPopoverRef}
+      data-position={calculatedPosition}
       {...rest}
     >
       {title && (
-        <div css={titleCss} className="euiToolTip__title">
+        <div css={styles.euiToolTip__title} className="euiToolTip__title">
           {title}
         </div>
       )}

diff --git a/upcoming_changelogs/6295.md b/upcoming_changelogs/6295.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiToolTip` not respecting reduced motion preferences