fix: content switcher icon position (#2290)

* fix: content switcher icon position * chore: correct elipses for inline-flex * chore: remove text-overflow
carbon-design-system · Apr 12, 2019 · 82bbc75 · 82bbc75
1 parent 9a1473f
commit 82bbc75
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
@@ -132,14 +132,14 @@
     @include focus-outline('reset');
 
     background-color: $ui-01;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     width: 100%;
     height: rem(40px);
     padding: $carbon--spacing-03 $carbon--spacing-05;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
     text-align: left;
     text-decoration: none;
     border: none;
@@ -212,6 +212,13 @@
     margin-left: $carbon--spacing-03;
   }
 
+  .#{$prefix}--content-switcher__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
   .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
   .#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon {
     fill: $text-01;

diff --git a/src/components/content-switcher/content-switcher.hbs b/src/components/content-switcher/content-switcher.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -16,7 +16,7 @@
     </svg>
     {{/if}}
     {{/if}}
-    {{#if label}}<span>{{label}}</span>{{/if}}
+    {{#if label}}<span class={{@root.prefix}}--content-switcher__label>{{label}}</span>{{/if}}
   </button>
   {{/each}}
 </div>