feat(tab): introduce fixed variant

The new variant is enabled with `.bx--tabs--fixed` class. Fixes #1329.
carbon-design-system · Oct 23, 2019 · e0f760f · e0f760f
1 parent 0efc5da
commit e0f760f
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 3 deletions.
diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
@@ -181,6 +181,15 @@
   }
 }
 
+.component-example__live,
+.demo--container {
+  .bx--tabs--fixed + div {
+    width: 100%;
+    height: 320px;
+    background-color: $ui-01;
+  }
+}
+
 .page-header + div > .bx--tabs {
   background-color: $field-01;
 

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
@@ -94,6 +94,13 @@
     outline: none;
   }
 
+  .#{$prefix}--tabs--fixed {
+    @include carbon--breakpoint(md) {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 -1px 0 0 $ui-04;
+    }
+  }
+
   .#{$prefix}--tabs__nav {
     @include layer('overlay');
     margin: 0;
@@ -153,6 +160,28 @@
     }
   }
 
+  .#{$prefix}--tabs--fixed .#{$prefix}--tabs__nav-item {
+    @include carbon--breakpoint(md) {
+      background-color: $ui-03;
+
+      & + .#{$prefix}--tabs__nav-item {
+        margin-left: 0;
+        border-left: solid $ui-04 1px;
+      }
+    }
+  }
+
+  .#{$prefix}--tabs--fixed .#{$prefix}--tabs__nav-item,
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected) {
+    @include carbon--breakpoint(md) {
+      // Reveals the border of `<div class="bx--tabs bx--tabs--fixed">` with transparent border
+      border-bottom: solid transparent 1px;
+      // Prevents background color from affecting the transparent border
+      background-clip: content-box;
+    }
+  }
+
   .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
     transition: color $duration--fast-01 motion(standard, productive),
       border-bottom-color $duration--fast-01 motion(standard, productive),
@@ -178,6 +207,13 @@
     }
   }
 
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
+    @include carbon--breakpoint(md) {
+      background-color: $hover-ui;
+    }
+  }
+
   //---------------------------------------------
   // Item Disabled
   //---------------------------------------------
@@ -191,6 +227,21 @@
     pointer-events: none;
   }
 
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+    @include carbon--breakpoint(md) {
+      background-color: $disabled-02;
+    }
+  }
+
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-link {
+    color: $disabled-03;
+  }
+
   //-----------------------------
   // Item Selected
   //-----------------------------
@@ -215,6 +266,26 @@
     }
   }
 
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled),
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
+    @include carbon--breakpoint(md) {
+      background-color: $ui-01;
+
+      .#{$prefix}--tabs__nav-link {
+        // Draws the border without affecting the inner-content
+        box-shadow: inset 0 3px 0 0 $interactive-04;
+        border-bottom: none;
+      }
+
+      .#{$prefix}--tabs__nav-link:focus,
+      .#{$prefix}--tabs__nav-link:active {
+        box-shadow: none;
+      }
+    }
+  }
+
   //-----------------------------
   // Link
   //-----------------------------
@@ -260,6 +331,16 @@
     }
   }
 
+  .#{$prefix}--tabs--fixed a.#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      display: flex;
+      align-items: center;
+      // Prevents this elements from interfering the bottom border of `<div class="bx--tabs bx--tabs--fixed">`
+      margin-bottom: -1px;
+      border-bottom: none;
+    }
+  }
+
   //-----------------------------
   //  Link Hover
   //-----------------------------
@@ -272,6 +353,14 @@
     }
   }
 
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
+    .#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      border-bottom: none;
+    }
+  }
+
   //-----------------------------
   //  Link Disabled
   //-----------------------------
@@ -291,6 +380,14 @@
     border-bottom: $tab-underline-disabled;
   }
 
+  .#{$prefix}--tabs--fixed
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-link {
+    @include carbon--breakpoint(md) {
+      border-bottom: none;
+    }
+  }
+
   //-----------------------------
   //  Link Focus
   //-----------------------------

diff --git a/packages/components/src/components/tabs/tabs.config.js b/packages/components/src/components/tabs/tabs.config.js
@@ -54,5 +54,13 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'fixed',
+      label: 'Tabs (fixed)',
+      context: {
+        fixed: true,
+        items,
+      },
+    },
   ],
 };
diff --git a/packages/components/src/components/tabs/tabs.hbs b/packages/components/src/components/tabs/tabs.hbs
@@ -5,7 +5,7 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<div data-tabs class="{{@root.prefix}}--tabs">
+<div data-tabs class="{{@root.prefix}}--tabs{{#if fixed}} {{@root.prefix}}--tabs--fixed{{/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' }}

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -9,11 +9,22 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  boolean,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
 
+const types = {
+  'Default (default)': 'default',
+  'Fixed (fixed)': 'fixed',
+};
+
 const props = {
   tabs: () => ({
     className: 'some-class',
@@ -23,6 +34,7 @@ const props = {
       '#'
     ),
     role: text('ARIA role (role in <Tabs>)', 'navigation'),
+    type: select('Tabs type (type)', types, 'default'),
     iconDescription: text(
       'The description of the trigger icon for narrow mode (iconDescription in <Tabs>)',
       'show menu options'

diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
@@ -49,6 +49,20 @@ describe('Tabs', () => {
             .hasClass(`${prefix}--tabs`)
         ).toBe(true);
       });
+
+      it('supports fixed variant', () => {
+        expect(
+          shallow(
+            <Tabs className="extra-class" type="fixed">
+              <Tab label="firstTab">content1</Tab>
+              <Tab label="lastTab">content2</Tab>
+            </Tabs>
+          )
+            .find('div')
+            .first()
+            .hasClass(`${prefix}--tabs--fixed`)
+        ).toBe(true);
+      });
     });
 
     describe('Trigger (<div>)', () => {

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -43,6 +43,11 @@ export default class Tabs extends React.Component {
      */
     role: PropTypes.string.isRequired,
 
+    /**
+     * Provide the type of Tab
+     */
+    type: PropTypes.oneOf(['default', 'fixed']),
+
     /**
      * Optionally provide an `onClick` handler that is invoked when a <Tab> is
      * clicked
@@ -87,6 +92,7 @@ export default class Tabs extends React.Component {
   static defaultProps = {
     iconDescription: 'show menu options',
     role: 'navigation',
+    type: 'default',
     triggerHref: '#',
     selected: 0,
     ariaLabel: 'listbox',
@@ -191,6 +197,7 @@ export default class Tabs extends React.Component {
       className,
       triggerHref,
       role,
+      type,
       onSelectionChange,
       tabContentClassName,
       ...other
@@ -241,7 +248,9 @@ export default class Tabs extends React.Component {
     });
 
     const classes = {
-      tabs: classNames(`${prefix}--tabs`, className),
+      tabs: classNames(`${prefix}--tabs`, className, {
+        [`${prefix}--tabs--fixed`]: type === 'fixed',
+      }),
       tablist: classNames(`${prefix}--tabs__nav`, {
         [`${prefix}--tabs__nav--hidden`]: this.state.dropdownHidden,
       }),