chore: Underline styles for popover text trigger (#3060)

Author: georgylobko

Diff for: pages/popover/text-wrap.page.tsx

@@ -26,6 +26,7 @@ const triggerPermutations = createPermutations<PopoverProps & { size: PopoverPro
       'Reallylongpopovercontentwithalotoftextbutnospacesthatwillprobablyoverflowthepopovertrigger',
     ],
     wrapTriggerText: [true, false],
+    triggerType: ['text', 'text-inline'],
   },
 ]);
 

Diff for: src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -12178,13 +12178,15 @@ that don't have visible text, and to distinguish between multiple triggers with
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of content inside the trigger region. The following types are available:
-- \`text\` - Use for inline text triggers.
+- \`text\` - Use for triggers containing inline components, like status indicator.
+- \`text-inline\` - Use for triggers containing plain text only.
 - \`custom\` - Use for the [button](/components/button/) component.",
       "inlineType": {
         "name": "PopoverProps.TriggerType",
         "type": "union",
         "values": [
           "text",
+          "text-inline",
           "custom",
         ],
       },

Diff for: src/popover/interfaces.ts

@@ -23,7 +23,8 @@ export interface PopoverProps extends BaseComponentProps {
 
   /**
    * Specifies the type of content inside the trigger region. The following types are available:
-   * - `text` - Use for inline text triggers.
+   * - `text` - Use for triggers containing inline components, like status indicator.
+   * - `text-inline` - Use for triggers containing plain text only.
    * - `custom` - Use for the [button](/components/button/) component.
    */
   triggerType?: PopoverProps.TriggerType;
@@ -114,7 +115,7 @@ export type Rect = BoundingBox & {
 export namespace PopoverProps {
   export type Position = 'top' | 'right' | 'bottom' | 'left';
   export type Size = 'small' | 'medium' | 'large';
-  export type TriggerType = 'text' | 'custom';
+  export type TriggerType = 'text' | 'text-inline' | 'custom';
 
   export interface Ref {
     /**

Diff for: src/popover/internal.tsx

@@ -74,7 +74,7 @@ function InternalPopover(
   const [visible, setVisible] = useState(false);
 
   const focusTrigger = useCallback(() => {
-    if (triggerType === 'text') {
+    if (['text', 'text-inline'].includes(triggerType)) {
       triggerRef.current?.focus();
     } else {
       triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();
@@ -198,7 +198,7 @@ function InternalPopover(
         });
       }}
     >
-      {triggerType === 'text' ? (
+      {['text', 'text-inline'].includes(triggerType) ? (
         <button
           {...triggerProps}
           className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}

Diff for: src/popover/styles.scss

@@ -12,6 +12,8 @@
 @import './container';
 @import './motion';
 
+$trigger-underline-offset: 0.25em;
+
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -36,8 +38,31 @@
   @include styles.text-wrapping;
 }
 
+.trigger-type-text-inline {
+  border-block: 0;
+  /*
+    This transparent border is necessary to maintain space between the trigger and the bottom-positioned popover.
+  */
+  border-block-end: awsui.$border-divider-list-width dashed transparent;
+  text-decoration: underline dashed currentColor;
+  text-decoration-thickness: awsui.$border-divider-list-width;
+  text-underline-offset: $trigger-underline-offset;
+
+  &.overflow-ellipsis {
+    /*
+      This line-height needs to be overridden because the overflow: hidden would otherwise conceal the underline styles.
+    */
+    line-height: calc(1 + #{$trigger-underline-offset} + #{awsui.$border-divider-list-width});
+  }
+}
+
 .trigger-type-text {
   border-block: 0;
+  border-block-end: awsui.$border-divider-list-width dashed currentColor;
+}
+
+.trigger-type-text-inline,
+.trigger-type-text {
   border-inline: 0;
   margin-block: 0;
   margin-inline: 0;
@@ -46,7 +71,6 @@
   background-color: transparent;
 
   cursor: pointer;
-  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;