fix(tabs): truncate container tab header text with ellipses (#5035)

Author: emyarod

packages/components/src/components/tabs/_tabs.scss

@@ -42,7 +42,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $spacing-05;
+    padding: 0 $spacing-09 0 $spacing-05;
     height: rem(40px);
     cursor: pointer;
     color: $text-01;
@@ -60,8 +60,8 @@
   }
 
   .#{$prefix}--tabs-trigger svg {
-    width: rem(12px);
-    height: rem(7px);
+    position: absolute;
+    right: $spacing-05;
     fill: $ui-05;
     transition: transform $duration--fast-01 motion(standard, productive);
   }
@@ -90,6 +90,9 @@
     padding-top: 2px;
     color: $text-01;
     font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .#{$prefix}--tabs-trigger-text:hover {
@@ -274,6 +277,9 @@
       background-color: $ui-01;
 
       .#{$prefix}--tabs__nav-link {
+        line-height: calc(
+          #{rem(48px)} - (#{$spacing-03} * 2)
+        ); // height - vertical padding
         // Draws the border without affecting the inner-content
         box-shadow: inset 0 2px 0 0 $interactive-04;
         border-bottom: none;
@@ -333,9 +339,10 @@
 
   .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
-      display: flex;
-      align-items: center;
       height: rem(48px);
+      line-height: calc(
+        #{rem(48px)} - (#{$spacing-03} * 2)
+      ); // height - vertical padding
       border-bottom: none;
     }
   }

packages/components/src/components/tabs/tabs.hbs

@@ -8,7 +8,7 @@
 <div data-tabs class="{{@root.prefix}}--tabs{{#if container}} {{@root.prefix}}--tabs--container{{/if}}">
   <div class="{{@root.prefix}}--tabs-trigger" tabindex="0">
     <a href="javascript:void(0)" class="{{@root.prefix}}--tabs-trigger-text" tabindex="-1"></a>
-    {{ carbon-icon 'ChevronDownGlyph' }}
+    {{ carbon-icon 'ChevronDown16' }}
   </div>
   <ul class="{{@root.prefix}}--tabs__nav {{@root.prefix}}--tabs__nav--hidden" role="tablist">
     {{#each items}}

packages/react/src/components/Tabs/Tabs-test.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { ChevronDownGlyph } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 import { shallow, mount } from 'enzyme';
 import Tabs from '../Tabs';
@@ -102,7 +102,7 @@ describe('Tabs', () => {
       });
 
       it('renders <Icon>', () => {
-        expect(trigger.find(ChevronDownGlyph).length).toBe(1);
+        expect(trigger.find(ChevronDown16).length).toBe(1);
       });
     });
 

packages/react/src/components/Tabs/Tabs.js

@@ -8,7 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { ChevronDownGlyph } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 import { keys, match, matches } from '../../internal/keyboard';
 
@@ -294,9 +294,9 @@ export default class Tabs extends React.Component {
               onClick={this.handleDropdownClick}>
               {selectedLabel}
             </a>
-            <ChevronDownGlyph aria-hidden="true">
+            <ChevronDown16 aria-hidden="true">
               {iconDescription && <title>{iconDescription}</title>}
-            </ChevronDownGlyph>
+            </ChevronDown16>
           </div>
           <ul role="tablist" className={classes.tablist}>
             {tabsWithProps}