Merge branch 'master' into 4584_accordion-alignment

carbon-design-system · Dec 5, 2019 · bf7fd67 · bf7fd67
2 parents c6f2284 + 5b9c3b3
commit bf7fd67
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/.github/workflows/sync-generated-files.yml b/.github/workflows/sync-generated-files.yml
@@ -7,7 +7,7 @@ jobs:
   release:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@v1
       - name: Use Node.js 10.x
         uses: actions/setup-node@v1
         with:

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -3442,6 +3442,7 @@ $carbon--spacing-06: 1.5rem;
   - [toast-notifications [mixin]](#toast-notifications-mixin)
   - [progress-indicator [mixin]](#progress-indicator-mixin)
   - [padding-td [mixin]](#padding-td-mixin)
+  - [tags [mixin]](#tags-mixin)
 
 ### ✅carbon--spacing-07 [variable]
 
@@ -17187,7 +17188,7 @@ Link styles
       @include focus-outline;
     }
 
-    &:not([href]) {
+    &:not([href]):not(button) {
       color: $disabled-02;
       cursor: not-allowed;
       pointer-events: none;
@@ -21779,10 +21780,13 @@ Tag styles
 @mixin tags() {
   .#{$prefix}--tag {
     @include type-style('label-01');
+
     display: inline-flex;
+    position: relative;
     align-items: center;
     padding: 0 $carbon--spacing-03;
     height: 1.5rem;
+    max-width: 100%; // restricts size of contained elements
     margin: $carbon--spacing-02;
     border-radius: rem(15px);
 
@@ -21843,14 +21847,28 @@ Tag styles
     }
   }
 
+  .#{$prefix}--tag__label {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   // tags used for filtering
   .#{$prefix}--tag--filter {
     @include tag-theme($inverse-02, $inverse-01);
+
     cursor: pointer;
-    padding-right: rem(2px); // Align with hover circle of X button
+    padding-right: calc(
+      #{$carbon--spacing-06} + #{rem(2px)}
+    ); // icon width + 2px space from right edge
   }
 
   .#{$prefix}--tag--filter > svg {
+    position: absolute;
+    right: rem(2px);
+    top: 50%;
+    transform: translateY(-50%);
     fill: $inverse-01;
     margin-left: rem(4px);
     padding: rem(2px);
@@ -21876,6 +21894,7 @@ Tag styles
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(60px);
     overflow: hidden;
   }
@@ -21894,6 +21913,7 @@ Tag styles
   - [text-01 [variable]](#text-01-variable)
   - [inverse-02 [variable]](#inverse-02-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
+  - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
 

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -17,10 +17,13 @@
 @mixin tags {
   .#{$prefix}--tag {
     @include type-style('label-01');
+
     display: inline-flex;
+    position: relative;
     align-items: center;
     padding: 0 $carbon--spacing-03;
     height: 1.5rem;
+    max-width: 100%; // restricts size of contained elements
     margin: $carbon--spacing-02;
     border-radius: rem(15px);
 
@@ -81,14 +84,28 @@
     }
   }
 
+  .#{$prefix}--tag__label {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   // tags used for filtering
   .#{$prefix}--tag--filter {
     @include tag-theme($inverse-02, $inverse-01);
+
     cursor: pointer;
-    padding-right: rem(2px); // Align with hover circle of X button
+    padding-right: calc(
+      #{$carbon--spacing-06} + #{rem(2px)}
+    ); // icon width + 2px space from right edge
   }
 
   .#{$prefix}--tag--filter > svg {
+    position: absolute;
+    right: rem(2px);
+    top: 50%;
+    transform: translateY(-50%);
     fill: $inverse-01;
     margin-left: rem(4px);
     padding: rem(2px);
@@ -114,6 +131,7 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(60px);
     overflow: hidden;
   }

diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
@@ -7,14 +7,16 @@
 
 <div role="list">
   {{#each tags}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}" role="listitem">{{label}}</span>
+  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}" role="listitem">
+    <span class="{{@root.prefix}}--tag__label">{{label}}</span>
+  </span>
   {{/each}}
 </div>
 
 <div role="list">
   {{#if filter}}
   <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" tabindex="0" role="listitem">
-    filter
+    <span class="{{@root.prefix}}--tag__label">filter</span>
     {{ carbon-icon 'Close16' aria-label='Clear filter' }}
   </span>
   {{/if}}