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

carbon-design-system · Jan 23, 2020 · 532ebc8 · 532ebc8
1 parent 3919125
commit 532ebc8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/packages/components/src/components/tabs/_tabs.scss b/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;
  }
  }

diff --git a/packages/components/src/components/tabs/tabs.hbs b/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}}

diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/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);
  });
  });
 

diff --git a/packages/react/src/components/Tabs/Tabs.js b/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}