From 34cd820aea6133d96a34949e3681dfc046551aa3 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <47106899+georgylobko@users.noreply.github.com>
Date: Tue, 28 Jan 2025 09:35:20 +0100
Subject: [PATCH] feat: Popover text inline trigger (#3224)

---
 pages/popover/text-wrap.page.tsx              |  1 +
 .../__snapshots__/documenter.test.ts.snap     |  4 ++-
 src/popover/interfaces.ts                     |  5 ++--
 src/popover/internal.tsx                      |  4 +--
 src/popover/styles.scss                       | 26 ++++++++++++++++++-
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/pages/popover/text-wrap.page.tsx b/pages/popover/text-wrap.page.tsx
index 1e21a81c90..e46a4b7bb1 100644
--- a/pages/popover/text-wrap.page.tsx
+++ b/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 --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index f83e1c2da5..fcda60b2aa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/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 --git a/src/popover/interfaces.ts b/src/popover/interfaces.ts
index 617ba9f7fd..289277a3e0 100644
--- a/src/popover/interfaces.ts
+++ b/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 --git a/src/popover/internal.tsx b/src/popover/internal.tsx
index b9fb844731..3e22356a03 100644
--- a/src/popover/internal.tsx
+++ b/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 --git a/src/popover/styles.scss b/src/popover/styles.scss
index 34c6f92b1c..a389b9bfbe 100644
--- a/src/popover/styles.scss
+++ b/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 style needs because of the overflow: hidden would otherwise conceal the underline styles.
+    */
+    padding-block-end: calc(#{$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;