fix: added padding to arrow in case caret is not in center

carbon-design-system · Jan 15, 2025 · 3d0a020 · 3d0a020
1 parent 4818a5e
commit 3d0a020
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)}