@workday/canvas-kit-react 14.2.18 → 14.2.19

package/tooltip/lib/Tooltip.tsx

@@ -7,7 +7,7 @@ import {
   Popper,
   defaultFallbackPlacements,
 } from '@workday/canvas-kit-react/popup';
-import {createComponent, mergeCallback} from '@workday/canvas-kit-react/common';
+import {createComponent, mergeCallback, useLocalRef} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
 import {useTooltip} from './useTooltip';
@@ -112,6 +112,29 @@ export const Tooltip = createComponent('div')({
       hideDelay,
     });
 
+    const [elementHasFocus, setElementHasFocus] = React.useState(false);
+    const {localRef: targetRef, elementRef} = useLocalRef<HTMLElement>();
+
+    React.useEffect(() => {
+      const target = targetRef.current;
+      if (!target) {
+        return;
+      }
+
+      const updateFocusState = () => {
+        setElementHasFocus(target.matches(':focus-visible') || target.classList.contains('focus'));
+      };
+
+      updateFocusState(); // Check initial state
+      target.addEventListener('focus', updateFocusState);
+      target.addEventListener('blur', updateFocusState);
+
+      return () => {
+        target.removeEventListener('focus', updateFocusState);
+        target.removeEventListener('blur', updateFocusState);
+      };
+    }, [targetRef]);
+
     return (
       <React.Fragment>
         {React.cloneElement(children, {
@@ -120,12 +143,18 @@ export const Tooltip = createComponent('div')({
           ...(/^(muted|describe)$/.test(type) && children.props['aria-label']
             ? {'aria-label': children.props['aria-label']}
             : {}),
+          ref: elementRef,
         })}
         <Popper placement={placement} fallbackPlacements={fallbackPlacements} {...popperProps}>
           {({placement}) => {
             const transformOrigin = getTransformFromPlacement(placement);
             return (
-              <TooltipContainer transformOrigin={transformOrigin} {...elemProps} {...tooltipProps}>
+              <TooltipContainer
+                transformOrigin={transformOrigin}
+                {...elemProps}
+                {...tooltipProps}
+                elementHasFocus={elementHasFocus}
+              >
                 {title}
               </TooltipContainer>
             );

package/tooltip/lib/TooltipContainer.tsx

@@ -28,12 +28,10 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
    */
   id?: string;
   /**
-   * optional popper properties if `placement` is set
+   * Whether the anchor element has focus-visible. Used to adjust tooltip styling.
+   * @private
    */
-  popperProps?: {
-    open: boolean;
-    anchorElement: HTMLElement | null;
-  };
+  elementHasFocus?: boolean;
 }
 
 const defaultTransformOrigin = {
@@ -91,7 +89,6 @@ export const tooltipContainerStencil = createStencil({
       right: 0,
       bottom: 0,
     },
-
     // Hide tooltip when the reference element is either clipped or fully hidden
     '[data-popper-reference-hidden] &': {
       visibility: 'hidden',
@@ -112,15 +109,30 @@ export const tooltipContainerStencil = createStencil({
       bottom: calc.negate(system.space.x1),
     },
   }),
+  modifiers: {
+    elementHasFocus: {
+      true: {
+        padding: calc.subtract(system.space.x4, calc.divide(system.space.x1, 2)),
+        '&:before': {
+          margin: calc.add(system.space.x1, calc.divide(system.space.x1, 2)),
+        },
+      },
+    },
+  },
 });
 
 export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
   displayName: 'TooltipContainer',
-  Component: ({children, transformOrigin = defaultTransformOrigin, ...elemProps}, ref, Element) => {
+  Component: (
+    {children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps},
+    ref,
+    Element
+  ) => {
     const translate = getTransformOrigin(
       transformOrigin || defaultTransformOrigin,
       cssVar(system.space.x2)
     );
+
     return (
       <Element
         ref={ref}
@@ -128,6 +140,7 @@ export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
           tooltipContainerStencil({
             tooltipTransformOriginHorizontal: transformOrigin?.horizontal,
             tooltipTransformOriginVertical: transformOrigin?.vertical,
+            elementHasFocus,
           }),
           tooltipTranslateVars({positionX: translate.x, positionY: translate.y}),
         ])}