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

…3223)

pages/popover/text-wrap.page.tsx

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

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

@@ -12178,15 +12178,13 @@ 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 triggers containing inline components, like status indicator.
-- \`text-inline\` - Use for triggers containing plain text only.
+- \`text\` - Use for inline text triggers.
 - \`custom\` - Use for the [button](/components/button/) component.",
       "inlineType": {
         "name": "PopoverProps.TriggerType",
         "type": "union",
         "values": [
           "text",
-          "text-inline",
           "custom",
         ],
       },

src/popover/interfaces.ts

@@ -23,8 +23,7 @@ export interface PopoverProps extends BaseComponentProps {
 
   /**
    * Specifies the type of content inside the trigger region. The following types are available:
-   * - `text` - Use for triggers containing inline components, like status indicator.
-   * - `text-inline` - Use for triggers containing plain text only.
+   * - `text` - Use for inline text triggers.
    * - `custom` - Use for the [button](/components/button/) component.
    */
   triggerType?: PopoverProps.TriggerType;
@@ -115,7 +114,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' | 'text-inline' | 'custom';
+  export type TriggerType = 'text' | 'custom';
 
   export interface Ref {
     /**

src/popover/internal.tsx

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

src/popover/styles.scss

@@ -12,8 +12,6 @@
 @import './container';
 @import './motion';
 
-$trigger-underline-offset: 0.25em;
-
 .root {
   @include styles.styles-reset;
   color: inherit;
@@ -38,31 +36,8 @@ $trigger-underline-offset: 0.25em;
   @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;
@@ -71,6 +46,7 @@ $trigger-underline-offset: 0.25em;
   background-color: transparent;
 
   cursor: pointer;
+  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;