From 7935ad44cc021530619b723300b50eaa680af915 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 28 May 2020 10:49:53 -0700
Subject: [PATCH] fix(tag): add title to tags (#6112)

* fix(tag): add prop to enable title on tags

* chore(tests): update snapshots

* fix(tag): enable title by default

* fix(tag): set title by default

* chore(test): update snapshots
---
 packages/react/src/components/Tag/Tag-story.js |  6 +++---
 packages/react/src/components/Tag/Tag.js       | 12 +++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index fce6f9a4f21b..801d79ad0f23 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -27,7 +27,7 @@ const props = {
       )
     ),
     disabled: boolean('Disabled (disabled)', false),
-    title: 'Clear Filter',
+    title: text('Title (title)', 'Clear Filter'),
   }),
   filter() {
     return {
@@ -44,7 +44,7 @@ storiesOf('Tag', module)
     'Default',
     () => (
       <Tag className="some-class" {...props.regular()}>
-        {text('Content (children)', 'This is not a tag')}
+        {text('Content (children)', 'This is a tag')}
       </Tag>
     ),
     {
@@ -61,7 +61,7 @@ storiesOf('Tag', module)
     'Filter',
     () => (
       <Tag className="some-class" {...props.filter()} filter>
-        {text('Content (children)', 'This is not a tag')}
+        {text('Content (children)', 'This is a tag')}
       </Tag>
     ),
     {
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index d51bdbd95164..2161bf702d13 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -61,19 +61,25 @@ const Tag = ({
       }
       id={tagId}
       {...other}>
-      <span className={`${prefix}--tag__label`}>
+      <span
+        className={`${prefix}--tag__label`}
+        title={typeof children === 'string' ? children : null}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
       <button
         className={`${prefix}--tag__close-icon`}
         onClick={handleClose}
         disabled={disabled}
-        aria-labelledby={tagId}>
+        aria-labelledby={tagId}
+        title={title}>
         <Close16 />
       </button>
     </div>
   ) : (
-    <span className={tagClasses} {...other}>
+    <span
+      className={tagClasses}
+      title={typeof children === 'string' ? children : null}
+      {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
     </span>
   );