fix: arrow breaking in AILabel popover (#17982)

* fix: arrow breaking in AILabel popover * fix: removed console * fix: format issue * fix: format issue * fix: format issue * fix: format issue * fix: arrow position vertically in case of ai=label * fix: added test * fix: format issue * fix: format * chore: yarn format
carbon-design-system · Dec 17, 2024 · 1cf7200 · 1cf7200
1 parent bdd9f4c
commit 1cf7200
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 15 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9440,6 +9440,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "alignmentAxisOffset": Object {
+        "type": "number",
+      },
       "as": Object {
         "type": "elementType",
       },

diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx
@@ -193,6 +193,8 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
         ? `${aiText} ${slugLabel || ariaLabel}`
         : `${aiText} ${aiTextLabel || textLabel}`;
 
+    const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
+
     return (
       <div className={aiLabelClasses} ref={ref} id={id}>
         {revertActive ? (
@@ -205,7 +207,11 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
             <Undo />
           </IconButton>
         ) : (
-          <Toggletip align={align} autoAlign={autoAlign} {...rest}>
+          <Toggletip
+            align={align}
+            autoAlign={autoAlign}
+            alignmentAxisOffset={isSmallIcon ? -24 : 0}
+            {...rest}>
             <ToggletipButton
               className={aiLabelButtonClasses}
               label={ariaLabelText}>

diff --git a/packages/react/src/components/Popover/__tests__/Popover-test.js b/packages/react/src/components/Popover/__tests__/Popover-test.js
@@ -9,6 +9,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 import userEvent from '@testing-library/user-event';
+import { waitForPosition } from '../../ListBox/test-helpers';
 
 const prefix = 'cds';
 
@@ -70,6 +71,44 @@ describe('Popover', () => {
       expect(screen.getByTestId('test').firstChild).toHaveClass('test');
     });
 
+    it('should have default caret height', async () => {
+      render(
+        <Popover
+          open
+          align="bottom"
+          data-testid="test"
+          autoAlign
+          className="test ai-label">
+          <button type="button">Settings</button>
+          <PopoverContent className="test"></PopoverContent>
+        </Popover>
+      );
+
+      await waitForPosition();
+      const caretContainer =
+        screen.getByTestId('test').lastChild.lastChild.firstChild;
+      expect(caretContainer).toHaveStyle({ left: '0px', top: '-6px' });
+    });
+
+    it('should change caret height in case of ai-label', async () => {
+      render(
+        <Popover
+          open
+          align="bottom"
+          data-testid="test"
+          autoAlign
+          className="test ai-label">
+          <button type="button">Settings</button>
+          <PopoverContent className="test ai-label"></PopoverContent>
+        </Popover>
+      );
+
+      await waitForPosition();
+      const caretContainer =
+        screen.getByTestId('test').lastChild.lastChild.firstChild;
+      expect(caretContainer).toHaveStyle({ left: '0px', top: '-7px' });
+    });
+
     it('should forward additional props on the outermost element', () => {
       const { container } = render(
         <PopoverContent id="test" data-testid="test">

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -179,6 +179,7 @@ export const Popover: PopoverComponent = React.forwardRef(
       highContrast = false,
       onRequestClose,
       open,
+      alignmentAxisOffset,
       ...rest
     }: PopoverProps<E>,
     forwardRef: ForwardedRef<Element>
@@ -209,7 +210,10 @@ export const Popover: PopoverComponent = React.forwardRef(
     // needs to be placed 1px further outside the popover content. To do so,
     // we look to see if any of the children has a className containing "slug"
     const initialCaretHeight = React.Children.toArray(children).some((x) => {
-      return (x as any)?.props?.className?.includes('slug');
+      return (
+        (x as any)?.props?.className?.includes('slug') ||
+        (x as any)?.props?.className?.includes('ai-label')
+      );
     })
       ? 7
       : 6;
@@ -250,7 +254,6 @@ export const Popover: PopoverComponent = React.forwardRef(
         }
       }
     });
-
     const { refs, floatingStyles, placement, middlewareData } = useFloating(
       enableFloatingStyles
         ? {
@@ -264,7 +267,14 @@ export const Popover: PopoverComponent = React.forwardRef(
 
             // Middleware order matters, arrow should be last
             middleware: [
-              offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
+              offset(
+                !isTabTip
+                  ? {
+                      alignmentAxis: alignmentAxisOffset,
+                      mainAxis: popoverDimensions?.current?.offset,
+                    }
+                  : 0
+              ),
               autoAlign &&
                 flip({
                   fallbackPlacements: align.includes('bottom')

diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
@@ -25,9 +25,9 @@ import { usePrefix } from '../../internal/usePrefix';
 import { PolymorphicProps } from '../../types/common';
 
 type ToggletipLabelProps<E extends ElementType> = {
-  as?: E | undefined;
+  as?: E;
   children?: ReactNode;
-  className?: string | undefined;
+  className?: string;
 };
 
 /**
@@ -82,12 +82,13 @@ function useToggletip() {
 }
 
 interface ToggletipProps<E extends ElementType> {
-  align?: PopoverAlignment | undefined;
-  as?: E | undefined;
-  autoAlign?: boolean | undefined;
-  className?: string | undefined;
+  align?: PopoverAlignment;
+  alignmentAxisOffset?: number;
+  as?: E;
+  autoAlign?: boolean;
+  className?: string;
   children?: ReactNode;
-  defaultOpen?: boolean | undefined;
+  defaultOpen?: boolean;
 }
 
 /**
@@ -223,6 +224,11 @@ Toggletip.propTypes = {
     'right-start',
   ]),
 
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
+
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -253,8 +259,8 @@ Toggletip.propTypes = {
 
 interface ToggletipButtonBaseProps {
   children?: ReactNode;
-  className?: string | undefined;
-  label?: string | undefined;
+  className?: string;
+  label?: string;
 }
 
 export type ToggleTipButtonProps<T extends React.ElementType> =
@@ -264,6 +270,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> =
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
+
 export const ToggletipButton = React.forwardRef(function ToggletipButton<
   T extends React.ElementType,
 >(
@@ -323,7 +330,7 @@ ToggletipButton.displayName = 'ToggletipButton';
 
 interface ToggletipContentProps {
   children?: ReactNode;
-  className?: string | undefined;
+  className?: string;
 }
 
 /**
@@ -365,7 +372,7 @@ export { ToggletipContent };
 
 interface ToggleTipActionsProps {
   children?: ReactNode;
-  className?: string | undefined;
+  className?: string;
 }
 
 /**