Tag - Text truncation for overflow fix

packages/components/src/components/hds/tag/index.hbs

@@ -2,29 +2,69 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<Hds::Text::Body class={{this.classNames}} @tag="span" @size="100" @weight="medium" @color="primary" ...attributes>
+<Hds::Text::Body
+  class={{this.classNames}}
+  @tag="span"
+  @size="100"
+  @weight="medium"
+  @color="primary"
+  {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroyNode}}
+  ...attributes
+>
   {{#if this.onDismiss}}
     <button class="hds-tag__dismiss" type="button" aria-label={{this.ariaLabel}} {{on "click" this.onDismiss}}>
       <Hds::Icon class="hds-tag__dismiss-icon" @name="x" @size="16" />
     </button>
   {{/if}}
   {{#if (or @href @route)}}
-    <Hds::Interactive
-      class="hds-tag__link"
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      @isRouteExternal={{@isRouteExternal}}
-      @href={{@href}}
-      @isHrefExternal={{@isHrefExternal}}
-    >
-      {{this.text}}
-    </Hds::Interactive>
+    {{#if this._isTextOverflow}}
+      <Hds::Interactive
+        class="hds-tag__link"
+        @current-when={{@current-when}}
+        @models={{hds-link-to-models @model @models}}
+        @query={{hds-link-to-query @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        @isRouteExternal={{@isRouteExternal}}
+        @href={{@href}}
+        @isHrefExternal={{@isHrefExternal}}
+        {{hds-tooltip this.text options=(hash placement="right")}}
+      >
+        <div class="hds-tag__text-container">
+          {{this.text}}
+        </div>
+      </Hds::Interactive>
+    {{else}}
+      <Hds::Interactive
+        class="hds-tag__link"
+        @current-when={{@current-when}}
+        @models={{hds-link-to-models @model @models}}
+        @query={{hds-link-to-query @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        @isRouteExternal={{@isRouteExternal}}
+        @href={{@href}}
+        @isHrefExternal={{@isHrefExternal}}
+      >
+        <div class="hds-tag__text-container">
+          {{this.text}}
+        </div>
+      </Hds::Interactive>
+    {{/if}}
   {{else}}
-    <span class="hds-tag__text">
-      {{this.text}}
-    </span>
+    {{#if this._isTextOverflow}}
+      <Hds::TooltipButton class="hds-tag__text" @text={{this.text}} @placement="right">
+        <div class="hds-tag__text-container">
+          {{this.text}}
+        </div>
+      </Hds::TooltipButton>
+    {{else}}
+      <span class="hds-tag__text">
+        <div class="hds-tag__text-container">
+          {{this.text}}
+        </div>
+      </span>
+    {{/if}}
   {{/if}}
 </Hds::Text::Body>

packages/components/src/components/hds/tag/index.ts

@@ -4,6 +4,8 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
 import { HdsTagColorValues } from './types.ts';
@@ -25,6 +27,9 @@ export interface HdsTagSignature {
 }
 
 export default class HdsTag extends Component<HdsTagSignature> {
+  @tracked private _isTextOverflow!: boolean;
+  private _observer!: ResizeObserver;
+
   /**
    * @param onDismiss
    * @type {function}
@@ -104,4 +109,33 @@ export default class HdsTag extends Component<HdsTagSignature> {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(element: HTMLElement): void {
+    // Used to detect when text is clipped to one line, and tooltip should be added
+    this._observer = new ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        entries.forEach((entry) => {
+          this._isTextOverflow = this._isOverflow(
+            entry.target.querySelector('.hds-tag__text-container')!
+          );
+        });
+      });
+    });
+    this._observer.observe(element);
+  }
+
+  @action
+  willDestroyNode(): void {
+    super.willDestroy();
+    this._observer.disconnect();
+  }
+
+  private _isOverflow(el: Element): boolean {
+    if (el.scrollHeight > el.clientHeight) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 }

packages/components/src/styles/components/tag.scss

@@ -45,6 +45,14 @@ $hds-tag-border-radius: 50px;
   border-radius: inherit;
 }
 
+.hds-tag__text-container {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+
 .hds-tag__dismiss ~ .hds-tag__text,
 .hds-tag__dismiss ~ .hds-tag__link {
   padding: 3px 8px 5px 6px;
@@ -76,6 +84,18 @@ $hds-tag-border-radius: 50px;
   }
 }
 
+.hds-tooltip-button.hds-tag__text {
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-basic();
+    z-index: 1; // ensures focus is not obscured by adjacent elements
+  }
+
+  &:focus-visible::before {
+    box-shadow: none; // override default tooltip button focus styles
+  }
+}
+
 // COLORS (FOR LINK)
 
 .hds-tag--color-primary {

showcase/app/templates/components/tag.hbs

@@ -39,6 +39,16 @@
     <SF.Item {{style width="200px"}}>
       <Hds::Tag @text="This is a very long text that should go on multiple lines" />
     </SF.Item>
+    <SF.Item {{style width="200px"}}>
+      <Hds::Tag
+        @text="This is a very long text that should go on multiple lines"
+        @onDismiss={{this.noop}}
+        @route="components.tag"
+      />
+    </SF.Item>
+    <SF.Item {{style width="200px"}}>
+      <Hds::Tag @text="This is a very long text that should go on multiple lines" @route="components.tag" />
+    </SF.Item>
   </Shw::Flex>
 
   <Shw::Divider @level={{2}} />