Tag - Text truncation for overflow fix

.changeset/brown-wolves-admire.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Tag` - Truncate any text that wraps to multiple lines and add a tooltip with the full text when truncation occurs

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

@@ -2,29 +2,68 @@
   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"
+  {{this._setUpObserver}}
+  ...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,7 +4,9 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { modifier } from 'ember-modifier';
 
 import { HdsTagColorValues } from './types.ts';
 import type { HdsTagColors } from './types.ts';
@@ -25,6 +27,25 @@ export interface HdsTagSignature {
 }
 
 export default class HdsTag extends Component<HdsTagSignature> {
+  @tracked private _isTextOverflow!: boolean;
+  private _observer!: ResizeObserver;
+
+  private _setUpObserver = modifier((element: HTMLElement) => {
+    // Used to detect when text is clipped to one line, and tooltip should be added
+    this._observer = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        this._isTextOverflow = this._isOverflow(
+          entry.target.querySelector('.hds-tag__text-container')!
+        );
+      });
+    });
+    this._observer.observe(element);
+
+    return () => {
+      this._observer.disconnect();
+    };
+  });
+
   /**
    * @param onDismiss
    * @type {function}
@@ -104,4 +125,8 @@ export default class HdsTag extends Component<HdsTagSignature> {
 
     return classes.join(' ');
   }
+
+  private _isOverflow(el: Element): boolean {
+    return el.scrollHeight > el.clientHeight;
+  }
 }

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

@@ -15,6 +15,8 @@ $hds-tag-border-radius: 50px;
 .hds-tag {
   display: inline-flex;
   align-items: stretch;
+  width: fit-content;
+  max-width: 100%;
   line-height: 1rem; // 16px - override `body-100`
   vertical-align: middle;
   background-color: var(--token-color-surface-interactive);
@@ -45,6 +47,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 +86,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}} />

showcase/tests/integration/components/hds/tag/index-test.js

@@ -25,6 +25,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     await render(hbs`<Hds::Tag @text="My tag" />`);
     assert.dom('button.hds-tag__dismiss').doesNotExist();
   });
+
   test('it should render the "dismiss" button if a callback function is passed to the @onDismiss argument', async function (assert) {
     this.set('NOOP', () => {});
     await render(hbs`<Hds::Tag @text="My tag" @onDismiss={{this.NOOP}} />`);
@@ -44,6 +45,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
       .dom('button.hds-tag__dismiss')
       .hasAttribute('aria-label', 'Please dismiss My tag');
   });
+
   // COLOR
 
   test('it should render the primary color as the default if no @color prop is declared when the text is a link', async function (assert) {
@@ -52,12 +54,14 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-primary');
   });
+
   test('it should render the correct CSS color class if the @color prop is declared when the text is a link', async function (assert) {
     await render(
       hbs`<Hds::Tag @text="My text tag" @href="/" @color="secondary" id="test-link-tag"/>`
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-secondary');
   });
+
   test('it should throw an assertion if an incorrect value for @color is provided when the text is a link', async function (assert) {
     const errorMessage =
       '@color for "Hds::Tag" must be one of the following: primary, secondary; received: foo';
@@ -70,6 +74,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
       throw new Error(errorMessage);
     });
   });
+
   test('it should throw an assertion if @color is provided without @href or @route', async function (assert) {
     const errorMessage =
       '@color can only be applied to "Hds::Tag" along with either @href or @route';
@@ -82,4 +87,22 @@ module('Integration | Component | hds/tag/index', function (hooks) {
       throw new Error(errorMessage);
     });
   });
+
+  // OVERFLOW
+
+  test('it should not render a tooltip if the text does not overflow', async function (assert) {
+    await render(hbs`
+        <Hds::Tag @text="My text tag" id="test-tag"/>
+    `);
+    assert.dom('.hds-tooltip-button').doesNotExist();
+  });
+
+  test('it should render a tooltip if the text overflows', async function (assert) {
+    await render(hbs`
+      <div style="width: 50px;">
+        <Hds::Tag @text="This is a very long text that should go on multiple lines" id="test-tag"/>
+      </div>
+    `);
+    assert.dom('.hds-tooltip-button').exists();
+  });
 });