From 3d0a0207dfaabc51e765a89c90d33156478ae10c Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Wed, 15 Jan 2025 17:48:27 +0530
Subject: [PATCH] fix: added padding to arrow in case caret is not in center

---
 packages/react/src/components/AILabel/index.tsx |  2 +-
 packages/react/src/components/Popover/index.tsx | 17 ++++++++---------
 .../react/src/components/Toggletip/index.tsx    |  4 ++--
 .../Tooltip/DefinitionTooltip.stories.js        |  6 +++++-
 .../components/Tooltip/DefinitionTooltip.tsx    |  3 ++-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx
index 7ce2a9af4c2a..720340eefab7 100644
--- a/packages/react/src/components/AILabel/index.tsx
+++ b/packages/react/src/components/AILabel/index.tsx
@@ -210,7 +210,7 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
           <Toggletip
             align={align}
             autoAlign={autoAlign}
-            alignmentAxisOffset={isSmallIcon ? -24 : 0}
+            arrowPadding={24}
             {...rest}>
             <ToggletipButton
               className={aiLabelButtonClasses}
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index bd2a7168fa63..468c338c34c9 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -98,6 +98,11 @@ interface PopoverBaseProps {
    */
   align?: PopoverAlignment;
 
+  /**
+   * Will add padding value to arrow in case of bottom-left, bottom-right or top-left, top-right
+   */
+  arrowPadding?: number;
+
   /**
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
@@ -179,7 +184,7 @@ export const Popover: PopoverComponent = React.forwardRef(
       highContrast = false,
       onRequestClose,
       open,
-      alignmentAxisOffset,
+      arrowPadding,
       ...rest
     }: PopoverProps<E>,
     forwardRef: ForwardedRef<Element>
@@ -267,14 +272,7 @@ export const Popover: PopoverComponent = React.forwardRef(
 
             // Middleware order matters, arrow should be last
             middleware: [
-              offset(
-                !isTabTip
-                  ? {
-                      alignmentAxis: alignmentAxisOffset,
-                      mainAxis: popoverDimensions?.current?.offset,
-                    }
-                  : 0
-              ),
+              offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
               autoAlign &&
                 flip({
                   fallbackPlacements: align.includes('bottom')
@@ -313,6 +311,7 @@ export const Popover: PopoverComponent = React.forwardRef(
                 }),
               arrow({
                 element: caretRef,
+                padding: arrowPadding,
               }),
               autoAlign && hide(),
             ],
diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
index e34d07cd041d..e7930f9fa34c 100644
--- a/packages/react/src/components/Toggletip/index.tsx
+++ b/packages/react/src/components/Toggletip/index.tsx
@@ -225,9 +225,9 @@ Toggletip.propTypes = {
   ]),
 
   /**
-   * Provide an offset value for alignment axis.
+   * Will add padding value to arrow in case of bottom-left, bottom-right or top-left, top-right
    */
-  alignmentAxisOffset: PropTypes.number,
+  arrowPadding: PropTypes.number,
 
   /**
    * Provide a custom element or component to render the top-level node for the
diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
index 7cce3b090e84..4a6d5cbecd47 100644
--- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
+++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
@@ -50,7 +50,11 @@ export const Default = (args) => {
     <p>
       Custom domains direct requests for your apps in this Cloud Foundry
       organization to a{' '}
-      <DefinitionTooltip openOnHover definition={definition} {...args}>
+      <DefinitionTooltip
+        openOnHover
+        autoAlign
+        definition={definition}
+        {...args}>
         URL that you own. A custom domain can be a shared domain,
       </DefinitionTooltip>{' '}
       a shared subdomain, or a shared domain and host.
diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx
index 3d5abb28ed2e..f9ea99d0c866 100644
--- a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx
+++ b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx
@@ -114,7 +114,8 @@ const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
       onFocus={() => {
         setOpen(true);
       }}
-      open={isOpen}>
+      open={isOpen}
+      arrowPadding={16}>
       <button
         {...rest}
         className={cx(`${prefix}--definition-term`, triggerClassName)}