fix: Avoid cropping popover trigger focus ring when not wrapping text (#4116)

Author: jperals

package.json

@@ -175,7 +175,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1040 kB",
+      "limit": "1100 kB",
       "ignore": "react-dom"
     }
   ],

pages/popover/text-wrap.page.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import Popover, { PopoverProps } from '~components/popover';
 import PopoverBody, { PopoverBodyProps } from '~components/popover/body';
 
+import FocusTarget from '../common/focus-target';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
@@ -59,6 +60,7 @@ export default function () {
   return (
     <article>
       <h1>Popover text wrapping</h1>
+      <FocusTarget />
       <ScreenshotArea>
         <PermutationsView
           permutations={triggerPermutations}

src/popover/styles.scss

@@ -20,6 +20,15 @@ $trigger-underline-offset: 0.25em;
   &.no-wrap {
     white-space: nowrap;
   }
+
+  // When the trigger text is set to be ellipsized, render the focus ring on the root element instead of the trigger,
+  // to prevent it from being cropped by its `overflow: hidden` rule.
+  // We do this in only this case because when the trigger has multiple lines of texts its height can differ from the root element.
+  &:has(.trigger-type-text-inline.overflow-ellipsis:focus, .trigger-type-text.overflow-ellipsis:focus) {
+    @include focus-visible.when-visible-unfocused {
+      @include styles.focus-highlight(1px);
+    }
+  }
 }
 
 .root-filtering-token {
@@ -77,8 +86,10 @@ $trigger-underline-offset: 0.25em;
     outline: none;
   }
 
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(1px);
+  &:not(.overflow-ellipsis) {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(1px);
+    }
   }
 }