From 0809e3c38569366c2ea6f9d063874094f078042e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 5 Oct 2022 16:24:20 -0700 Subject: [PATCH 1/6] Add euiCanAnimate checks around tooltip animations --- src/components/tool_tip/tool_tip.styles.ts | 25 +++++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts index c57f0377215..dc1bf067dcf 100644 --- 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'; @@ -90,28 +91,36 @@ 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}; + ${euiCanAnimate} { + animation: ${euiToolTipAnimationVertical(euiTheme.size.base)} + ${animationTiming}; + } [class*='euiToolTip__arrow'] { transform: translateY(${arrowMinusSize}) rotateZ(45deg); /* 1 */ } `, left: css` - animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)} - ${animationTiming}; + ${euiCanAnimate} { + animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)} + ${animationTiming}; + } [class*='euiToolTip__arrow'] { transform: translateX(${arrowPlusSize}) rotateZ(45deg); /* 1 */ } `, right: css` - animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)} - ${animationTiming}; + ${euiCanAnimate} { + animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)} + ${animationTiming}; + } [class*='euiToolTip__arrow'] { transform: translateX(${arrowMinusSize}) rotateZ(45deg); /* 1 */ From ded9e0ab47793cd2fc8bd0ddd5ceb787b1df7d11 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 5 Oct 2022 16:28:37 -0700 Subject: [PATCH 2/6] Remove unnecessary arrow CSS nesting - by passing `position` prop down to EuiTooltipArrow --- .../__snapshots__/tool_tip.test.tsx.snap | 2 +- src/components/tool_tip/tool_tip.styles.ts | 33 +++++++++---------- src/components/tool_tip/tool_tip.tsx | 1 + src/components/tool_tip/tool_tip_arrow.tsx | 12 ++++--- 4 files changed, 25 insertions(+), 23 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 index 4d17225945c..b6bfcbb3ff5 100644 --- a/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap +++ b/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap @@ -79,7 +79,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = ` title
diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts index dc1bf067dcf..95c597e1a60 100644 --- a/src/components/tool_tip/tool_tip.styles.ts +++ b/src/components/tool_tip/tool_tip.styles.ts @@ -60,9 +60,6 @@ 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 - */ 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. @@ -101,32 +98,20 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { animation: ${euiToolTipAnimationVertical(euiTheme.size.base)} ${animationTiming}; } - - [class*='euiToolTip__arrow'] { - transform: translateY(${arrowMinusSize}) rotateZ(45deg); /* 1 */ - } `, left: css` ${euiCanAnimate} { animation: ${euiToolTipAnimationHorizontal(`-${euiTheme.size.base}`)} ${animationTiming}; } - - [class*='euiToolTip__arrow'] { - transform: translateX(${arrowPlusSize}) rotateZ(45deg); /* 1 */ - } `, right: css` ${euiCanAnimate} { animation: ${euiToolTipAnimationHorizontal(euiTheme.size.base)} ${animationTiming}; } - - [class*='euiToolTip__arrow'] { - transform: translateX(${arrowMinusSize}) rotateZ(45deg); /* 1 */ - } `, - // Elements + // Arrow euiToolTip__arrow: css` content: ''; position: absolute; @@ -134,8 +119,22 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { border-radius: 2px; background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)}; ${logicalSizeCSS(arrowSize, arrowSize)}; - transform: translateY(${arrowPlusSize}) rotateZ(45deg); /* 1 */ `, + // Shift arrow 1px more than half its size to account for border radius + 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); + `, + }, }; }; diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index 35f4716e124..2aee79a6ae0 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -344,6 +344,7 @@ export class EuiToolTip extends Component { {(resizeRef) =>
{content}
} diff --git a/src/components/tool_tip/tool_tip_arrow.tsx b/src/components/tool_tip/tool_tip_arrow.tsx index 0c02d621708..0b5eb348597 100644 --- 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> = (props) => { +export const EuiToolTipArrow: FunctionComponent< + { position: ToolTipPositions } & HTMLAttributes +> = ({ position, ...props }) => { const euiTheme = useEuiTheme(); - const toolTipCss = euiToolTipStyles(euiTheme); + const styles = euiToolTipStyles(euiTheme); + const cssStyles = [styles.euiToolTip__arrow, styles.arrowPositions[position]]; - return
; + return
; }; From 19f23afa7cf71b932edf830ad95696dd49fd2f76 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 5 Oct 2022 16:31:21 -0700 Subject: [PATCH 3/6] Remove unnecessary euiToolTipPopoverStyles --- .../__snapshots__/tool_tip.test.tsx.snap | 2 +- .../tool_tip_popover.test.tsx.snap | 2 +- src/components/tool_tip/tool_tip.styles.ts | 32 ++++++++----------- src/components/tool_tip/tool_tip_popover.tsx | 22 +++++-------- 4 files changed, 23 insertions(+), 35 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 index b6bfcbb3ff5..c9e1b89016f 100644 --- 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,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = ` >
`; diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts index 95c597e1a60..682fdab797c 100644 --- a/src/components/tool_tip/tool_tip.styles.ts +++ b/src/components/tool_tip/tool_tip.styles.ts @@ -135,28 +135,22 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { 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_popover.tsx b/src/components/tool_tip/tool_tip_popover.tsx index 850b7e4d96b..da26a896a93 100644 --- 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 = ({ const popover = useRef(); 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(() => { @@ -74,17 +76,9 @@ export const EuiToolTipPopover: FunctionComponent = ({ const classes = classNames('euiToolTipPopover', className); return ( -
+
{title && ( -
+
{title}
)} From 467d3be70deec48a8a5d077f545949dc485dfc1b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 5 Oct 2022 16:38:28 -0700 Subject: [PATCH 4/6] Remove unnecessary classNames map - not used in Kibana anywhere - replace with a data attribute, just in case :shrug: --- .../tool_tip/__snapshots__/tool_tip.test.tsx.snap | 3 ++- src/components/tool_tip/tool_tip.tsx | 7 +------ src/components/tool_tip/tool_tip_popover.tsx | 8 +++++++- 3 files changed, 10 insertions(+), 8 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 index c9e1b89016f..936f04229b6 100644 --- 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`] = ` >
{ calculatedPosition, } = this.state; - const classes = classNames( - 'euiToolTip', - positionsToClassNameMap[this.state.calculatedPosition], - className - ); - + const classes = classNames('euiToolTip', className); const anchorClasses = classNames(anchorClassName, anchorProps?.className); return ( diff --git a/src/components/tool_tip/tool_tip_popover.tsx b/src/components/tool_tip/tool_tip_popover.tsx index da26a896a93..a561b30b7c1 100644 --- a/src/components/tool_tip/tool_tip_popover.tsx +++ b/src/components/tool_tip/tool_tip_popover.tsx @@ -76,7 +76,13 @@ export const EuiToolTipPopover: FunctionComponent = ({ const classes = classNames('euiToolTipPopover', className); return ( -
+
{title && (
{title} From 03246120f85403de4a9a9644c63198b4f394154d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 5 Oct 2022 16:45:20 -0700 Subject: [PATCH 5/6] changelog - not terribly detailed, but most consumers probably don't care about cleaner nesting / class names --- upcoming_changelogs/6295.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6295.md diff --git a/upcoming_changelogs/6295.md b/upcoming_changelogs/6295.md new file mode 100644 index 00000000000..f8df4a653ab --- /dev/null +++ b/upcoming_changelogs/6295.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiToolTip` not respecting reduced motion preferences From a145ad840fd56d73705517787de6a6d582e29259 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 6 Oct 2022 10:07:53 -0700 Subject: [PATCH 6/6] [PR feedback] comments --- src/components/tool_tip/tool_tip.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/tool_tip/tool_tip.styles.ts b/src/components/tool_tip/tool_tip.styles.ts index 682fdab797c..31e8a899fd0 100644 --- a/src/components/tool_tip/tool_tip.styles.ts +++ b/src/components/tool_tip/tool_tip.styles.ts @@ -60,9 +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`; + // 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` @@ -120,7 +121,6 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)}; ${logicalSizeCSS(arrowSize, arrowSize)}; `, - // Shift arrow 1px more than half its size to account for border radius arrowPositions: { top: css` transform: translateY(${arrowPlusSize}) rotateZ(45deg);