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
carbon-design-system · May 28, 2020 · 7935ad4 · 7935ad4
1 parent c9efab2
commit 7935ad4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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>
   );