Feat: Tag tooltipPlacement prop, max width for text

.changeset/brown-wolves-admire.md

@@ -3,3 +3,5 @@
 ---
 
 `Tag` - Truncate any text that wraps to multiple lines and add a tooltip with the full text when truncation occurs
+
+`Tag` - Added `@tooltipPlacement` argument

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

@@ -28,7 +28,7 @@
         @isRouteExternal={{@isRouteExternal}}
         @href={{@href}}
         @isHrefExternal={{@isHrefExternal}}
-        {{hds-tooltip this.text options=(hash placement="right")}}
+        {{hds-tooltip this.text options=(hash placement=this.tooltipPlacement)}}
       >
         <div class="hds-tag__text-container">
           {{this.text}}
@@ -53,7 +53,7 @@
     {{/if}}
   {{else}}
     {{#if this._isTextOverflow}}
-      <Hds::TooltipButton class="hds-tag__text" @text={{this.text}} @placement="right">
+      <Hds::TooltipButton class="hds-tag__text" @text={{this.text}} @placement={{this.tooltipPlacement}}>
         <div class="hds-tag__text-container">
           {{this.text}}
         </div>

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

@@ -10,16 +10,21 @@ import { modifier } from 'ember-modifier';
 
 import { HdsTagColorValues } from './types.ts';
 import type { HdsTagColors } from './types.ts';
+import { HdsTagTooltipPlacementValues } from './types.ts';
+import type { HdsTagTooltipPlacements } from './types.ts';
 import type { HdsInteractiveSignature } from '../interactive/';
 
 export const COLORS: string[] = Object.values(HdsTagColorValues);
 export const DEFAULT_COLOR = HdsTagColorValues.Primary;
+export const TOOLTIP_PLACEMENTS: string[] = Object.values(HdsTagTooltipPlacementValues);
+export const DEFAULT_TOOLTIP_PLACEMENT = HdsTagTooltipPlacementValues.Top;
 
 export interface HdsTagSignature {
   Args: HdsInteractiveSignature['Args'] & {
     color?: HdsTagColors;
     text: string;
     ariaLabel?: string;
+    tooltipPlacement: HdsTagTooltipPlacements;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onDismiss?: (event: MouseEvent, ...args: any[]) => void;
   };
@@ -46,6 +51,23 @@ export default class HdsTag extends Component<HdsTagSignature> {
     };
   });
 
+  /**
+   * @param tooltioPlacement
+   * @type {string}
+   * @default top
+   * @description The placement property of the tooltip attached to the tag text.
+   */
+  get tooltipPlacement(): HdsTagTooltipPlacements {
+    const { tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT } = this.args;
+
+    assert(
+      '@tooltipPlacement for "Hds::Tag" must have a valid value',
+      tooltipPlacement == undefined || TOOLTIP_PLACEMENTS.includes(tooltipPlacement)
+    );
+
+    return tooltipPlacement;
+  }
+
   /**
    * @param onDismiss
    * @type {function}

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

@@ -8,3 +8,20 @@ export enum HdsTagColorValues {
   Secondary = 'secondary',
 }
 export type HdsTagColors = `${HdsTagColorValues}`;
+
+export enum HdsTagTooltipPlacementValues {
+  Top = 'top',
+  TopStart = 'top-start',
+  TopEnd = 'top-end',
+  Right = 'right',
+  RightStart = 'right-start',
+  RightEnd = 'right-end',
+  Bottom = 'bottom',
+  BottomStart = 'bottom-start',
+  BottomEnd = 'bottom-end',
+  Left = 'left',
+  LeftStart = 'left-start',
+  LeftEnd = 'left-end',
+}
+
+export type HdsTagTooltipPlacements = `${HdsTagTooltipPlacementValues}`;

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

@@ -45,6 +45,7 @@ $hds-tag-border-radius: 50px;
   flex: 1 0 0;
   padding: 3px 10px 5px 10px;
   border-radius: inherit;
+  max-width: 150px;
 }
 
 .hds-tag__text-container {

showcase/app/routes/components/tag.js

@@ -5,11 +5,12 @@
 
 import Route from '@ember/routing/route';
 import { COLORS } from '@hashicorp/design-system-components/components/hds/tag';
+import { TOOLTIP_PLACEMENTS } from '@hashicorp/design-system-components/components/hds/tag';
 
 export default class ComponentsTagRoute extends Route {
   model() {
     // these are used only for presentation purpose in the showcase
     const STATES = ['default', 'hover', 'active', 'focus'];
-    return { COLORS, STATES };
+    return { COLORS, TOOLTIP_PLACEMENTS, STATES };
   }
 }

showcase/app/templates/components/tag.hbs

@@ -33,20 +33,20 @@
   </Shw::Flex>
 
   <Shw::Flex @label="With long text" as |SF|>
-    <SF.Item {{style width="200px"}}>
+    <SF.Item {{style width="176px"}}>
       <Hds::Tag @text="This is a very long text that should go on multiple lines" @onDismiss={{this.noop}} />
     </SF.Item>
-    <SF.Item {{style width="200px"}}>
+    <SF.Item {{style width="150px"}}>
       <Hds::Tag @text="This is a very long text that should go on multiple lines" />
     </SF.Item>
-    <SF.Item {{style width="200px"}}>
+    <SF.Item {{style width="176px"}}>
       <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"}}>
+    <SF.Item {{style width="150px"}}>
       <Hds::Tag @text="This is a very long text that should go on multiple lines" @route="components.tag" />
     </SF.Item>
   </Shw::Flex>
@@ -129,4 +129,19 @@
     {{/let}}
   </Shw::Grid>
 
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Tooltip Placements</Shw::Text::H2>
+
+  <Shw::Grid @columns={{3}} as |SG|>
+    {{#each @model.TOOLTIP_PLACEMENTS as |place|}}
+      <SG.Item>
+        <Hds::Tag
+          @text="{{place}} This is a very long text that should go on multiple lines"
+          @tooltipPlacement={{place}}
+        />
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
 </section>