From 7c3d8417a3332ceed0ed8a31a2607d7624c1279b Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 26 Nov 2024 14:20:17 +0100
Subject: [PATCH 01/12] chore: Underline styles for popover text trigger

---
 src/popover/styles.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 669d44a93b..e1cc87174e 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -43,7 +43,8 @@
   background-color: transparent;
 
   cursor: pointer;
-  border-block-end: awsui.$border-divider-list-width dashed currentColor;
+  text-decoration: underline dashed currentColor;
+  text-underline-offset: 0.25em;
 
   &:focus {
     outline: none;

From 11f3222ed66e6fc3f66b9a6df6a2a089061b024b Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 4 Dec 2024 14:39:56 +0100
Subject: [PATCH 02/12] chore: Styles adjustment

---
 src/popover/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 6dc341f928..52f9ec7fcb 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -47,7 +47,7 @@
 
   cursor: pointer;
   text-decoration: underline dashed currentColor;
-  text-underline-offset: 0.25em;
+  text-underline-offset: 0.2em;
 
   &:focus {
     outline: none;

From cb6a3d3614f88f67946c1fe93b9e6287b44d9891 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 5 Dec 2024 12:39:55 +0100
Subject: [PATCH 03/12] chore: Add transparent border to keep text trigger's
 size

---
 src/popover/styles.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 52f9ec7fcb..e5f32a9c4b 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -46,6 +46,7 @@
   background-color: transparent;
 
   cursor: pointer;
+  border-block-end: awsui.$border-divider-list-width dashed transparent;
   text-decoration: underline dashed currentColor;
   text-underline-offset: 0.2em;
 

From f1e42b9004ab4cd0fdd838ff288c5637043ead01 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 5 Dec 2024 16:05:40 +0100
Subject: [PATCH 04/12] chore: Apply text decoration for child span

---
 src/popover/styles.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index e5f32a9c4b..d53f477a62 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -50,6 +50,12 @@
   text-decoration: underline dashed currentColor;
   text-underline-offset: 0.2em;
 
+  /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+  & span {
+    text-decoration: underline dashed currentColor;
+    text-underline-offset: 0.2em;
+  }
+
   &:focus {
     outline: none;
   }

From 45d0a1671cd77e89db103f79909d7a594c1700a6 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 10 Dec 2024 10:19:00 +0100
Subject: [PATCH 05/12] chore: Handle wrapTriggerText differently

---
 src/popover/styles.scss | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index d53f477a62..9d7e4ed696 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -46,14 +46,21 @@
   background-color: transparent;
 
   cursor: pointer;
-  border-block-end: awsui.$border-divider-list-width dashed transparent;
-  text-decoration: underline dashed currentColor;
-  text-underline-offset: 0.2em;
 
-  /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-  & span {
+  &:not(.overflow-ellipsis) {
+    border-block-end: awsui.$border-divider-list-width dashed transparent;
     text-decoration: underline dashed currentColor;
-    text-underline-offset: 0.2em;
+    text-underline-offset: 0.25em;
+
+    /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+    & span {
+      text-decoration: underline dashed currentColor;
+      text-underline-offset: 0.25em;
+    }
+  }
+
+  &.overflow-ellipsis {
+    border-block-end: awsui.$border-divider-list-width dashed currentColor;
   }
 
   &:focus {

From 178c7cee1af06654656e6d24857517cc200b9f21 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 15 Jan 2025 11:56:08 +0100
Subject: [PATCH 06/12] feat: Introduce unified styles for both text wrapped
 and unwrapped popover triggers

---
 src/popover/styles.scss | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 9d7e4ed696..a359873772 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -12,6 +12,14 @@
 @import './container';
 @import './motion';
 
+$trigger-underline-offset: 0.25em;
+
+@mixin trigger-underline-styles {
+  text-decoration: underline dashed currentColor;
+  text-decoration-thickness: awsui.$border-divider-list-width;
+  text-underline-offset: $trigger-underline-offset;
+}
+
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -47,20 +55,19 @@
 
   cursor: pointer;
 
-  &:not(.overflow-ellipsis) {
-    border-block-end: awsui.$border-divider-list-width dashed transparent;
-    text-decoration: underline dashed currentColor;
-    text-underline-offset: 0.25em;
+  @include trigger-underline-styles;
 
-    /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-    & span {
-      text-decoration: underline dashed currentColor;
-      text-underline-offset: 0.25em;
-    }
+  &.overflow-ellipsis {
+    /*
+      this line-height must be overridden, because of the overflow: hidden,
+      otherwise the underline styles would be hidden
+    */
+    line-height: calc(1 + #{$trigger-underline-offset} + #{awsui.$border-divider-list-width});
   }
 
-  &.overflow-ellipsis {
-    border-block-end: awsui.$border-divider-list-width dashed currentColor;
+  /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+  & span {
+    @include trigger-underline-styles;
   }
 
   &:focus {

From f3476b8b6a1cd8727302b934a7327f9eda53155a Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 15 Jan 2025 12:22:55 +0100
Subject: [PATCH 07/12] chore: Introduce a transparent border-bottom to
 maintain space between the trigger and the bottom-positioned popover

---
 src/popover/styles.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index a359873772..76d2f61e5e 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -55,12 +55,15 @@ $trigger-underline-offset: 0.25em;
 
   cursor: pointer;
 
+  /*
+    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;
   @include trigger-underline-styles;
 
   &.overflow-ellipsis {
     /*
-      this line-height must be overridden, because of the overflow: hidden,
-      otherwise the underline styles would be hidden
+      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});
   }

From 05282ff7658a2299550f9a30b0883905d79c6396 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 20 Jan 2025 12:00:17 +0100
Subject: [PATCH 08/12] chore: Change styles specificity

---
 src/popover/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 76d2f61e5e..5827545d07 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -69,7 +69,7 @@ $trigger-underline-offset: 0.25em;
   }
 
   /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-  & span {
+  & * {
     @include trigger-underline-styles;
   }
 

From 9ee34f48ebce197f14b57ab1d3d0ac827efc8dc7 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 21 Jan 2025 11:15:00 +0100
Subject: [PATCH 09/12] chore: Add a comment to explain the css rule to
 propagate down underline styles

---
 src/popover/styles.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 5827545d07..c5f6f00952 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -68,6 +68,12 @@ $trigger-underline-offset: 0.25em;
     line-height: calc(1 + #{$trigger-underline-offset} + #{awsui.$border-divider-list-width});
   }
 
+  /*
+    These styles override the custom block content inside the popover trigger.
+    Inline elements automatically inherit the underline styles, whereas block elements do not.
+    One use case is when the StatusIndicator component is used as the popover trigger.
+    However, since it has display: inline-block, it does not inherit these styles automatically.
+  */
   /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
   & * {
     @include trigger-underline-styles;

From c329d845f59a07803327277c3684d821d0300520 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 22 Jan 2025 12:53:00 +0100
Subject: [PATCH 10/12] feat: New triggerType in Popover component

---
 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                       | 45 +++++++------------
 5 files changed, 26 insertions(+), 33 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 0fed0e3e02..73fc699899 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -12172,13 +12172,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 single line text triggers.
+- \`text-inline\` - Use for multiline text triggers.
 - \`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..81c52d3cfa 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 single line text triggers.
+   * - `text-inline` - Use for multiline text triggers.
    * - `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 c5f6f00952..4a07967467 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -14,12 +14,6 @@
 
 $trigger-underline-offset: 0.25em;
 
-@mixin trigger-underline-styles {
-  text-decoration: underline dashed currentColor;
-  text-decoration-thickness: awsui.$border-divider-list-width;
-  text-underline-offset: $trigger-underline-offset;
-}
-
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -44,22 +38,14 @@ $trigger-underline-offset: 0.25em;
   @include styles.text-wrapping;
 }
 
-.trigger-type-text {
-  border-block: 0;
-  border-inline: 0;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-  background-color: transparent;
-
-  cursor: pointer;
-
+.trigger-type-text-inline {
   /*
     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;
-  @include trigger-underline-styles;
+  text-decoration: underline dashed currentColor;
+  text-decoration-thickness: awsui.$border-divider-list-width;
+  text-underline-offset: $trigger-underline-offset;
 
   &.overflow-ellipsis {
     /*
@@ -67,17 +53,20 @@ $trigger-underline-offset: 0.25em;
     */
     line-height: calc(1 + #{$trigger-underline-offset} + #{awsui.$border-divider-list-width});
   }
+}
 
-  /*
-    These styles override the custom block content inside the popover trigger.
-    Inline elements automatically inherit the underline styles, whereas block elements do not.
-    One use case is when the StatusIndicator component is used as the popover trigger.
-    However, since it has display: inline-block, it does not inherit these styles automatically.
-  */
-  /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-  & * {
-    @include trigger-underline-styles;
-  }
+.trigger-type-text,
+.trigger-type-text-inline {
+  border-block: 0;
+  border-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  background-color: transparent;
+
+  cursor: pointer;
+  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;

From 41ba7a4a28f2fbc2898d1e3a0e5eda0e169111ec Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 22 Jan 2025 14:12:27 +0100
Subject: [PATCH 11/12] chore: Styles refactoring

---
 src/popover/styles.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 4a07967467..bd07666e46 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -39,6 +39,7 @@ $trigger-underline-offset: 0.25em;
 }
 
 .trigger-type-text-inline {
+  border-block: 0;
   /*
     This transparent border is necessary to maintain space between the trigger and the bottom-positioned popover.
   */
@@ -55,9 +56,13 @@ $trigger-underline-offset: 0.25em;
   }
 }
 
-.trigger-type-text,
-.trigger-type-text-inline {
+.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;
@@ -66,7 +71,6 @@ $trigger-underline-offset: 0.25em;
   background-color: transparent;
 
   cursor: pointer;
-  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;

From c5fc15020ca57621eaf26e395dc41e2638821ea1 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 22 Jan 2025 17:14:50 +0100
Subject: [PATCH 12/12] chore: Update api description

---
 .../snapshot-tests/__snapshots__/documenter.test.ts.snap      | 4 ++--
 src/popover/interfaces.ts                                     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index feea8274ea..b72aca01b0 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -12123,8 +12123,8 @@ 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 single line text triggers.
-- \`text-inline\` - Use for multiline 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",
diff --git a/src/popover/interfaces.ts b/src/popover/interfaces.ts
index 81c52d3cfa..289277a3e0 100644
--- a/src/popover/interfaces.ts
+++ b/src/popover/interfaces.ts
@@ -23,8 +23,8 @@ export interface PopoverProps extends BaseComponentProps {
 
   /**
    * Specifies the type of content inside the trigger region. The following types are available:
-   * - `text` - Use for single line text triggers.
-   * - `text-inline` - Use for multiline 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;