chore(tabs): rename fixed variant to container (#4685)

Fixes #4683.
carbon-design-system · Nov 18, 2019 · 36a7a8b · 36a7a8b
1 parent d59b7f6
commit 36a7a8b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 24 deletions.
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
@@ -32,7 +32,7 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed {
+  .#{$prefix}--tabs--container {
     @include carbon--breakpoint(md) {
       min-height: rem(48px);
     }
@@ -159,7 +159,7 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed .#{$prefix}--tabs__nav-item {
+  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
     @include carbon--breakpoint(md) {
       background-color: $ui-03;
 
@@ -205,7 +205,7 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
     @include carbon--breakpoint(md) {
       background-color: $hover-selected-ui;
@@ -225,16 +225,16 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
     @include carbon--breakpoint(md) {
       background-color: $disabled-02;
     }
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item--disabled
     .#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
@@ -266,9 +266,9 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled),
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
     @include carbon--breakpoint(md) {
       background-color: $ui-01;
@@ -331,7 +331,7 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed a.#{$prefix}--tabs__nav-link {
+  .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
       display: flex;
       align-items: center;
@@ -352,7 +352,7 @@
     }
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$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) {
@@ -379,7 +379,7 @@
     border-bottom: $tab-underline-disabled;
   }
 
-  .#{$prefix}--tabs--fixed
+  .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item--disabled
     .#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {

diff --git a/packages/components/src/components/tabs/tabs.config.js b/packages/components/src/components/tabs/tabs.config.js
@@ -55,11 +55,11 @@ module.exports = {
       },
     },
     {
-      name: 'fixed',
-      label: 'Tabs (fixed)',
+      name: 'container',
+      label: 'Tabs (container)',
       context: {
-        fixed: true,
-        items: items('fixed'),
+        container: true,
+        items: items('container'),
       },
     },
   ],

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{{#if fixed}} {{@root.prefix}}--tabs--fixed{{/if}}">
+<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' }}

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -97,9 +97,9 @@ storiesOf('Tabs', module)
     }
   )
   .add(
-    'Fixed',
+    'Container',
     () => (
-      <Tabs type="fixed" {...props.tabs()}>
+      <Tabs type="container" {...props.tabs()}>
         <Tab {...props.tab()} label="Tab label 1">
           <div className="some-content" style={{ paddingLeft: 16 }}>
             Content for first tab goes here.

diff --git a/packages/react/src/components/Tabs/Tabs-story.scss b/packages/react/src/components/Tabs/Tabs-story.scss
@@ -3,7 +3,7 @@
 // Use e.g. `@import '~carbon-components/scss/globals/scss/styles.scss'` instead.
 @import '~carbon-components/src/globals/scss/css--helpers'; // SEE THE NOTE ABOVE
 
-.bx--tabs--fixed ~ div {
+.bx--tabs--container ~ div {
   height: 320px;
   background-color: $ui-01;
 }
diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
@@ -50,17 +50,17 @@ describe('Tabs', () => {
         ).toBe(true);
       });
 
-      it('supports fixed variant', () => {
+      it('supports container variant', () => {
         expect(
           shallow(
-            <Tabs className="extra-class" type="fixed">
+            <Tabs className="extra-class" type="container">
               <Tab label="firstTab">content1</Tab>
               <Tab label="lastTab">content2</Tab>
             </Tabs>
           )
             .find('div')
             .first()
-            .hasClass(`${prefix}--tabs--fixed`)
+            .hasClass(`${prefix}--tabs--container`)
         ).toBe(true);
       });
     });

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -46,7 +46,7 @@ export default class Tabs extends React.Component {
     /**
      * Provide the type of Tab
      */
-    type: PropTypes.oneOf(['default', 'fixed']),
+    type: PropTypes.oneOf(['default', 'container']),
 
     /**
      * Optionally provide an `onClick` handler that is invoked when a <Tab> is
@@ -249,7 +249,7 @@ export default class Tabs extends React.Component {
 
     const classes = {
       tabs: classNames(`${prefix}--tabs`, className, {
-        [`${prefix}--tabs--fixed`]: type === 'fixed',
+        [`${prefix}--tabs--container`]: type === 'container',
       }),
       tablist: classNames(`${prefix}--tabs__nav`, {
         [`${prefix}--tabs__nav--hidden`]: this.state.dropdownHidden,