fix: add ellipses when width is constrained

carbon-design-system · Jan 6, 2020 · 6bf731b · 6bf731b
1 parent 307afc8
commit 6bf731b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
@@ -16,7 +16,7 @@
 <div role="list">
   {{#if filter}}
   <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" role="listitem">
-    filter
+    <span class="{{@root.prefix}}--tag__label">filter</span>
     <button aria-label='Clear filter' class="{{@root.prefix}}--tag--filter__close-button">
       {{ carbon-icon 'Close16' }}
     </button>

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -43,7 +43,9 @@ const Tag = ({
   });
   return filter ? (
     <span className={tagClasses} {...other}>
-      {children !== null && children !== undefined ? children : TYPES[type]}
+      <span className={`${prefix}--tag__label`}>
+        {children !== null && children !== undefined ? children : TYPES[type]}
+      </span>
       <button
         aria-label={title || 'Clear filter'}
         className={`${prefix}--tag--filter__close-button`}