fix: add ellipses when width is constrained

carbon-design-system · Jan 7, 2020 · d633147 · d633147
1 parent 7aad317
commit d633147
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -98,44 +98,36 @@
 
     cursor: pointer;
     padding-right: rem(2px);
+
+    &:focus,
+    &:hover {
+      outline: none;
+    }
   }
 
-  .#{$prefix}--tag--filter__close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .#{$prefix}--tag--filter > svg {
+    flex-shrink: 0;
     width: rem(20px);
     height: rem(20px);
     margin: 0 0 0 rem(4px);
     padding: 0;
     border: 0;
+    fill: $inverse-01;
     background-color: transparent;
     border-radius: 50%;
 
     &:hover {
       background-color: $inverse-hover-ui;
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px $inverse-focus-ui;
     }
   }
 
-  .#{$prefix}--tag--filter svg {
-    fill: $inverse-01;
+  .#{$prefix}--tag--filter:focus > svg {
+    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+    border-radius: 50%;
   }
 
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag--filter__close-button:hover {
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover {
     background-color: transparent;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag--filter__close-button:focus {
-    box-shadow: none;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {

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
@@ -49,15 +49,13 @@ const Tag = ({
           ? `${title} ${children}`
           : `Clear filter ${children}`
       }
+      disabled={disabled}
+      onClick={!disabled ? onClick : undefined}
       {...other}>
-      {children !== null && children !== undefined ? children : TYPES[type]}
-      <button
-        aria-label={title || 'Clear filter'}
-        className={`${prefix}--tag--filter__close-button`}
-        disabled={disabled}
-        onClick={!disabled ? onClick : undefined}>
-        <Close16 />
-      </button>
+      <span className={`${prefix}--tag__label`}>
+        {children !== null && children !== undefined ? children : TYPES[type]}
+      </span>
+      <Close16 />
     </button>
   ) : (
     <button className={tagClasses} {...other}>