From 80cc867647817954615ee2f5813d9d02eae2ee81 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 8 Mar 2024 15:31:03 -0300
Subject: [PATCH 01/14] feat: added ellipses to tag

---
 .../react/src/components/Tag/Tag.stories.js   |  4 +-
 packages/react/src/components/Tag/Tag.tsx     | 61 ++++++++++++++++---
 packages/styles/scss/components/tag/_tag.scss | 18 +++++-
 3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index b162934e0dd2..9356c5f5472c 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -19,7 +19,7 @@ export const ReadOnly = () => {
   return (
     <>
       <Tag className="some-class" type="red">
-        {'Tag content'}
+        {'Tag content big Tag content big Tag content big '}
       </Tag>
       <Tag className="some-class" type="magenta">
         {'Tag content'}
@@ -61,7 +61,7 @@ export const ReadOnly = () => {
 export const Playground = (args) => {
   return (
     <Tag renderIcon={Asleep} {...args}>
-      {'Tag content'}
+      {'Tag contentcontent content content content'}
     </Tag>
   );
 };
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 959c67210077..775f9efb0a07 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -6,7 +6,7 @@
  */
 
 import PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -14,6 +14,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { PolymorphicProps } from '../../types/common';
 import { Text } from '../Text';
 import deprecate from '../../prop-types/deprecate';
+import { Tooltip } from '../Tooltip';
 
 const getInstanceId = setupGetInstanceId();
 export const TYPES = {
@@ -118,6 +119,17 @@ const Tag = <T extends React.ElementType>({
 }: TagProps<T>) => {
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+
+  const isEllipsisActive = (element: any) => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+
+  useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${children}"]`);
+    isEllipsisActive(element);
+  }, [prefix, children]);
 
   const conditions = [
     `${prefix}--tag--selectable`,
@@ -166,11 +178,26 @@ const Tag = <T extends React.ElementType>({
         ) : (
           ''
         )}
-        <Text
-          className={`${prefix}--tag__label`}
-          title={typeof children === 'string' ? children : undefined}>
-          {children !== null && children !== undefined ? children : typeText}
-        </Text>
+        {isEllipsisApplied ? (
+          <Tooltip
+            label={children}
+            align="bottom"
+            className={`${prefix}--tag-label-tooltip`}>
+            <Text
+              title={typeof children === 'string' ? children : undefined}
+              className={`${prefix}--tag__label`}>
+              {children !== null && children !== undefined
+                ? children
+                : typeText}
+            </Text>
+          </Tooltip>
+        ) : (
+          <Text
+            title={typeof children === 'string' ? children : undefined}
+            className={`${prefix}--tag__label`}>
+            {children !== null && children !== undefined ? children : typeText}
+          </Text>
+        )}
         {normalizedSlug}
         <button
           type="button"
@@ -204,9 +231,25 @@ const Tag = <T extends React.ElementType>({
       ) : (
         ''
       )}
-      <Text>
-        {children !== null && children !== undefined ? children : typeText}
-      </Text>
+
+      {isEllipsisApplied ? (
+        <Tooltip
+          label={children}
+          align="bottom"
+          className={`${prefix}--tag-label-tooltip`}>
+          <Text
+            title={typeof children === 'string' ? children : undefined}
+            className={`${prefix}--tag__label`}>
+            {children !== null && children !== undefined ? children : typeText}
+          </Text>
+        </Tooltip>
+      ) : (
+        <Text
+          title={typeof children === 'string' ? children : undefined}
+          className={`${prefix}--tag__label`}>
+          {children !== null && children !== undefined ? children : typeText}
+        </Text>
+      )}
       {normalizedSlug}
     </ComponentTag>
   );
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index 591bb212adb7..9381a0459a44 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -48,7 +48,7 @@
     margin: $spacing-02;
     cursor: default;
     // restricts size of contained elements
-    max-inline-size: 100%;
+    max-inline-size: convert.to-rem(208px);
     min-block-size: layout.size('height');
     // ensures tag stays pill shaped;
     min-inline-size: convert.to-rem(32px);
@@ -78,8 +78,8 @@
   }
 
   .#{$prefix}--tag__label {
+    display: block;
     overflow: hidden;
-    max-inline-size: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -407,5 +407,19 @@
   .#{$prefix}--tag__close-icon:focus {
     @include high-contrast-mode('focus');
   }
+
+  .#{$prefix}--tag-label-tooltip {
+    max-inline-size: -webkit-fill-available;
+  }
+
+  .#{$prefix}--tag__custom-icon + .#{$prefix}--tag-label-tooltip {
+    max-inline-size: convert.to-rem(176px);
+  }
+
+  .#{$prefix}--tag--filter
+    .#{$prefix}--tag__custom-icon
+    + .#{$prefix}--tag-label-tooltip {
+    max-inline-size: convert.to-rem(158px);
+  }
   /* stylelint-enable */
 }

From b623c7494410d5116b4699594d8b35ae9db46fd9 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Tue, 12 Mar 2024 18:06:35 -0300
Subject: [PATCH 02/14] feat: added tooltip

---
 .../src/components/Tag/DismissibleTag.tsx     |  24 ++--
 .../components/Tag/InteractiveTag.stories.js  |  47 ++++---
 .../src/components/Tag/SelectableTag.tsx      |  19 ++-
 packages/react/src/components/Tag/Tag.tsx     | 122 ++++++++++++------
 packages/styles/scss/components/tag/_tag.scss |  10 +-
 5 files changed, 140 insertions(+), 82 deletions(-)

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index b4095fd5824a..d6abd0c5f0fb 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -17,11 +17,6 @@ import { Close } from '@carbon/icons-react';
 const getInstanceId = setupGetInstanceId();
 
 export interface DismissibleTagBaseProps {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children?: React.ReactNode;
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -59,6 +54,11 @@ export interface DismissibleTagBaseProps {
    */
   slug?: ReactNodeLike;
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text?: string;
+
   /**
    * Text to show on clear filters
    */
@@ -76,7 +76,6 @@ export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<
 >;
 
 const DismissibleTag = <T extends React.ElementType>({
-  children,
   className,
   disabled,
   id,
@@ -85,6 +84,7 @@ const DismissibleTag = <T extends React.ElementType>({
   onClose,
   slug,
   size,
+  text,
   type,
   ...other
 }: DismissibleTagProps<T>) => {
@@ -118,10 +118,10 @@ const DismissibleTag = <T extends React.ElementType>({
       renderIcon={renderIcon}
       disabled={disabled}
       className={tagClasses}
+      text={text}
       id={tagId}
       {...otherProps}>
       <div className={`${prefix}--interactive--tag-children`}>
-        {children}
         {normalizedSlug}
         <button
           type="button"
@@ -137,11 +137,6 @@ const DismissibleTag = <T extends React.ElementType>({
   );
 };
 DismissibleTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children: PropTypes.node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -179,6 +174,11 @@ DismissibleTag.propTypes = {
    */
   slug: PropTypes.node,
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
+
   /**
    * Text to show on clear filters
    */
diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index b8384d6bef09..35e7e6e75b15 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -30,9 +30,20 @@ export default {
 
 export const Selectable = (args) => {
   return (
-    <SelectableTag renderIcon={Asleep} className="some-class" {...args}>
-      {'Tag content'}
-    </SelectableTag>
+    <>
+      <SelectableTag
+        renderIcon={Asleep}
+        className="some-class"
+        text="Tag content"
+        {...args}
+      />
+      <SelectableTag
+        renderIcon={Asleep}
+        className="some-class"
+        text="Tag content content content content content"
+        {...args}
+      />{' '}
+    </>
   );
 };
 
@@ -89,16 +100,16 @@ export const Operational = (args) => {
           type="red"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content content content content"
+          {...args}
+        />
         <OperationalTag
           type="magenta"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="purple"
           className="some-class"
@@ -299,25 +310,25 @@ export const Dismissible = (args) => {
         className="some-class"
         title="Clear Filter"
         renderIcon={Asleep}
-        {...args}>
-        {'Tag content'}
-      </DismissibleTag>
+        text="Tag content content content content"
+        {...args}
+      />
       <DismissibleTag
         type="magenta"
         className="some-class"
         title="Clear Filter"
+        text="Tag content"
+        renderIcon={Asleep}
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="purple"
         className="some-class"
         title="Clear Filter"
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+        renderIcon={Asleep}
+      />
       <DismissibleTag
         type="blue"
         className="some-class"
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index 31bc74fb456d..e813ff16ddb8 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -57,6 +57,11 @@ export interface SelectableTagBaseProps {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
    */
   slug?: ReactNodeLike;
+
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text?: string;
 }
 
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<
@@ -65,7 +70,6 @@ export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<
 >;
 
 const SelectableTag = <T extends React.ElementType>({
-  children,
   className,
   disabled,
   id,
@@ -73,6 +77,7 @@ const SelectableTag = <T extends React.ElementType>({
   selected = false,
   slug,
   size,
+  text,
   ...other
 }: SelectableTagProps<T>) => {
   const prefix = usePrefix();
@@ -102,10 +107,10 @@ const SelectableTag = <T extends React.ElementType>({
       disabled={disabled}
       className={tagClasses}
       id={tagId}
+      text={text}
       onClick={() => setSelectedTag(!selectedTag)}
       {...otherProps}>
       <div className={`${prefix}--interactive--tag-children`}>
-        {children}
         {normalizedSlug}
       </div>
     </Tag>
@@ -113,11 +118,6 @@ const SelectableTag = <T extends React.ElementType>({
 };
 
 SelectableTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `SelectableTag`
-   */
-  children: PropTypes.node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -154,6 +154,11 @@ SelectableTag.propTypes = {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
    */
   slug: PropTypes.node,
+
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
 };
 
 export default SelectableTag;
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 775f9efb0a07..e211fc75aa19 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -86,6 +86,11 @@ export interface TagBaseProps {
    */
   slug?: ReactNodeLike;
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text?: string;
+
   /**
    * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
    */
@@ -113,6 +118,7 @@ const Tag = <T extends React.ElementType>({
   disabled,
   onClose, // remove onClose in next major release - V12
   size,
+  text,
   as: BaseComponent,
   slug,
   ...other
@@ -120,6 +126,7 @@ const Tag = <T extends React.ElementType>({
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const [toggleTooltip, setToggleTooltip] = useState(true);
 
   const isEllipsisActive = (element: any) => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
@@ -127,9 +134,13 @@ const Tag = <T extends React.ElementType>({
   };
 
   useLayoutEffect(() => {
-    const element = document.querySelector(`[title="${children}"]`);
-    isEllipsisActive(element);
-  }, [prefix, children]);
+    const elementTagId = document.querySelector(`#${tagId}`);
+    const newElement = elementTagId?.getElementsByClassName(
+      `${prefix}--tag__label`
+    )[0];
+    console.log('newElement', newElement);
+    isEllipsisActive(newElement);
+  }, [prefix, children, tagId]);
 
   const conditions = [
     `${prefix}--tag--selectable`,
@@ -145,7 +156,8 @@ const Tag = <T extends React.ElementType>({
     [`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag,
+    [`${prefix}--tag--interactive`]:
+      (other.onClick && !isInteractiveTag) || isEllipsisApplied,
   });
 
   const typeText =
@@ -178,26 +190,12 @@ const Tag = <T extends React.ElementType>({
         ) : (
           ''
         )}
-        {isEllipsisApplied ? (
-          <Tooltip
-            label={children}
-            align="bottom"
-            className={`${prefix}--tag-label-tooltip`}>
-            <Text
-              title={typeof children === 'string' ? children : undefined}
-              className={`${prefix}--tag__label`}>
-              {children !== null && children !== undefined
-                ? children
-                : typeText}
-            </Text>
-          </Tooltip>
-        ) : (
-          <Text
-            title={typeof children === 'string' ? children : undefined}
-            className={`${prefix}--tag__label`}>
-            {children !== null && children !== undefined ? children : typeText}
-          </Text>
-        )}
+
+        <Text
+          title={typeof children === 'string' ? children : undefined}
+          className={`${prefix}--tag__label`}>
+          {children !== null && children !== undefined ? children : typeText}
+        </Text>
         {normalizedSlug}
         <button
           type="button"
@@ -214,10 +212,54 @@ const Tag = <T extends React.ElementType>({
 
   const ComponentTag =
     BaseComponent ??
-    (other.onClick || className?.includes(`${prefix}--tag--operational`)
+    (other.onClick ||
+    className?.includes(`${prefix}--tag--operational`) ||
+    isEllipsisApplied
       ? 'button'
       : 'div');
 
+  let tagText = text;
+
+  if (typeof children === 'string' && tagText === undefined) {
+    tagText = children;
+  }
+
+  if (isEllipsisApplied) {
+    return (
+      <>
+        <ComponentTag
+          disabled={disabled}
+          className={tagClasses}
+          id={tagId}
+          {...other}>
+          {CustomIconElement && size !== 'sm' ? (
+            <div className={`${prefix}--tag__custom-icon`}>
+              <CustomIconElement />
+            </div>
+          ) : (
+            ''
+          )}
+          <Tooltip
+            label={tagText}
+            align="bottom"
+            className={`${prefix}--tag-label-tooltip`}
+            defaultOpen={toggleTooltip}>
+            <Text title={tagText} className={`${prefix}--tag__label`}>
+              {tagText ? tagText : typeText}
+            </Text>
+          </Tooltip>
+
+          {text !== undefined ? children : null}
+          {normalizedSlug}
+        </ComponentTag>
+
+        <button type="button" onClick={() => setToggleTooltip(!!toggleTooltip)}>
+          toggle tooltip
+        </button>
+      </>
+    );
+  }
+
   return (
     <ComponentTag
       disabled={disabled}
@@ -231,25 +273,14 @@ const Tag = <T extends React.ElementType>({
       ) : (
         ''
       )}
-
-      {isEllipsisApplied ? (
-        <Tooltip
-          label={children}
-          align="bottom"
-          className={`${prefix}--tag-label-tooltip`}>
-          <Text
-            title={typeof children === 'string' ? children : undefined}
-            className={`${prefix}--tag__label`}>
-            {children !== null && children !== undefined ? children : typeText}
-          </Text>
-        </Tooltip>
-      ) : (
-        <Text
-          title={typeof children === 'string' ? children : undefined}
-          className={`${prefix}--tag__label`}>
-          {children !== null && children !== undefined ? children : typeText}
+      <Text title={tagText} className={`${prefix}--tag__label`}>
+        {tagText ? tagText : typeText}
+      </Text>
+      {text !== undefined ? (
+        <Text title={tagText} className={`${prefix}--tag__label`}>
+          {children}
         </Text>
-      )}
+      ) : null}
       {normalizedSlug}
     </ComponentTag>
   );
@@ -315,6 +346,11 @@ Tag.propTypes = {
    */
   slug: PropTypes.node,
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
+
   /**
    * Text to show on clear filters
    */
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index 9381a0459a44..ad9e1f4aa97f 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -72,6 +72,10 @@
       padding-inline-start: $spacing-03;
     }
 
+    &:not(.#{$prefix}--tag--selectable) {
+      border: 0;
+    }
+
     &:not(:first-child) {
       margin-inline-start: 0;
     }
@@ -85,8 +89,10 @@
   }
 
   .#{$prefix}--tag--interactive:focus {
-    box-shadow: inset 0 0 0 1px $focus;
-    outline: none;
+    // box-shadow: inset 0 0 0 1px $focus;
+    // outline: none;
+    outline: 2px solid $focus;
+    outline-offset: 1px;
   }
 
   .#{$prefix}--tag--interactive:hover {

From cc5ce74fec35b9a2c7a94aaecd03c9eb1a379c9b Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 14 Mar 2024 13:30:40 -0300
Subject: [PATCH 03/14] feat: added text prop to intereactive tags storybook

---
 .../components/Tag/InteractiveTag.stories.js  | 135 +++++++++---------
 packages/react/src/components/Tag/Tag.tsx     |  25 ++--
 2 files changed, 77 insertions(+), 83 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 35e7e6e75b15..83621864df6d 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -33,16 +33,16 @@ export const Selectable = (args) => {
     <>
       <SelectableTag
         renderIcon={Asleep}
-        className="some-class"
         text="Tag content"
+        className="some-class"
         {...args}
       />
       <SelectableTag
         renderIcon={Asleep}
+        text="Tag content with a long text description"
         className="some-class"
-        text="Tag content content content content content"
         {...args}
-      />{' '}
+      />
     </>
   );
 };
@@ -100,7 +100,7 @@ export const Operational = (args) => {
           type="red"
           className="some-class"
           renderIcon={Asleep}
-          text="Tag content content content content"
+          text="Tag content with a long text description"
           {...args}
         />
         <OperationalTag
@@ -114,58 +114,58 @@ export const Operational = (args) => {
           type="purple"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="blue"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="cyan"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="teal"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="green"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="gray"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="cool-gray"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
         <OperationalTag
           type="warm-gray"
           className="some-class"
           renderIcon={Asleep}
-          {...args}>
-          {'Tag content'}
-        </OperationalTag>
+          text="Tag content"
+          {...args}
+        />
       </div>
 
       <h4>Interactive examples</h4>
@@ -180,19 +180,22 @@ export const Operational = (args) => {
           label="View more"
           align="bottom"
           className={`${prefix}--icon-tooltip`}>
-          <OperationalTag className="some-class" renderIcon={Asleep} {...args}>
-            {'Tag content'}
-          </OperationalTag>
+          <OperationalTag
+            className="some-class"
+            renderIcon={Asleep}
+            text="Tag content"
+            {...args}
+          />
         </Tooltip>
 
         <Toggletip>
           <ToggletipButton label="Tag content" tabIndex={-1} as="div">
             <OperationalTag
               renderIcon={Asleep}
+              text="Tag content"
               className="some-class"
-              {...args}>
-              {'Tag content'}
-            </OperationalTag>
+              {...args}
+            />
           </ToggletipButton>
           <ToggletipContent>
             <div style={{ lineHeight: 0 }}>
@@ -211,10 +214,10 @@ export const Operational = (args) => {
               setOpen(!open);
             }}
             renderIcon={Asleep}
+            text="Tag content"
             className="some-class"
-            {...args}>
-            {'Tag content'}
-          </OperationalTag>
+            {...args}
+          />
           <PopoverContent>
             <div
               style={{
@@ -310,7 +313,7 @@ export const Dismissible = (args) => {
         className="some-class"
         title="Clear Filter"
         renderIcon={Asleep}
-        text="Tag content content content content"
+        text="Tag content with a long text description"
         {...args}
       />
       <DismissibleTag
@@ -326,81 +329,81 @@ export const Dismissible = (args) => {
         className="some-class"
         title="Clear Filter"
         text="Tag content"
-        {...args}
         renderIcon={Asleep}
+        {...args}
       />
       <DismissibleTag
         type="blue"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="cyan"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="teal"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="green"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="gray"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="cool-gray"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="warm-gray"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="high-contrast"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
       <DismissibleTag
         type="outline"
         className="some-class"
         title="Clear Filter"
+        renderIcon={Asleep}
+        text="Tag content"
         {...args}
-        renderIcon={Asleep}>
-        {'Tag content'}
-      </DismissibleTag>
+      />
     </>
   );
 };
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index e211fc75aa19..f000da1890d1 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -126,7 +126,6 @@ const Tag = <T extends React.ElementType>({
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const [toggleTooltip, setToggleTooltip] = useState(true);
 
   const isEllipsisActive = (element: any) => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
@@ -226,7 +225,10 @@ const Tag = <T extends React.ElementType>({
 
   if (isEllipsisApplied) {
     return (
-      <>
+      <Tooltip
+        label={tagText}
+        align="bottom"
+        className={`${prefix}--tag-label-tooltip`}>
         <ComponentTag
           disabled={disabled}
           className={tagClasses}
@@ -239,24 +241,13 @@ const Tag = <T extends React.ElementType>({
           ) : (
             ''
           )}
-          <Tooltip
-            label={tagText}
-            align="bottom"
-            className={`${prefix}--tag-label-tooltip`}
-            defaultOpen={toggleTooltip}>
-            <Text title={tagText} className={`${prefix}--tag__label`}>
-              {tagText ? tagText : typeText}
-            </Text>
-          </Tooltip>
-
+          <Text title={tagText} className={`${prefix}--tag__label`}>
+            {tagText ? tagText : typeText}
+          </Text>
           {text !== undefined ? children : null}
           {normalizedSlug}
         </ComponentTag>
-
-        <button type="button" onClick={() => setToggleTooltip(!!toggleTooltip)}>
-          toggle tooltip
-        </button>
-      </>
+      </Tooltip>
     );
   }
 

From ea500670acfec2dfe28c83251947927ec46c56c6 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 14 Mar 2024 13:48:58 -0300
Subject: [PATCH 04/14] fix: removed children prop from interactive tags

---
 .../src/components/Tag/OperationalTag.tsx     | 24 +++++++++----------
 .../src/components/Tag/SelectableTag.tsx      |  5 ----
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
index 7feb9189dc18..4fe10e11b054 100644
--- a/packages/react/src/components/Tag/OperationalTag.tsx
+++ b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -29,11 +29,6 @@ const TYPES = {
 };
 
 export interface OperationalTagBaseProps {
-  /**
-   * Provide content to be rendered inside of a `OperationalTag`
-   */
-  children?: React.ReactNode;
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -67,6 +62,11 @@ export interface OperationalTagBaseProps {
    */
   slug?: ReactNodeLike;
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text?: string;
+
   /**
    * Specify the type of the `Tag`
    */
@@ -79,13 +79,13 @@ export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<
 >;
 
 const OperationalTag = <T extends React.ElementType>({
-  children,
   className,
   disabled,
   id,
   renderIcon,
   slug,
   size,
+  text,
   type = 'gray',
   ...other
 }: OperationalTagProps<T>) => {
@@ -109,9 +109,9 @@ const OperationalTag = <T extends React.ElementType>({
       disabled={disabled}
       className={tagClasses}
       id={tagId}
+      text={text}
       {...other}>
       <div className={`${prefix}--interactive--tag-children`}>
-        {children}
         {normalizedSlug}
       </div>
     </Tag>
@@ -119,11 +119,6 @@ const OperationalTag = <T extends React.ElementType>({
 };
 
 OperationalTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `OperationalTag`
-   */
-  children: PropTypes.node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -156,6 +151,11 @@ OperationalTag.propTypes = {
    */
   slug: PropTypes.node,
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
+
   /**
    * Specify the type of the `Tag`
    */
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index e813ff16ddb8..b466b50ef72d 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -16,11 +16,6 @@ import Tag, { SIZES } from './Tag';
 const getInstanceId = setupGetInstanceId();
 
 export interface SelectableTagBaseProps {
-  /**
-   * Provide content to be rendered inside of a `SelectableTag`
-   */
-  children?: React.ReactNode;
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */

From 3dfb0685cc9cb593415fc2a4a908a8de085910d2 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 14 Mar 2024 13:56:48 -0300
Subject: [PATCH 05/14] test: snapshots updated

---
 .../src/__tests__/__snapshots__/PublicAPI-test.js.snap      | 6 ++++++
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap    | 3 +++
 packages/styles/scss/__tests__/theme-test.js                | 6 ++++++
 3 files changed, 15 insertions(+)

diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index f56fe39aeca3..be0e3c8e2f87 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -77,6 +77,12 @@ Array [
   "chatBubbleAgent",
   "chatBubbleAgentBorder",
   "chatBubbleUser",
+  "chatButton",
+  "chatButtonActive",
+  "chatButtonHover",
+  "chatButtonSelected",
+  "chatButtonTextHover",
+  "chatButtonTextSelected",
   "chatHeaderBackground",
   "chatPromptBackground",
   "chatPromptBorderEnd",
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index f8fa1425bc58..0073245a2fbe 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8210,6 +8210,9 @@ Map {
       "slug": Object {
         "type": "node",
       },
+      "text": Object {
+        "type": "string",
+      },
       "title": [Function],
       "type": Object {
         "args": Array [
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index fc41dece5e1b..62c0d848f8d3 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -163,6 +163,12 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-avatar-user",
         "chat-shell-background",
         "chat-header-background",
+        "chat-button",
+        "chat-button-hover",
+        "chat-button-text-hover",
+        "chat-button-active",
+        "chat-button-selected",
+        "chat-button-text-selected",
         "highlight",
         "overlay",
         "toggle-off",

From eff52edadf0da5e7123e25e9c7b55631a4ab7bf3 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 15 Mar 2024 12:40:19 -0300
Subject: [PATCH 06/14] fix: fixed button propagation

---
 packages/react/src/components/Tag/DismissibleTag.tsx | 3 +++
 packages/react/src/components/Tag/Tag.tsx            | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index d6abd0c5f0fb..6a1fbb054308 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -124,6 +124,9 @@ const DismissibleTag = <T extends React.ElementType>({
       <div className={`${prefix}--interactive--tag-children`}>
         {normalizedSlug}
         <button
+          onFocus={(event) => {
+            event.stopPropagation();
+          }}
           type="button"
           className={`${prefix}--tag__close-icon`}
           onClick={handleClose}
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index f000da1890d1..f5d2322e1312 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -137,7 +137,6 @@ const Tag = <T extends React.ElementType>({
     const newElement = elementTagId?.getElementsByClassName(
       `${prefix}--tag__label`
     )[0];
-    console.log('newElement', newElement);
     isEllipsisActive(newElement);
   }, [prefix, children, tagId]);
 
@@ -228,7 +227,8 @@ const Tag = <T extends React.ElementType>({
       <Tooltip
         label={tagText}
         align="bottom"
-        className={`${prefix}--tag-label-tooltip`}>
+        className={`${prefix}--tag-label-tooltip`}
+        closeOnActivation>
         <ComponentTag
           disabled={disabled}
           className={tagClasses}

From e70d8c6cdd7b164372d8c8c0ccfa0bbf6c590fe5 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 15 Mar 2024 12:42:31 -0300
Subject: [PATCH 07/14] fix: added text to operational tags

---
 packages/react/src/components/Tag/InteractiveTag.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 83621864df6d..d570a8ae0b3d 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -192,7 +192,7 @@ export const Operational = (args) => {
           <ToggletipButton label="Tag content" tabIndex={-1} as="div">
             <OperationalTag
               renderIcon={Asleep}
-              text="Tag content"
+              text="Tag content content content content"
               className="some-class"
               {...args}
             />
@@ -214,7 +214,7 @@ export const Operational = (args) => {
               setOpen(!open);
             }}
             renderIcon={Asleep}
-            text="Tag content"
+            text="Tag content content content content"
             className="some-class"
             {...args}
           />

From 46b13ecca0433d94bdb34bf994daa8f7cbcb1dff Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 15 Mar 2024 13:12:49 -0300
Subject: [PATCH 08/14] fix: removed Tooltip from operational tag example

---
 .../src/components/Tag/InteractiveTag.stories.js  | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index d570a8ae0b3d..2de857816acd 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -11,11 +11,9 @@ import { default as SelectableTag } from './SelectableTag';
 import { default as OperationalTag } from './OperationalTag';
 import { default as DismissibleTag } from './DismissibleTag';
 import { Asleep } from '@carbon/icons-react';
-import { Tooltip } from '../Tooltip';
 import { Toggletip, ToggletipButton, ToggletipContent } from '../Toggletip';
 import { Popover, PopoverContent } from '../Popover';
 import mdx from './InteractiveTag.mdx';
-import { usePrefix } from '../../internal/usePrefix';
 import './storyInteractiveTag.scss';
 
 export default {
@@ -90,7 +88,6 @@ Selectable.argTypes = {
 };
 
 export const Operational = (args) => {
-  const prefix = usePrefix();
   const [open, setOpen] = useState(false);
 
   return (
@@ -176,18 +173,6 @@ export const Operational = (args) => {
           justifyContent: 'flex-start',
           marginTop: '1rem',
         }}>
-        <Tooltip
-          label="View more"
-          align="bottom"
-          className={`${prefix}--icon-tooltip`}>
-          <OperationalTag
-            className="some-class"
-            renderIcon={Asleep}
-            text="Tag content"
-            {...args}
-          />
-        </Tooltip>
-
         <Toggletip>
           <ToggletipButton label="Tag content" tabIndex={-1} as="div">
             <OperationalTag

From 121073611614c6a64ea7ce9be749c61b29628395 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 15 Mar 2024 14:34:56 -0300
Subject: [PATCH 09/14] test: fixed tests

---
 .../InteractiveTag-test.avt.e2e.js            | 13 ++++++++++++-
 e2e/components/Tag/Tag-test.avt.e2e.js        | 19 +++++++++++++++++++
 .../components/Tag/InteractiveTag.stories.js  |  4 ++--
 .../react/src/components/Tag/Tag.stories.js   |  2 +-
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js b/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
index 0850ab819921..ee1be50fbbfa 100644
--- a/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
+++ b/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
@@ -53,10 +53,12 @@ test.describe('@avt InteractiveTag', () => {
         theme: 'white',
       },
     });
+    const tooltip = page.getByRole('tooltip');
     const button = page.getByRole('button').first();
     await expect(button).toBeVisible();
     await page.keyboard.press('Tab');
     await expect(button).toBeFocused();
+    await expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
   test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
@@ -71,6 +73,10 @@ test.describe('@avt InteractiveTag', () => {
     await expect(button).toBeVisible();
     await page.keyboard.press('Tab');
     await expect(button).toBeFocused();
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
     await expect(button).toHaveClass(/cds--tag--red/);
 
     await page.keyboard.press('Tab');
@@ -87,7 +93,7 @@ test.describe('@avt InteractiveTag', () => {
     // Expecte the OperationalTag with tooltip be focusable and visible
     await expect(page.getByRole('button').nth(10)).toBeFocused();
     await page.keyboard.press('Enter');
-    await expect(page.getByText('View More')).toBeVisible();
+    await expect(page.getByText('Tag 1 name').first()).toBeVisible();
   });
 
   test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
@@ -104,5 +110,10 @@ test.describe('@avt InteractiveTag', () => {
     await expect(tag).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(tag).toHaveClass(/cds--tag--selectable-selected/);
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
   });
 });
diff --git a/e2e/components/Tag/Tag-test.avt.e2e.js b/e2e/components/Tag/Tag-test.avt.e2e.js
index 37debfcac4b4..2960bc8ea1ae 100644
--- a/e2e/components/Tag/Tag-test.avt.e2e.js
+++ b/e2e/components/Tag/Tag-test.avt.e2e.js
@@ -32,4 +32,23 @@ test.describe('@avt Tag', () => {
     });
     await expect(page).toHaveNoACViolations('Tag-skeleton');
   });
+
+  test('@avt-keyboard-nav Tag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'components-tag--read-only',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const button = page.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(button).toBeFocused();
+    // Expect Tooltip to be visible
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
+  });
 });
diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 2de857816acd..2c1c1b935473 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -177,7 +177,7 @@ export const Operational = (args) => {
           <ToggletipButton label="Tag content" tabIndex={-1} as="div">
             <OperationalTag
               renderIcon={Asleep}
-              text="Tag content content content content"
+              text="Tag content with a long text description"
               className="some-class"
               {...args}
             />
@@ -199,7 +199,7 @@ export const Operational = (args) => {
               setOpen(!open);
             }}
             renderIcon={Asleep}
-            text="Tag content content content content"
+            text="Tag content with a long text description"
             className="some-class"
             {...args}
           />
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index 9356c5f5472c..f3c26d34dc46 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -19,7 +19,7 @@ export const ReadOnly = () => {
   return (
     <>
       <Tag className="some-class" type="red">
-        {'Tag content big Tag content big Tag content big '}
+        {'Tag content with a long text description'}
       </Tag>
       <Tag className="some-class" type="magenta">
         {'Tag content'}

From d4f508182f76b44e58905ef49c98864bab2dd69e Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Tue, 2 Apr 2024 09:57:29 -0300
Subject: [PATCH 10/14] fix: added tooltip style

---
 packages/react/src/components/Tag/Tag-test.js | 5 +----
 packages/react/src/components/Tag/Tag.tsx     | 7 ++++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index bd7715035e0c..69c5e1d3ad1a 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -30,11 +30,8 @@ describe('Tag', () => {
   });
 
   it('should have an appropriate aria-label when (filterable)', () => {
-    const children = 'tag-3';
     const { container } = render(
-      <DismissibleTag type="red" title="Close tag">
-        {children}
-      </DismissibleTag>
+      <DismissibleTag type="red" title="Close tag" text="Tag content" />
     );
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const button = container.querySelector('[aria-label]');
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index f5d2322e1312..fcdc0d0855ce 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -222,12 +222,17 @@ const Tag = <T extends React.ElementType>({
     tagText = children;
   }
 
+  const tooltipClasses = classNames(
+    `${prefix}--icon-tooltip`,
+    `${prefix}--tag-label-tooltip`
+  );
+
   if (isEllipsisApplied) {
     return (
       <Tooltip
         label={tagText}
         align="bottom"
-        className={`${prefix}--tag-label-tooltip`}
+        className={tooltipClasses}
         closeOnActivation>
         <ComponentTag
           disabled={disabled}

From ff06ff517c8ee02323470819d95c8b1d222bc17c Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Tue, 2 Apr 2024 15:40:41 -0300
Subject: [PATCH 11/14] fix: added a class to manipulate the onMouseEnter in
 Tooltip

---
 packages/react/src/components/Tag/Tag.tsx              |  2 ++
 .../react/src/components/Tag/storyInteractiveTag.scss  |  6 ++++++
 packages/react/src/components/Tooltip/Tooltip.tsx      | 10 ++++++++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index fcdc0d0855ce..1d5e58b17b96 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -224,6 +224,7 @@ const Tag = <T extends React.ElementType>({
 
   const tooltipClasses = classNames(
     `${prefix}--icon-tooltip`,
+    `${prefix}--tooltip-disabled-onmouseenter`,
     `${prefix}--tag-label-tooltip`
   );
 
@@ -233,6 +234,7 @@ const Tag = <T extends React.ElementType>({
         label={tagText}
         align="bottom"
         className={tooltipClasses}
+        leaveDelayMs={0}
         closeOnActivation>
         <ComponentTag
           disabled={disabled}
diff --git a/packages/react/src/components/Tag/storyInteractiveTag.scss b/packages/react/src/components/Tag/storyInteractiveTag.scss
index faf601110188..407126a219b2 100644
--- a/packages/react/src/components/Tag/storyInteractiveTag.scss
+++ b/packages/react/src/components/Tag/storyInteractiveTag.scss
@@ -3,3 +3,9 @@
 #operational-tag > .cds--popover--caret {
   --cds-popover-offset: 5px;
 }
+
+#operational-tag > .cds--popover-caret,
+.cds--popover {
+  --cds-popover-offset: 5px;
+  --cds-popover-caret-height: 5px;
+}
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index f3718d5078c3..d095a67d26ba 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -155,8 +155,14 @@ function Tooltip<T extends React.ElementType>({
   }
 
   function onMouseEnter() {
-    setIsPointerIntersecting(true);
-    setOpen(true, enterDelayMs);
+    // Interactive Tags should not support onMouseEnter
+    const isMouseOnEnterDisabled = customClassName?.includes(
+      `${prefix}--tooltip-disabled-onmouseenter`
+    );
+    if (!isMouseOnEnterDisabled) {
+      setIsPointerIntersecting(true);
+      setOpen(true, enterDelayMs);
+    }
   }
 
   function onMouseLeave() {

From e74cc290f043130a476d30eeef7b9d6de70640c8 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 3 Apr 2024 10:40:21 -0300
Subject: [PATCH 12/14] chore: an updated to interactive tag story

---
 packages/react/src/components/Tag/InteractiveTag.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 2c1c1b935473..b9b2de0c10ce 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -177,7 +177,7 @@ export const Operational = (args) => {
           <ToggletipButton label="Tag content" tabIndex={-1} as="div">
             <OperationalTag
               renderIcon={Asleep}
-              text="Tag content with a long text description"
+              text="Tag content"
               className="some-class"
               {...args}
             />
@@ -199,7 +199,7 @@ export const Operational = (args) => {
               setOpen(!open);
             }}
             renderIcon={Asleep}
-            text="Tag content with a long text description"
+            text="Tag content"
             className="some-class"
             {...args}
           />

From 076ff6cfc82668129a1f86c27e665feebf09990e Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 3 Apr 2024 10:42:39 -0300
Subject: [PATCH 13/14] chore: update interactive story

---
 packages/react/src/components/Tag/InteractiveTag.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index b9b2de0c10ce..75c8994bf290 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -31,13 +31,13 @@ export const Selectable = (args) => {
     <>
       <SelectableTag
         renderIcon={Asleep}
-        text="Tag content"
+        text="Tag content with a long text description"
         className="some-class"
         {...args}
       />
       <SelectableTag
         renderIcon={Asleep}
-        text="Tag content with a long text description"
+        text="Tag content"
         className="some-class"
         {...args}
       />

From 0f749d8913f0805c3ac9b670b031dcc3f8ed77d0 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 4 Apr 2024 11:48:52 -0300
Subject: [PATCH 14/14] fix: fixed dismissible tag issue and playground story

---
 .../src/components/Tag/DismissibleTag.tsx     | 28 +++++++++----------
 .../src/components/Tag/OperationalTag.tsx     |  4 +--
 .../src/components/Tag/SelectableTag.tsx      |  4 +--
 .../react/src/components/Tag/Tag.stories.js   |  2 +-
 packages/styles/scss/components/tag/_tag.scss |  5 ----
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index 6a1fbb054308..bce84de6c492 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -121,21 +121,19 @@ const DismissibleTag = <T extends React.ElementType>({
       text={text}
       id={tagId}
       {...otherProps}>
-      <div className={`${prefix}--interactive--tag-children`}>
-        {normalizedSlug}
-        <button
-          onFocus={(event) => {
-            event.stopPropagation();
-          }}
-          type="button"
-          className={`${prefix}--tag__close-icon`}
-          onClick={handleClose}
-          disabled={disabled}
-          aria-label={title}
-          title={title}>
-          <Close />
-        </button>
-      </div>
+      {normalizedSlug}
+      <button
+        onFocus={(event) => {
+          event.stopPropagation();
+        }}
+        type="button"
+        className={`${prefix}--tag__close-icon`}
+        onClick={handleClose}
+        disabled={disabled}
+        aria-label={title}
+        title={title}>
+        <Close />
+      </button>
     </Tag>
   );
 };
diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
index 4fe10e11b054..ec5f99a9e0b5 100644
--- a/packages/react/src/components/Tag/OperationalTag.tsx
+++ b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -111,9 +111,7 @@ const OperationalTag = <T extends React.ElementType>({
       id={tagId}
       text={text}
       {...other}>
-      <div className={`${prefix}--interactive--tag-children`}>
-        {normalizedSlug}
-      </div>
+      {normalizedSlug}
     </Tag>
   );
 };
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index b466b50ef72d..55a80d24979b 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -105,9 +105,7 @@ const SelectableTag = <T extends React.ElementType>({
       text={text}
       onClick={() => setSelectedTag(!selectedTag)}
       {...otherProps}>
-      <div className={`${prefix}--interactive--tag-children`}>
-        {normalizedSlug}
-      </div>
+      {normalizedSlug}
     </Tag>
   );
 };
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index f3c26d34dc46..f8ad717f4aac 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -61,7 +61,7 @@ export const ReadOnly = () => {
 export const Playground = (args) => {
   return (
     <Tag renderIcon={Asleep} {...args}>
-      {'Tag contentcontent content content content'}
+      {'Tag content'}
     </Tag>
   );
 };
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index ad9e1f4aa97f..e6e88d77a01f 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -111,11 +111,6 @@
     }
   }
 
-  .#{$prefix}--interactive--tag-children {
-    display: inline-flex;
-    place-items: center;
-  }
-
   .#{$prefix}--tag--selectable {
     border: 1px solid $border-inverse;
     background-color: $layer;