fix: definition tooltip breaks with large text (#17964)

* fix: definition tooltip breaks with large text

* fix: definition tooltip breaks with large text

* docs: added name in contributor list

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

* fix: test case

* fix: position issues

* fix: position issues

* fix: merge conflicts

* fix: format

* fix: without autoAlign

* fix: resolve conflict

* fix: removing autoAlign changes

* fix: removed largeText Story

* fix: lint issue

---------

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

Author: preetibansalui

.all-contributorsrc

@@ -165,6 +165,13 @@
         "a11y"
       ]
     },
+    {
+      "login": "preetibansalui",
+      "name": "Preeti Bansal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/146315451?v=4",
+      "profile": "https://github.com/preetibansalui",
+      "contributions": ["code", "a11y"]
+    },
     {
       "login": "erifsx",
       "name": "Eric Marcoux",

README.md

@@ -2877,6 +2877,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "isRequired": true,
         "type": "node",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -24,6 +24,11 @@ export interface DefinitionTooltipProps
    */
   align?: PopoverAlignment;
 
+  /**
+   * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign?: boolean;
+
   /**
    * The `children` prop will be used as the value that is being defined
    */
@@ -70,7 +75,8 @@ export interface DefinitionTooltipProps
 }
 
 const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
-  align = 'bottom-start',
+  align = 'bottom',
+  autoAlign,
   className,
   children,
   definition,
@@ -96,6 +102,7 @@ const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
     <Popover
       align={align}
       className={className}
+      autoAlign={autoAlign}
       dropShadow={false}
       highContrast
       onMouseLeave={() => {
@@ -166,6 +173,11 @@ DefinitionTooltip.propTypes = {
     'right-start',
   ]),
 
+  /**
+   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * The `children` prop will be used as the value that is being defined
    */

packages/react/src/components/Tooltip/DefinitionTooltip.tsx

@@ -266,6 +266,35 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
+  .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+  }
+
+  .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translate(50%, calc($popover-offset));
+  }
+
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translate(50%, calc(-1 * $popover-offset));
+  }
+
   [dir='rtl']
     .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover

packages/styles/scss/components/popover/_popover.scss

@@ -64,6 +64,7 @@ $tooltip-padding-inline: custom-property.get-var(
     padding: convert.to-rem(8px) convert.to-rem(16px);
     max-inline-size: convert.to-rem(176px);
     text-wrap: auto;
+    word-break: break-word;
   }
 }